彻底搞懂ESLint与Prettier在vscode中的代码自动格式化

前语

前端代码格局化社区供给了两种比较常用的东西ESLint和Prettier，他们别离供给了对应的vscode的插件，二者在代码格局化方面有堆叠的部分，规矩不一致时会导致抵触。vscode作为前端开发修改器现已越来越遍及了，这需求开发者在vscode对他们的运用有必定的了解，掌握其间的原理对提升开发功率保证代码质量方面会有很大的协助，俗语中的工欲善其事必先利其器、磨刀不误砍柴工都是相似的道理。

ESLint介绍

ESLint的效果

ESLint的详细的用法以及原理等不在本文的介绍范围，可自行查询资料。

ESLint的效果应该大家都知道，它是一个查看代码质量与风格的东西，装备一套规矩，就能查看出你代码中不符合规矩的当地，部分问题支持主动修正；总结起来就两个功用：

• 代码质量查看

  能够发现代码中存在的可能过错，如运用未声明变量、声明而未运用的变量、修改 const 变量、代码中运用debugger等等

• 代码格局化

  能够用来一致团队的代码风格，比方加不加分号、运用 tab 还是空格、字符串运用单引号 等等

如何在vscode中启用ESLint

vscode运用ESLint进行代码查看的条件：

• 首先，需求在vscode中装置ESLint插件并启用，一同需求在vscode装备中敞开eslint的查看。

  详细敞开在用户级别的setting或许项目级别的settings.json中进行如下设置：

  {
      "eslint.enable": true, // 敞开eslint查看
   }
  

• 其次，需求在当前项目根目录或许全局装置eslint，别的eslint的规矩装备项中的依靠也需求装置。

  若没有装置，则在vsconde的eslint控制台输出如下过错：

  

• 最终，需求在项目根目录有装备文件.eslintrc.js或许.eslintrc.json，或许在根项目的package.json中装备项eslintConfig中装备eslint的规矩。

  若没有任何装备文件，则eslint控制台会输出如下过错：

  

上面三个步骤缺一不可，都装备完后咱们在vscode修改中就能看到代码被eslint查看的成果，js代码成果相似如下图所示：

eslint根据设置值的规矩查看两个问题：红色波涛线提示变量定义但未运用；黄色波涛线提示字符串有必要运用单引号。对于这些过错，vscode修改器将eslint的查看成果仅展现给开发者。

其实，vscode能够用eslint在文件保存时对部分的问题代码进行主动修正，如上图中的黄色波涛线部分，这需求在vscode装备eslint进行文件保存时主动格局化代码，详细是经过vscode的codeActionsOnSave.source.fixAll来设置，详情如下:

{
    "eslint.enable": true, // 敞开eslint查看
    "editor.codeActionsOnSave": {
        // 运用eslint来fix，包含格局化会主动fix和代码质量查看会给出过错提示
        "source.fixAll.eslint": true
      }
}

修改后再次保存代码，部分不符合规矩的代码主动格局化了，如下图所示：

顺便提示下：

若设置codeActionsOnSave.source.fixAll: true，表示运用所有供给的代码格局东西进行代码格局化，包含eslint，猛戳这儿

Prettier介绍

Prettier的效果

Prettier的效果是对代码进行格局化，并不重视代码质量潜在问题的查看。

Prettier本身的标准倾向于团队的代码风格的标准或一致，例如每行最大长度，单引号还是双引号，等号左右空格，运用tab还是空格等等。

除了js/ts外，它还支持对多种言语进行格局化，如vue、html、css、less、scss、json、jsx等等，是一个比较归纳的代码格局化东西。

有了ESLint为啥还要用Prettier

介绍ESLint时说到它也有代码格局化的功用，为啥还需求用Prettier，引证这篇文章介绍了几个点：

• ESLint 装置和装备比较费事，而且 lint 的速度并不快
• Prettier 并不只针对 JavaScript，它能够格局化各种盛行言语
• Prettier 的装备选项没那么眼花缭乱，比 ESLint 少很多，这在Prettier选项的哲学中说明精简的原因。

如何在vscode启用Prettier

在vscode中启用Prettier相对来说比较简单，并不需求在当前项目中装置Prettier，只需：

在vscode中装置Prettier插件并启用，一同需求设置Prettier为对应的代码默许格局化，或许将其设置为指定言语的代码格局化。

