ESLint와 Prettier가 vscode에서 자동 코드 서식 지정을 수행하는 방법에 대해 이야기해 보겠습니다.

프런트 엔드 코드 형식화 커뮤니티에서는 일반적으로 사용되는 두 가지 도구인 ESLint와 Prettier를 제공하며, 둘 다 각각 코드 형식으로 되어 있습니다. 문화적으로 겹치는 부분이 있고, 규칙이 일치하지 않으면 갈등이 발생하게 됩니다. 프런트 엔드 개발 편집기로서 vscode는 점점 더 보편화되었습니다. 이를 위해서는 개발자가 vscode에서의 사용에 대해 어느 정도 이해해야 합니다. 원칙을 익히는 것은 개발 효율성을 높이고 코드 품질을 보장하는 데 큰 도움이 될 것입니다. 일꾼이 일을 잘하려면 먼저 도구를 갈아야 한다, 칼을 갈고 장작을 다진다는 것도 비슷한 원리이다. [추천 학습: vscode 튜토리얼ESLint和Prettier，他们分别提供了对应的vscode的插件，二者在代码格式化方面有重叠的部分，规则不一致时会导致冲突。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 소개

ESLint의 역할

ESLint의 구체적인 사용법과 원칙은 이 기사의 범위를 벗어납니다. .정보를 직접 확인해보세요. 🎜🎜ESLint🎜ESLint의 역할🎜은 모두에게 알려져야 합니다. 코드 품질과 스타일을 확인하는 도구입니다. . Rules🎜 구성 세트가 있으며, 코드에서 해당 위치를 확인할 수 있습니다. 규칙을 준수하지 않습니다. 일부 문제는 자동 복구가 지원됩니다. 요약하자면 두 가지 기능이 있습니다: 🎜

• 🎜코드 품질 검사🎜🎜는 코드에서 가능한 오류를 찾을 수 있습니다. 선언되지 않은 변수 사용, 선언되었지만 사용되지 않는 변수, const 변수 수정, 코드에서 디버거 사용 등 🎜
• 🎜코드 형식🎜🎜은 세미콜론 추가 또는 추가 안함, 사용 등 팀의 코드 스타일을 통일하는 데 사용할 수 있습니다. 탭 또는 공백 em>, 문자열에는 작은따옴표 사용 등 🎜

vscode에서 ESLint를 활성화하는 방법

🎜vscode가 코드 검사에 ESLint를 사용하기 위한 조건: 🎜

• 🎜첫 번째 무엇보다도 vscode code> 플러그인에 ESLint</를 설치하고 활성화해야 하며, <code>vscode 구성에서 eslint 검사를 활성화해야 합니다. 🎜🎜사용자 수준 설정 또는 프로젝트 수준 settings.json에서 다음 설정을 구체적으로 활성화하려면: 🎜

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

• 🎜두 번째로 현재 프로젝트 루트 디렉터리에 또는 전역적으로 eslint를 설치합니다. 또한 eslint 규칙 구성 항목의 종속성도 설치해야 합니다. 🎜🎜설치되어 있지 않으면 vsconde의 eslint 콘솔에 다음 오류가 출력됩니다. 🎜

🎜🎜

• 🎜마지막으로 구성 파일이 필요합니다. 프로젝트 루트 디렉터리 .eslintrc.js 또는 .eslintrc.json의 또는 루트 프로젝트의 <code>에 있는 구성 항목 <code>eslintConfig에서 eslint를 구성합니다. >package.json 규칙. 🎜🎜구성 파일이 없으면 eslint 콘솔은 다음 오류를 출력합니다: 🎜

🎜🎜🎜위의 세 단계는 필수입니다. 모두 구성한 후 vscode에서 편집할 수 있습니다. eslint로 코드를 확인한 결과를 보면 js 코드 결과는 아래 그림과 비슷합니다. 🎜🎜🎜🎜eslint는 값 설정 규칙에 따라 두 가지 문제를 확인합니다. 빨간색 물결선은 변수가 정의되었지만 사용되지 않았음을 나타내고 노란색 물결선은 행은 문자열이 작은따옴표를 사용해야 함을 나타냅니다. 이러한 오류의 경우 vscode 편집기는 eslint 검사 결과를 개발자에게 표시만합니다. 🎜🎜사실 vscode는 eslint를 사용하여 파일을 저장할 때 문제가 있는 일부 코드(예: 위 그림의 노란색 물결선)를 자동으로 복구할 수 있습니다. 이를 위해서는 파일을 저장할 때 eslint가 자동으로 포맷되도록 구성하려면 vscode가 필요합니다. 코드는 vscode의 codeActionsOnSave.source.fixAll을 통해 구체적으로 설정됩니다. 자세한 내용은 다음과 같습니다. 🎜

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

🎜규칙을 준수하지 않는 일부 코드는 다음과 같이 자동으로 포맷됩니다. 아래 그림에 표시됩니다: 🎜🎜🎜🎜참고: 🎜

🎜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社区提出是否可以删除一个："source.fixAll""">Merge/remove "editor.formatOnSave" and "editor.codeActionsOnSave->"source.fixAll""。

vscode并没有采纳删除或者合并的建议，其提供这两个的配置，其出发点是不一样的，下面是社区的一段描述：

But the main difference between codeActionsOnSave and formatOnSave remains 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 following editor.codeActionsOnSave will always run Organize Imports followed by Fix All once organize imports finishes:

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

更多关于VSCode的相关知识，请访问：vscode基础教程！

위 내용은 ESLint와 Prettier가 vscode에서 자동 코드 서식 지정을 수행하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!