VSCode集成ESLint + Prettier + Airbnb风格指南

1. ESLint

ESLint是运行代码分析并分析潜在错误的程序。它是高度可配置的，具有各种内置选项，可以与各团队的风格指南相匹配。当开发者在编辑器中输入代码时，ESLint可以突出显示错误，并在编辑器控制台中显示错误的逐项列表。

2. Prettier

Prettier是当前最流行的代码格式化程序，支持多种语言并与大多数代码编辑器集成，支持开发者设置个人的偏好，例如：制表符的宽度、尾随逗号、括号间距等。

也许开发者不能写出最好看的、最规范的代码，但是借助于Prettier，开发者可以不用花费太多的精力在这上面。待猛烈敲击键盘后，保存文件时，Prettier可以自动地帮助开发者格式化代码。

3. VSCode集成Prettier + ESLint + Airbnb风格指南

该步骤的目的在于：

1. 基于定义的ESLint规则，将Prettier设置为主要的代码格式化工具；
2. 禁用ESLint中的所有格式化规则，只是将它用来抛出错误，并让Prettier格式化代码；
3. 配置VSCode，使得在保存文件时自动调用Prettier按照定义的ESLint规则格式化代码。

3.1 环境准备

在开始之前，需要确保你的计算机已经安装如下内容：

1. Visual Studio Code，并安装ESLint和Prettier扩展；
2. 安装Node环境；
3. Node环境安装ESLint和Prettier相关扩展；
   • 安装ESLint：npm install eslint --save-dev
   • 安装Prettier：npm install prettier --save-dev
4. 创建一个空的文件夹，作为本步骤的示例文件夹；
5. 初始化package.json：npm init

3.2 初始化ESLint配置并集成Airbnb配置

使用命令eslint --init初始化ESLint配置，其中：

• How would you like to define a style for your project?步骤，依次选择Use a popular style guide、Airbnb；
• What format do you want your config file to be in?步骤，选择JSON。

3.3 配置Prettier

1. 依次安装eslint-config-prettier和eslint-plugin-prettier

   • 安装命令：npm install -D eslint-config-prettier eslint-plugin-prettier；
   • eslint-config-prettier：禁用ESLint的格式化，并关闭所有不必要或者可能与Prettier冲突的规则；
   • eslint-plugin-prettier：将Prettier作为ESLint规则运行，并将差异报告为单个ESLint问题。

2. 修改.eslintrc.json，修改内容如下：

   • 在"extends"中追加"prettier"
   • 增加"plugins": ["prettier"],
   • 在"rules"中追加"prettier/perttier": ["error"]

   修改后的.eslintrc.json文件内容如下：

   {
     "env": {
       "browser": true,
       "es2021": true
     },
     "extends": ["airbnb-base", "prettier"],
     "plugins": ["prettier"],
     "parserOptions": {
       "ecmaVersion": 12,
       "sourceType": "module"
     },
     "rules": {
       "prettier/perttier": ["error"]
     }
   }
   

3. 创建.prettierrc文件，存储相关的格式化设置，以下提供了一些简单示例：

   {
     "printWidth": 100,
     "singleQuote": true
   }
   

3.4 配置VSCode

1. 在项目文件夹中创建文件夹.vscode；

2. 在.vscode文件夹中创建settings.json，并配置如下内容：

   {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "[javascript]": {
       "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "editor.tabSize": 2,
     "editor.formatOnSave": true
   }
   

4. 参考

• Integrating Prettier + ESLint + Airbnb Style Guide in VSCode