vscode 中使用 prettier 格式化代码和 eslint 校验语法

发表于 2021-10-08 更新于 2024-03-06 分类于 Software ， VSCode 本文字数： 2.6k 阅读时长 ≈ 2 分钟

本文主要针对 ESLint 和 Prettier 的使用进行总结，通读本文，你将理解：

ESLint 和 Prettier 是什么?
为什么在进行 Javascript 编码时，要使用它们？
在 vscode 中怎么使用它们？

关于学习 ESLint 与 Prettier

看到某些up,文章把 ESLint、Prettier 写得很复杂，有的还不全面，导致入门者在网上学得云里雾里的，然后就觉得这个好难。

这两个东西其实很简单，这就娓娓道来。等读完此篇文章后，建议在使用中根据需求再去阅读官方文档，不要去看别人的各种总结，因为大部分总结都很片面。看个一两篇入门是可以。

ESLint 是什么

是一个开源的 JavaScript 的 linting 工具，使用 espree 将 JavaScript 代码解析成抽象语法树 (AST)，然后通过AST 来分析我们代码，从而给予我们两种提示：

代码质量问题：使用方式有可能有问题(problematic patterns)
代码风格问题：风格不符合一定规则 (doesn’t adhere to certain style guidelines)

简单来说，ESLint 对代码的语法和格式按照规则进行检测，并提示和自动修正。

Prettier 是什么

ESLint 主要解决的是代码质量问题，但是对于代码风格（一般使用 Airbnb JavaScript 风格指南），ESLint 未完全实现。所以此时，就会使用 Prettier 进行补充。

简单来说，Prettier 只对代码的格式 进行检查和修正，用来补充 ESLint 对代码格式规范的不足。

怎么使用

为什么 vscode 中要安装插件

上述两个工具都是通过安装的 Eslint 和 Prettier 这两个包来实现代码检查和格式化的。在我们使用 vscode 进行编码的时候， vscode 需要安装 EsLit 和 Prettier 这两个插件，监听 vscode 的操作事件(比如保存事件)，然后对代码按包中的规则来进行处理。

如何配置

推荐在项目中增加配置文件来配置 vscode、 Eslint 和 Prettier，这样，配置可以共享给其它成员，也不会影响另外的项目开发。

配置文件（相对于项目根目录）	作用
.vscode/settings.json	vscode 在当前项目中的配置文件
.eslintrc.js	eslint 配置文件
.prettierrc	prettier 配置文件，更多文件格式参考 Configuration File · Prettier

由于 prettier 与 eslint 之间有些配置不能完全兼容，在使用的时候，很难配置，因此，原作者推荐使用 Prettier-Eslint 插件，方便用户配置和使用。

下面讲如何使用 Prettier-ESLint 插件

Prettier-ESLint 使用

插件安装

vscode 中安装 Prettier-ESLint、和 Eslint 插件

npm 包安装

一般 js 项目：

1	yarn add -D prettier eslint

TypeScript 项目：

1	yarn add -D prettier eslint @typescript-eslint/parser typescript

Vue 项目：

1	yarn add -D prettier eslint vue-eslint-parser

项目设置

找到项目目录下的 .vscode/settings.json 文件，添加如下内容：

{
  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
  "editor.formatOnPaste": false, // required 
  "editor.formatOnType": false, // required
  // 关闭VSCode在Save时候自动格式化，因为VSCode自带的格式化和ESlint规范并不兼容
  "editor.formatOnSave": false, // optional 
  // 函数名后添加空格，与 eslint 规范兼容
  // 在代码开发时，可以使用 shift+alt+f 来格式化代码
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "files.autoSave": "onFocusChange", // optional but recommended
  // set as "true" to run 'prettier' last not first
  "vs-code-prettier-eslint.prettierLast": false,
  // 在保存时，自动根据 eslint 来修复格式问题
  "editor.codeActionsOnSave": [
    "source.fixAll.eslint"
  ]
}

更多设置参考：Visual Studio Code Default Settings

参考

本文参考以下文章，在此致以诚挚谢意！