在用户级别的settings.json中设置修改器的默许代码格局化器：

{
   "editor.defaultFormatter": "esbenp.prettier-vscode"
}

或许为指定语音设置默许格局化器：

{
   "[javascript]" {
       "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
}

上面虽然在vscode启用了Prettier，可是并没有在保存文件时进行代码格局化，要想实现主动保存代码进行代码格局化，需求：

• vscode敞开代码保存时进行格局化
• 将Prettier作为默许的格局化东西，或许将Prettier设置为指定言语的格局化器
• 是否设置需求Prettier的装备文件（.prettierrc或.editorconfig），有两种状况：

  • 若装备"prettier.requireConfig": true则要求根目录下有Prettier的装备文件，它会覆盖Prettier扩展中的默许装备，如下图所示；不然保存时不会主动格局化。能够参阅这儿。

    

  • 若装备"prettier.requireConfig": false则不要求根目录下有装备文件，若有的话也会被感知到并以装备文件的内容为准，如下图是没有装备文件时的提示信息：

    

上面三个步骤的在vscode中的装备体现如下：

{
  "editor.formatOnSave": true, // 敞开保存文件主动格局化代码
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 默许的代码格局化东西
  "prettier.requireConfig": true // 需求Prettier的装备文件
}

再烦琐一句：若设置需求装备文件，则有必要要求根目录下有装备文件.prettierrc或.editorconfig中的一个或许两个一同存在，不然代码保存不会进行格局化。

可能你会对上面.editorconfig文件作为Prettier的装备文件感到疑惑，vscode的Prettier插件中有关装备文件有这样的一段描绘，如下图：

能够看出Prettier插件获取装备文件有一个优先级：.prettierrc > .editorconfig > vscode默许装备。

上面的前两者并不是说.prettierrc和.editorconfig一同存在时，后者的装备内容就被疏忽，实际的体现：

.prettierrc和.editorconfig一同存在时，二者内容会进行兼并，若装备项有抵触，这.prettierrc的优先级更高。

ESLint与Prettier的抵触

抵触的原因

ESLint和Prettier都能够进行代码格局化方面，若二者一同呈现下面的状况就会呈现抵触：

• 堆叠的格局化规矩不一致，二者堆叠的装备规矩能够参阅这儿。
• vscode一同敞开二者进行格局化

  {
      "editor.formatOnSave": true,
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "prettier.requireConfig": true,
      "eslint.enable": true, // eslint敞开
      "editor.codeActionsOnSave": {
         "source.fixAll.eslint": true // 代码保存运用eslint格局化
       }
  }
  

满足上面的条件就会呈现抵触，借鉴这篇文章的一幅图来展现：

例如当前的项目中ESLint运用array-bracket-newline装备数组项不需求换行，而Prettier对其默许是按换行进行格局化，那么该规矩就呈现抵触，在文件保存年代其体现下图：

能够看出文件保存后代码格局化时会呈现闪缩的效果，这是由于二者都对代码进行了格局化，可是终究成果取决是谁最终一个进行格局化，从上图成果来看是Prettier是最终履行，它的格局化的成果为终究输出成果，原因：

Prettier的格局化耗时 > ESLint的格局化耗时

终究以Prettier的格局化成果来输出，可是这就与ESLint的规矩抵触，vscode修改器就会将ESLint成果给展现出来。

以和为贵：ESLint与Prettier和谐同处

鉴于Prettier在代码格局化方面的好坏:

• 优势：能够对多种言语进行代码格局化，不仅仅是javascript
• 劣势：不具备代码质量查看的才能

所以最佳计划是整合二者，取各方之长。但上一节分析了两者一同存在时抵触的原因，那么在二者共存的状况下处理思路就比较明确了，有两种计划：

• 二者堆叠的格局化规矩保持一致
• 二者一同效果的言语运用其间一种进行格局化

下面别离对这两种计划进行介绍。

二者堆叠的格局化规矩保持一致

前面说到，二者之所以呈现抵触的条件之一是一同在vscode中敞开:

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.requireConfig": true,
    "eslint.enable": true,
    "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     }
}

那么要搞清楚二者堆叠的规矩有哪些？堆叠的规矩有哪些是抵触的呢？好在社区有了答案能够参阅这儿，针对这种状况也给出了比较好的处理计划，详细来说：

