vs code那些好用的插件 && eslint配置一款优秀的编译器搭配好用的插件可以让我们在开发中事半功倍，整理了一些

个人比较喜欢使用vs code，配置好的插件能在开发中事半功倍。

安装插件也十分简单

vetur & ESLint

ESLint代码检测，大部分前端项目都加了ESLint校验。安装vetur插件，然后在vs code进行配置。

然后加入自己需要的配置

下面是我的文件（可能存在一些需要修改的位置）

{
    "fileheader.customMade": {
    "Author": "juanjuan",
    "Date": "Do not edit",
    "LastEditors": "juanjuan",
    "LastEditTime": "Do not edit",
    "Description": "",
    "$emit": "" ,
    "$slot": ""
    },
    "fileheader.configObj": {
      "autoAdd": false,
    },
    "files.autoSave": "off",
    "prettier.semi": false,
    //为了符合eslint的两个空格间隔原则
    "editor.tabSize": 2,
    "git.path": "/usr/bin/git.exec",
    "git.ignoreMissingGitWarning": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "vetur.format.options.useTabs": true,
    "vetur.validation.template": true,
    "file_peek.activeLanguages": [
      "typescript",
      "javascript",
      "python",
      "vue" // 添加vue支持
    ],
    "file_peek.searchFileExtensions": [
      ".js",
      ".ts",
      ".html",
      ".css",
      ".scss",
      ".vue" // 添加vue支持
    ],
    "deepscan.enable": true,
    "deepscan.ignoreRules": [
      "UNUSED_DECL"
    ],
    "window.zoomLevel": 0,
    "editor.detectIndentation": false,
    "vetur.format.defaultFormatterOptions": {
      "prettier": {
        "semi": false,
        "singleQuote": true
      }
    },
    "editor.renderWhitespace": "all",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "[javascript]": {
      "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "files.associations": {
    
    },
    "workbench.iconTheme": "material-icon-theme",
    "git.confirmSync": false,
    "editor.fontLigatures": null,
    "editor.fontSize": 20,
    "i18n-ally.annotationInPlace": false,
    "i18n-ally.displayLanguage": "zh",
    "i18n-ally.localesPaths": [
      "src/lang"
    ],
    "i18n-ally.enabledParsers": [
      "js",
      "ts"
    ],
    "editor.formatOnSave": false,
    "eslint.codeAction.showDocumentation": {
      "enable": true
    },
}

GitLens — Git supercharged

查看git提交历史

koroFileHeader

在vscode中用于生成文件头部注释和函数注释的插件，但是这个插件可能会导致提交代码时和其他人产生冲突，而冲突大多数情况下是上次提交人的冲突，这可能算是一个缺点

 "fileheader.customMade": {
    "Author": "juanjuan",
    "Date": "Do not edit",
    "LastEditors": "juanjuan",
    "LastEditTime": "Do not edit",
    "Description": "",
    "$emit": "" ,
    "$slot": ""
    },

DeepScan

代码质量和bug检查工具，支持JavaScript，Typescript，React 和 Vuejs

SonarLint

代码质量和bug检查工具，支持JavaScript，Typescript， PHP 和 Python，作为DeepScan的补充

Code Spell Checker

检查单词是否拼写错误

Debugger for Chrome(*)

用在VS中用来调试JS代码

Turbo Console Log

快速生成和删除console.log ，方便调试

File Peek

可以在vue文件中跳转到引入的文件路径，以及查看定义位置。

在 settings.json 文件中配置如下：

"file_peek.activeLanguages": [
        "typescript",
        "javascript",
        "vue" // 添加vue支持
    ],
    "file_peek.searchFileExtensions": [
        ".js",
        ".html",
        ".css",
        ".scss",
        ".vue" // 添加vue支持
     ]