在Visual Studio Code中给Vue 或者 React项目设置ESLint和Prettier

一、背景

在代码开发项目中，代码格式提醒以及代码对齐是提高代码编写效率和代码阅读体验的一个规范化要求，所以每个程序员都应该有良好的代码编写习惯，熟练掌握常用代码编辑器的插件配置。

这里我记录一下我在配置Vue项目在Visual Studio Code这个编辑器下的代码插件配置过程，做一下记录，也希望对有需要的同学有所帮助。

二、介绍

web前端项目中重要的2个通用代码插件当属于：

• ESLint （vue eslint官网： https://eslint.vuejs.org/）
  这里贴的是vue官方的eslint配置网址，其他的配置，可在eslint的官方网站上查阅：https://eslint.org/

Official ESLint plugin for Vue.js.

react的eslint插件可以参阅：https://www.npmjs.com/package/eslint-plugin-react

• Prettier （官网： https://prettier.io/）

An opinionated code formatter

从官网的使用说明，其实也可以逐步掌握配置vs code的各项步骤，我这里结合我自己的配置简单说明一下。

三、步骤

3.1 本地node环境下，全局安装eslint

npm install -g eslint

安装了全局的命令后，后续可以使用终端命令生成配置文件。

3.2 vue项目配置package.json

npm install --save-dev eslint eslint-config-prettier eslint-plugin-vue globals typescript-eslint

上面的这条命令，安装了eslint、eslint的prettier插件、eslint的vue插件、typescript的eslint插件。

这个时候，如果vue项目中还没有生成eslint的配置文件，我们可以通过终端命令生成配置文件。
我们可以看一下eslint的终端命令说明：

eslint --help

可以看到截图中有一个命令是可以生成config文件的。

3.3 生成eslint.config.js

执行命令eslint --init可以进行终端会话选择配置

eslint --init

从截图中看到终端会话最后一条“Successfully created /Users/xxxx/eslint.config.js file.”，就是在当前项目的根目录下自动生成了一个eslint.config.js文件。

（注意：红框中的内容是后面配置的）

3.4 配置prettier

1. 先install

npm install --save-dev --save-exact prettier

--save-exact会锁定prettier版本，因为prettier每次的release都可能有不同的针对性。
2. 生成.prettierrc文件
执行node语句：

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

生成的.prettierrc文件是一个只包含大括号{}的文件，我们可以在这个大括号中加入配置：

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": false
}

文件中已经加入了行尾逗号、tab键宽度、顿号、单引号的使用规则，目前是足够的，不够可以按照prettier的文档继续添加。
3. 生成.prettierignore文件
这个文件是代码format的忽略文件，这些文件都不会format。

node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"

Prettier will follow rules specified in .gitignore if it exists in the same directory from which it is run. You can also base your .prettierignore on .eslintignore (if you have one).

这里有提示，就是说该文件也会使用.gitignore这个git忽略文件中的配置，所以这一步你可以省略。

3.5 ESLint和Prettier的配置冲突问题

prettier文档明确说了以下一段话：

If you use ESLint, install eslint-config-prettier to make ESLint and Prettier play nice with each other. It turns off all ESLint rules that are unnecessary or might conflict with Prettier. There’s a similar config for Stylelint: stylelint-config-prettier

意思是，如果你同时安装了ESLint和Prettier，那么要安装eslint-config-prettier这个插件来避免这2个插件的配置冲突。

所以参考：https://github.com/prettier/eslint-config-prettier#installation 这里面的说明，修改一下eslint.config.js中的配置。

【我们在3.2中安装过了eslint-config-prettier，所以不需要再次安装】

【我们在3.3中的截图中有红色框，指的就是当前这步】

3.6 配置Visual Studio Code

链接：https://prettier.io/docs/editors 中有各个编辑器的配置，我着重记录一下vs code的配置。

1. 首先打开vs code 的setting配置
   
2. 以json配置的形式查看setting配置
   
3. 配置json
   

{
  "dart.flutterSdkPath": "/Users/xxx/flutter/flutter",
  "diffEditor.ignoreTrimWhitespace": true,
  "explorer.confirmDelete": false,
  "dart.openDevTools": "flutter",
  "lldb.library": "/Applications/Xcode.app/Contents/SharedFrameworks/LLDB.framework/Versions/A/LLDB",
  "lldb.launch.expressions": "native",
  "lldb.suppressUpdateNotifications": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "eslint.validate": ["javascript", "typescript", "vue"]
}

这样配置，就可以使用prettier作为vs code的默认format插件，并且对js、ts、vue进行format格式化显示，在onSave（Command + s 保存）的时候可以进行format。

以上。

上面就是一个简单的配置，更复杂的配置大家可以参考2个插件的集成文档，希望对有帮助。