在运用ESLint作为代码的格局化东西时，封闭可能与Prettier有抵触的格局化规矩，把Prettier作为一个linter规矩。

主要是运用下面两个包：

• eslint-config-prettier 会封闭ESLint中有关代码格局化的装备，详细参阅这儿。

• eslint-plugin-prettier 把Prettier装备成ESLint的一个插件，让其作为一个linter规矩来运转，可参阅其官网。

留意：eslint-plugin-prettier需求项目装置Prettier依靠

这样，只需在项目根目录下的.eslintrc.js中装备如下：

{
  "extends": ["plugin:prettier/recommended"]
}

而plugin:prettier/recommended帮咱们做了如下工作：

{
  "extends": ["prettier"], // 运用eslinst-config-prettier中的装备项
  "plugins": ["prettier"], // 注册该prettier插件
  "rules": {
    "prettier/prettier": "error", // 在eslint中运转prettier，并启用该插件供给的规矩
    "arrow-body-style": "off", // 封闭规矩
    "prefer-arrow-callback": "off" // 封闭规矩
  }
}

这样装备后，ESLint进行格局化时就会疏忽跟Prettier堆叠的格局规矩，这些交由Prettier来进行格局化，这样二者能够愉快地一同分工协作了。

二者一同效果的言语运用其间一种进行格局化

计划一让二者协同工作的思路在ESLint中封闭跟Prettier可能存在抵触的规矩，可是并没有避免二者一同格局化，也便是说实际上二者都参加了代码的格局化，只是输出内容一致而已。

能够从vscode的用户settings.json装备文件能够看出：

"editor.formatOnSave": true和"editor.defaultFormatter": "esbenp.prettier-vscode"装备，告知vscode在文件保存时都运用默许的Prettier来对代码格局化。

而editor.codeActionsOnSave.source.fixAll.eslint: true设置代码保存时运用ESLint来进行格局化。

由于计划一本质上履行了两次代码格局化，所以咱们能够有另一种考虑：只运用二者中的一个进行代码格局化。

咱们知道，ESLint只对javascript、typescript以及javascrpitreact进行代码格局化，而对其他言语则无效，而Prettier是能够的，所以针对二者一同效果的言语，咱们能够封闭文件保存时主动格局化，也便是封闭Prettier作为代码格局化东西，如下装备：

{
    "editor.formatOnSave": true, 
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    //针对共用的言语如JS、TS和JSX封闭文件保存主动格局化功用，经过eslint来做这件事 
    "[javascript]": { 
        "editor.formatOnSave": false 
    }, 
    "[javascriptreact]": {
        "editor.formatOnSave": false
    },
    "[typescript]": {
        "editor.formatOnSave": false
    },
    "editor.codeActionsOnSave": { //告知ESLint插件在保存时运转 
        "source.fixAll.eslint": true 
    }
}

这样，在js、ts或许jsx的文件保存时，不会调用Prettier进行格局化，而是交由ESLint来完结，除此之前的言语则是运用Prettier来进行代码格局化。

补充：editor.formatOnSave vs editor.codeActionsOnSave

ESLint和Prettier存在抵触的一个原因，也在于vscode对文件保存时的装备操作有重合的当地，体现在formatOnSave和codeActionsOnSave上，二者都能够实现文件保存时格局代码，有重合的当地，对称有人在vscode社区提出是否能够删去一个：Merge/remove “editor.formatOnSave” and “editor.codeActionsOnSave->”source.fixAll””。

vscode并没有采用删去或许兼并的主张，其供给这两个的装备，其出发点是不一样的，下面是社区的一段描绘：

But the main difference betweencodeActionsOnSaveandformatOnSaveremains that:

• the latter (formatOnSave) only formats code,
• while the former (codeActionsOnSave) can run one or several commands on the code, commands which might not be related to formatting.

The followingeditor.codeActionsOnSavewill always runOrganize Importsfollowed byFix Allonce organize imports finishes:

"editor.codeActionsOnSave": [
    "source.organizeImports",
    "source.fixAll"
]

参阅:

vscode eslint装备

vscode装备eslint主动保存功用不收效

认识 ESLint 和 Prettier

详解VSCode 格局化不符合预期的问题

用Prettier和ESLint主动格局化修正JavaScript代码