VSCode 使用 ESLint + Prettier 来统一 JS 代码

ESLint 是一款语法检测工具。为了方便人们的理解，快速上手别人的代码。一些大公司规定了代码编写的规则，ESlint 就是用于对这些人为制定的语法规则进行校验。

如果写的代码不符合eslint.js配置的规范，项目在启动以后会在控制台报错的。

prettier 是一个代码格式化插件。它并不关心你的语法是否正确，只关心你的代码格式，比如是否使用单引号，语句结尾是否使用分号等等。

一般采用相应的js格式作为配置文件。目前项目中的配置如下：

.eslintrc.js： 

module.exports = {
  "env": {
      "browser": true,
      "es6": true
  },
  "extends": "eslint:recommended",
  "globals": {
      "Atomics": "readonly",
      "SharedArrayBuffer": "readonly"
  },
  "parser": "babel-eslint",
  "parserOptions": {
      "ecmaVersion": 2018,
      "sourceType": "module"
  },
  "rules": {
      "no-undef": 0,
      "no-unused-vars": 0,
      "no-case-declarations": 0,
      "no-prototype-builtins": 0,
      "no-inner-declarations": 0,
      "no-self-assign": 0,
      "no-useless-escape": 0,
      // eqeqeq: [ 'error', 'always' ],
      quotes: ['error', 'single'],
      'no-debugger': 2
  }
};

.prettierrc.js文件内容为：

module.exports = {
  trailingComma: "es5",
  tabWidth: 2,
  semi: false,
  singleQuote: true,
};

下面是vscode集成方法：

1、安装eslint插件

2、安装Prettier插件

3、设置 Prettier 为默认 代码格式化 工具

当 vscode 同时装了 ESLint 和 Prettier 扩展后，按 shift+alt+f，会弹出提示，让你选择默认的 code formatter 项。

这个时候，我们就完成了 vscode 使用 ESLint + Prettier 的所有步骤：即 ESLint 负责检查代码错误，而Prettier只负责格式化代码！

下面是一篇更详细的介绍，附上链接：www.cnblogs.com/xjnotxj/p/1…