安利一波VSCODE插件

2,091 阅读5分钟

vscode我就不多作介绍了,都9102年了,作为一个前端开发攻城狮,还不知道vscode有点过分了哈。下面直接进入主题:

Settings Sync

配置同步,一切皆可同步。多台电脑使用vscode时,可将它们的配置同步,包括代码片段,总之非常强大,装就是了。

Ayu

本人一直在用的一款主题,内涵三种颜色,当然,审美这个东西,仁者见仁,不喜欢这个也可试试排名第一的One Dark Pro。

Chinese (Simplified) Language Pack for Visual Studio Code

适用于 VS Code 的中文(简体)语言包,现在vscode将语言包独立出来了,这样就可以安装不同语言包轻松适配各种语言了。

Code Runner

看名字就知道是用来运行代码的,可以支持很多种语言,安装以后右上角有个三角形的图标,点击一下就可以运行当前编辑的文件。

ES7 React/Redux/GraphQL/React-Native snippets

其实就是一些代码片段,方便快捷输入,支持ts、tsx、js、jsx文件,之前用过JavaScript (ES6) code snippets,后来发现这个内容更多,所以换成这个了。

ESLint

这个应该不用我多说了,代码检查、自动修复,现在TS也停止TSLint而转投ESLint了,更加强大了。

GitLens — Git supercharged

强大的git插件,很多便利性的功能,用git的必装插件。

HTML CSS Support

会扫描项目中或指定的css文件,然后在你写html、vue或者其他支持的语言的时候给与提示,还有个IntelliSense for CSS class names in HTML插件,也是类似功能,装一个就可以了,不过似乎HTML CSS Support更快一点。

jQuery Code Snippets

使用jquery的同学可以安装下这个,输入jq就会出现对应的语法提示。

koroFileHeader

文件头部信息生成用的,可以自定义配置。

Live Sass Compiler

使用sass的可以试试,当然如果你的开发都是使用构建工具,那就不用安装个了。 安装好后,点击右下角

图标,就会监听sass文件,有改动会自动进行编译。

Live Server

为静态和动态页面启动具有动态重新加载功能的本地开发服务器,点击右下角的

图标即可开启或关闭。

minapp

微信小程序标签、属性的智能补全(同时支持原生小程序、mpvue 和 wepy 框架,并提供 snippets),如果使用vscode开发小程序,那么这个插件应该是最好的。

Path Intellisense

资源路径自动补全,其实vscode已经内置了此功能,这个插件算是一个补充吧,更强大一点。

Prettier - Code formatter

非常流行的代码格式化工具,可以和eslint完没结合,类似的插件还有Beautify,安装其中一个就好。

Project Manager

可以保存多个项目,可以非常方便在多个项目间切换。

Vetur

开发vue必备,支持vue代码高亮、语法提示、格式化。

Visual Studio IntelliCode

微软爸爸官方出品的AI辅助开发工具,话说是基于 GitHub 上的数千个开源项目进行分析,给与你最适合的智能提示,感觉很强大的样子。

vscode-icons

文件(夹)图标,什么文件一目了然。

Vue 2 Snippets

基于最新的 Vue 2 的 API 代码片段。

配置

最后贴上一份vscode配置:

// 将设置放入此文件中以覆盖默认设置
{
    // 编辑器
    "editor.find.autoFindInSelection": true,
    "editor.formatOnType": true,
    "editor.lineHeight": 24,
    "editor.renderWhitespace": "selection",
    "editor.renderControlCharacters": false,
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.tabSize": 2,
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    },
    "editor.renderLineHighlight": "all",
    "editor.showFoldingControls": "always",
    "editor.smoothScrolling": true,
    "editor.snippetSuggestions": "top",
    "editor.wordWrap": "on",
    "editor.wordWrapColumn": 100,
    "editor.suggestSelection": "first",
    "editor.maxTokenizationLineLength": 50000,
    "workbench.startupEditor": "none",
    "workbench.settings.editor": "json",
    "workbench.settings.openDefaultSettings": true,
    "workbench.settings.useSplitJSON": true,
    "workbench.colorTheme": "Ayu Mirage Bordered",
    "workbench.iconTheme": "vscode-icons",
    //窗口
    "window.title": "${dirty}${activeEditorShort}${separator}${activeEditorMedium}${separator}${appName}",
    "window.titleBarStyle": "custom",
    //文件
    "files.associations": {
        "*.wxml": "wxml",
        "*.wxss": "css",
        "*.cjson": "jsonc",
        "*.wxs": "javascript",
        "*.art": "vue-html",
        "*.ftl": "html",
        "*.pug": "jade"
    },
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/panos": true
    },
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": true,
    "files.watcherExclude": {
        "**/.git/objects/**": true,
        "**/.git/subtree-cache/**": true,
        "**/node_modules/*/**": true,
        "**/panos/*/**": true
    },
    // 文件资源管理器
    "explorer.autoReveal": false,
    "explorer.openEditors.visible": 0,

    // 搜索
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/panos": true,
        "**/dist": true
    },
    "search.followSymlinks": false,
    //PHP
    "php.validate.executablePath": "D:/development/phpEnv/php/php-72/php.exe",
    // css
    "css.lint.duplicateProperties": "warning",
    "css.lint.zeroUnits": "warning",
    // less
    "less.lint.duplicateProperties": "warning",
    "less.lint.zeroUnits": "warning",
    // scss
    "scss.lint.duplicateProperties": "warning",
    "scss.lint.zeroUnits": "warning",
    // 扩展
    "extensions.ignoreRecommendations": true,
    "extensions.showRecommendationsOnlyOnDemand": true,
    // 终端
    "terminal.integrated.shell.windows": "C:\\Program Files\\PowerShell\\7-preview\\pwsh.exe",
    //集成终端
    // "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
    // 问题预览
    "problems.decorations.enabled": false,
    // 导航路径
    "breadcrumbs.filePath": "last",
    //Emmet
    "emmet.excludeLanguages": [
        "markdown",
        "php",
        // "javascript",
        // "javascriptreact",
        "json",
        "jsonc"
    ],
    "emmet.includeLanguages": {
        "vue": "html",
        "vue-html": "html",
        "wxml": "html"
    },
    "emmet.syntaxProfiles": {
        "vue": [
            "html",
            "css",
            "less"
        ],
        "xml": "html"
    },
    "emmet.triggerExpansionOnTab": true,
    //prettier
    "prettier.printWidth": 100,
    "prettier.semi": true,
    "prettier.singleQuote": true,
    // PHP interlliSense
    // "php.executablePath": "D:/development/phpEnv/php/php-73/php.exe",
    //code run
    "code-runner.showRunCommandInEditorContextMenu": false,
    "code-runner.defaultLanguage": "javascript",
    // php-cs-fixer
    // "php-cs-fixer.executablePath": "D:/development/phpEnv/php/php-73/php-cs-fixer-v2.phar",
    // "php-cs-fixer.executablePathWindows": "D:/development/phpEnv/php/php-73/php-cs-fixer-v2.phar",
    // "php-cs-fixer.onsave": true,
    //fileheader
    "fileheader.customMade": {
        "Author": "", //你自己的名字
        "Github": "", //你自己的地址
        "Date":"Do not edit",
        "LastEditors":"",
        "LastEditTime":"Do not edit"
    },
    "fileheader.configObj": {
        "autoAdd": false,
        "prohibitAutoAdd": [
            "json",
            "html",
            "vue"
        ]
    },
    //path-intellisense
    "path-intellisense.extensionOnImport": true,
    //gitlens
    "gitlens.codeLens.enabled": false,
    "gitlens.views.repositories.location": "scm",
    "gitlens.views.lineHistory.location": "scm",
    "gitlens.views.fileHistory.enabled": false,
    "gitlens.views.lineHistory.enabled": false,
    "gitlens.views.search.location": "scm",
    "gitlens.views.compare.enabled": false,
    "gitlens.menus": {
        "editor": {
            "blame": false,
            "clipboard": false,
            "compare": false,
            "details": false,
            "history": false,
            "remote": false
        },
        "editorGroup": {
            "blame": true,
            "compare": true,
            "history": true,
            "remote": true
        },
        "editorTab": {
            "compare": false,
            "history": false,
            "remote": false
        },
        "explorer": {
            "compare": false,
            "history": false,
            "remote": false
        }
    },
    //vutur
    "vetur.validation.template": true,
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "auto"
        },
        "prettyhtml": {
            "printWidth": 300,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": true,
            "semi": true
        }
    },
    // git
    "git.path": "D:/Program Files/Git/bin/git.exe",
    "git.enableSmartCommit": true,
    //同步 sync-setting
    "sync.gist": "", //你自己的gist
    "sync.quietSync": false,
    "sync.removeExtensions": true,
    "sync.syncExtensions": true,
    "sync.autoDownload": false,
    "sync.autoUpload": false,
    "sync.forceDownload": false,
    "sync.forceUpload": true,
    //vsicons
    // liveServer
    "liveServer.settings.donotShowInfoMsg": true,
    "liveServer.settings.donotVerifyTags": true,
    "liveServer.settings.port": 0,
    // minapp
    "minapp-vscode.disableAutoConfig": true,
    //css settings
    "css.fileExtensions": [
        "css",
        "scss",
        "less"
    ],
    //ESlint
    "eslint.options": {
        "root":true,
        // "parser": "@typescript-eslint/parser",
        "plugins": [
            // "prettier",
            // "@typescript-eslint"
        ],
        "env": {
            "browser": true,
            "es6": true,
            "node": true
        },
        "extends": [
            "eslint:recommended",
            "plugin:@typescript-eslint/recommended",
            "plugin:prettier/recommended",
            "plugin:vue/essential",
        ],
        "rules": {
            "camelcase": 1,
            "curly": 0,
            "brace-style": [ 0, "1tbs" ],
            "quotes": [ 1, "single" ],
            "semi": [ 1, "always" ],
            "space-infix-ops": 1,
            "no-useless-escape": 1,
            "one-var": 0,
            "no-extend-native": 1,
            "no-unused-vars": 1,
            "eqeqeq": 1,
            "object-curly-spacing":[1,"always"],
            "standard/object-curly-even-spacing": 0,
            "func-call-spacing": 1,
            "no-unneeded-ternary": 1,
            "operator-assignment": 1,
            "arrow-spacing": 1,
            "space-before-function-paren": 0,
            "no-var": 0,
            "object-shorthand": 0,
            "x-invalid-end-tag": 0,
            "comma-dangle": 1,
            "space-before-blocks": 1,
            "key-spacing": 1,
            "no-irregular-whitespace": 1,
            "vue/valid-v-for": 0,
            "prettier/prettier": [0, {
                "singleQuote": true,
                "trailingComma": "none",
                "bracketSpacing": true,
                "jsxBracketSameLine": true,
                "key-spacing": false
            }],
        },
        "exclude": [
            "/node_modules/*/**",
            "/ignore_lib/*/**"
        ],
        "parserOptions": {
            "parser": "babel-eslint",
            "ecmaVersion": 2019,
            "sourceType": "module",
            "ecmaFeatures":{
                "jsx": true
            }
        }
    },

    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "typescript",
            "autoFix": true
        },{
            "language": "typescriptreact",
            "autoFix": true
        }
    ],
    "liveSassCompile.settings.generateMap": false,
    "liveSassCompile.settings.showOutputWindow": false,
    "liveSassCompile.settings.formats": [{
        "format": "compressed",
        "extensionName": ".css",
        "savePath": "~/../css/"
    }],
    "liveSassCompile.settings.autoprefix": [
        "> 1%",
        "not ie <= 8",
        "last 2 versions"
    ],
    "liveSassCompile.settings.excludeList": [
        "**/node_modules/**",
        ".vscode/**",
        "**/doc/**",
        "**/bower/**",
        "**/*.scss"
    ],
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "vsicons.dontShowNewVersionMessage": true,
    "javascript.implicitProjectConfig.experimentalDecorators": true

}