VSCode如何与ESLint和prettier结合使用

前言：作为一名前端开发者，在大多数的情况下，我们都需要和vscode编辑器打交道，因此熟悉vscode对于我们而言是一件很重要的事情，前两天我发现自己始终没有很清楚关于如何使我们的编辑器能够很好的自动格式化代码相关的问题，今天我写这篇博客，就是想好好记录一下，相关的问题。

---

首先先了解第一个问题，如何配置vscode的默认配置。
注意：以下效果均保证自己的vscode编辑器没有任何关于格式化的第三方插件的情况下才可以生效哦。

mac : command + shift + p
windows : ctrl + shift + p

通过以上命令可以打开vscode的首选项

这里有三个文件，分别是

工作区设置	默认设置	设置
放在当前项目中	不可编辑的vscode默认配置	全局有效

说明：在这个几个配置中，默认设置是不可编辑的，只能看的，这个文件只能作为开发者观看的配置，在全局设置中没有配置任何内容时，走的就是这个配置，这个就很像我们在写css的时候，实际上任何元素都有它的默认样式，我们写的所有css实际上就是在覆盖哪些默认样式一样。

工作区的settings.json的配置和全局的配置写法上是一样的，只是工作区的settings.json放在当前项目下.vscode的文件夹中，只对当前项目有效，并且优先级高于全局的settings.json。因此我们可以简单的总结一下他们的关系。

工作区 > 全局 > 默认

接下来我么的目的是为了让我们写的代码自动格式化，需要做两件事情。第一，开启那个自动格式化的开关，第二，指定按照那种格式进行格式化。
注意：要求安装vetur插件

{
  "tabnine.experimentalAutoImports": true,
  "editor.detectIndentation": false,
  "workbench.colorTheme": "Default High Contrast",
  "editor.tabSize": 2,
  "editor.formatOnSave": true, // 这就是那个开关
  // 下面的内容都是按照那种方式进行格式化
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    }
  }
}

现在大家可以去试一试，你写的js,html,vue,json文件已经可以在保存的时候进行自动格式化了，在个人写一下小Demo的时候其实就可以很好的服务于我们了，这个时候，我们是借助vscode本来就有的能力进行自动保存格式化的。

我们已经达到目的了。

可是我们真的达到目的了么？

前端开发的过程更多的是进行团队合作，如果每个人都有属于自己的一套风格的话，那就比较糟糕了，这样就会造成代码风格不统一，在合并代码时更容易产生一些不必要的冲突，因此我们有必要为团队项目制定一套统一的规则。

接下来我们的 ESLint prettier插件就可以装起来了，在装ESLint时我们的全局样式还是可以生效的，但是在装prettier的时候因为prettier是一款可以帮助我们自动格式化代码的插件，装完之后就会立马生效，你的全局settings.json就会被覆盖掉。

简单来讲。ESLint为我们提供一系列规则，而prettier可以帮助我们按照这些规则来进行格式化。从而达到我们的团队合作开发使用统一的规则和风格的目的。

如何做：
推荐阅读一篇文章这里会有更为详细的使用，不过这里也会一一讲解。

目前我们的vscode插件库里面已经有vetur , eslint , prettier等插件了，并且全局的settings.json的某一部分已经不生效了(被prettier覆盖了)。因此我们首先需要修改一下全局settings.json的内容

    // eslint配置项，保存时自动修复
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    // 默认使用prettier格式化支持的文件
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    // 自动设定eslint工作区
    "eslint.workingDirectories": [
        { "mode": "auto" }
    ],

这里的意思主要是指定按照eslint的语法来进行格式化。
因为我们的ESlint也是需要根据我们项目中配置的文件来进行规则的设定的，因此我们需要安装一些依赖。

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier --dev

安装完成之后，在项目中创建一个.eslintrc.js的文件，填入以下内容。

module.exports = {
  parser: "@typescript-eslint/parser", // 指定ESLint解析器
  parserOptions: {
    sourceType: "module", // 允许使用导入
  },
  extends: [
    "plugin:@typescript-eslint/recommended", // 使用@ typescript-eslint / eslint-plugin中的推荐规则
    "prettier/@typescript-eslint", // 使用eslint-config-prettier禁用一些与Prettier冲突的ESLint规则
    "plugin:prettier/recommended" // 启用eslint-plugin-prettier和eslint-config-prettier，使编辑器显示错误提示，确保这项是扩展数组中的最后一个配置
  ],
  rules: {
    // 放置ESLint规则的位置。可用于覆盖从扩展配置中指定的规则
    // 例如 "@typescript-eslint/explicit-function-return-type": "off",
  },
};

这步是可选的，如果pretter的默认配置你觉得用着蛋疼，那么你可以在项目根目录下新建.prettierrc修改它的配置，下面列举一些常用设置，全部为默认选项，请按需修改

{
  "printWidth": 80, //限制每行字符个数
  "tabWidth": 2, //指定每个缩进级别的空格数
  "useTabs": false, //使用制表符而不是空格缩进
  "semi": true, //在语句末尾打印分号
  "singleQuote": false, //使用单引号而不是双引号
  "trailingComma": "es5", //多行时尽可能打印尾随逗号
  "bracketSpacing": true, //在对象文字中的括号之间打印空格
  "arrowParens": "always", //始终给箭头函数的参数加括号
  "htmlWhitespaceSensitivity": "css", //指定HTML文件的全局空格敏感度
  "endOfLine": "lf" //检测换行符类型，如果出现大量换行符报错，可以修改为auto不检测
}

根据上面的操作之后，当你只要在写代码时，eslint就已经在工作了，他会一直指导你，直到你写出正确的格式，在保存时，会自动的帮你去修复，是不是很好呢？

以上遍已经完成了vscode和eslint的结合使用，希望对你有帮助。