复习 VSCode 下

ESLint 与 Prettier

ESLint 可以检测语法和代码规范：

parser 和 parserOptions 检测语法
extends 和 rules 检测代码规范

ESLint 提供了两种类型的代码规范：

• 代码格式：例如 max-len, no-mixed-spaces-and-tabs, keyword-spacing, comma-style…
  Prettier 可以替代这类规则，因此需要关闭 ESLint 当中的这类规则
• 代码质量：no-unused-vars, no-extra-bind, no-implicit-globals, prefer-promise-reject-errors…
  Prettier 不提供这类规则，因此只能用 ESLint 来检测

如果要同时使用 ESLint 和 Prettier，推荐安装 eslint-config-prettier，它是一个 eslint 的配置文件，其中关闭了所有与 Prettier 有冲突的 rules，在你自己的 eslint 配置文件中 extends eslint-config-prettier，就可以将 ESLint 与 Prettier 同时使用了。

npm i -D eslint-config-prettier

将 prettier 放到 extends 数组的最后，这样它可以覆盖其他 extends 的 rules

// .eslintrc.js

{
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier',
    ]
}

在 VSCode 中使用 ESLint 和 Prettier

在 VSCode 中保存代码的时候，想要自动检测并修复语法与代码规范，有两种方式：

1. 利用 ESLint 来检测语法与代码规范
2. 利用 ESLint 来检测语法，利用 Prettier 来检测代码规范

单独使用 ESLint 来检测语法与代码规范

1. VSCode 中安装 ESLint 插件
2. 在项目目录中安装 ESLint

npm i -D eslint

3. 创建 ESLint 配置文件，选择检测语法和代码规范，选择 Standard 或者 Airbnb 的规则

npx eslint --init

How would you like to use ESLint? … 
  To check syntax only
  To check syntax and find problems
❯ To check syntax, find problems, and enforce code style

...

How would you like to define a style for your project? … 
❯ Use a popular style guide
  Answer questions about your style

Which style guide do you want to follow? … 
  Airbnb: https://github.com/airbnb/javascript
❯ Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

...

执行以上语句，会自动创建 .eslintrc.js 配置文件，手动加上 root: true

module.exports = {
    root: true,
    env: {
        browser: true,
        es2021: true,
        node: true
    },
    extends: [
        'standard'
    ],
    parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module'
    },
    rules: {}
}

extends: ['standard']，表明 eslint 要按照 standard 规则来检测代码规范。

4. 修改 VSCode 工作区配置文件，设置保存文件的时候自动使用 eslint 来检测语法与代码规范

{
    // 千万不要加这一句，否则保存文件的时候会启动 format 来检测代码规范，会与 eslint 的 Standard 规则冲突
    // "editor.formatOnSave": true,

    // 保存文件的时候自动使用 eslint 来检测语法与代码规范
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

利用 ESLint 来检测语法，利用 Prettier 来检测代码规范

1. VSCode 中安装 ESLint 插件和 Prettier 插件
2. 在项目目录中安装 ESLint 和 eslint-config-prettier

npm i -D eslint eslint-config-prettier

3. 创建 ESLint 配置文件

npx eslint --init

How would you like to use ESLint? … 
  To check syntax only
❯ To check syntax and find problems
  To check syntax, find problems, and enforce code style

...

执行以上语句，会自动创建 .eslintrc.js 配置文件，手动加上 root: true 和 extends: 'prettier'

module.exports = {
    root: true,
    env: {
        browser: true,
        es2021: true,
        node: true
    },
    extends: ['eslint:recommended', 'prettier'],
    parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module'
    },
    rules: {}
};

4. 手动创建 Prettier 配置文件 .prettierrc.js

module.exports = {
    // 是否使用尾逗号
    trailingComma: 'none',
    // 按 Tab 键的时候的缩进方式，true 使用 tab 缩进，false 将 tab 转换为空格缩进
    useTabs: false,
    // useTabs: false 的时候，使用空格缩进缩进几个空格
    tabWidth: 4,
    // 语句结尾是否加分号
    semi: true,
    // 字符串是否使用单引号
    singleQuote: true
}

5. 修改 VSCode 工作区配置文件

{
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}