ESLint + Prettier的使用及配置

ESLint

什么是ESLint ？
ESLint是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具。

使用

npm install eslint -D

配置

配置文件

ESLint 支持多种格式的配置文件：
JavaScript - 使用 .eslintrc.js 并导出包含您的配置的对象。
YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 来定义配置结构。
JSON - 使用 .eslintrc.json 定义配置结构。 ESLint 的 JSON 文件也允许 JavaScript 样式的注释。
package.json - 在你的 package.json 文件中创建一个 eslintConfig 属性并在那里定义你的配置。

如果同一目录下有多个配置文件，ESLint 只会使用一个。 优先顺序如下：
1、 .eslintrc.js
2、 .eslintrc.cjs
3、 .eslintrc.yaml
4、 .eslintrc.yml
5、 .eslintrc.json
6、 package.json

我使用的是.eslintrc.js，这里对eslint中的配置项进行描述。

//.eslintrc.js
//匹配相对于【.eslintrc.js】文件本身的文件和目录
module.exports = {
 
 /**
  * 根目录标识
  * 要将 ESLint 限制为特定项目，请将 "root": true 放在 .eslintrc.* 文件或 package.json 文件的 eslintConfig 字段中，或在项目根级别的 .eslintrc.* 文件中。  
  * ESLint 一旦找到带有"root": true的配置，标识当前配置文件为eslint的根配置文件，让其停止在父级目录中继续寻找。
  */
  root: true, 
 
 
 /**
  * 解析器 
  * https://eslint.org/docs/latest/user-guide/configuring/plugins#specifying-parser
  * 常用解析器
  * espree   eslint的默认解析器，只转换 js，默认支持 ES5 的语法，可以通过制定 parserOptions 给 Espree 传递选项。
  * @babel/eslint-parser   该 parser 允许你使用 ESLint 校验所有 babel code。如果你使用该解析器，还要使用 babel（npm install @babel/core -D）。
  * @typescript-eslint/parser   一个 ESLint 解析器，它利用 TypeScript ESTree 允许 ESLint 对 TypeScript 源代码进行 lint。
  */
  parser: "@babel/eslint-parser",
 
 
 /**
  * 解析器配置项
  * https://eslint.org/docs/latest/user-guide/configuring/language-options#specifying-parser-options
  * 不同的解析器可能有不同附加配置项。
  * parserOptions: {
  *   "sourceType": "module",  // 指定JS代码来源的类型，script（默认）| module（es6的module模块）。
  *   "ecmaVersion": 6,     // 支持的ES语法版本，默认为5。可以设置使用基于年份的命名，还可以设置“latest”以使用最新支持的版本。
  *   "ecmaFeatures": {     // Features是特征的意思，这里用于指定要使用其他那些语言对象
  *     "jsx": true,              //启用jsx语法
  *     "globalReturn":true,          //允许在全局作用域下使用 return 语句
  *     "impliedStrict":true          //启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
  *   }
  * }
  */
  parserOptions: {},
 
 
 /**
  * 运行环境
  * 可用的环境 https://eslint.org/docs/latest/user-guide/configuring/language-options#specifying-environments
  * 一个环境定义了一组预定义的全局变量
  * browser - 浏览器环境中的全局变量。
  * node - Node.js 全局变量和 Node.js 作用域。
  * es6 - 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）。
  */
  env: {},
 
 
 /**
  * 全局变量
  * 定义额外的全局，开发者自定义的全局变量，让其跳过no-undef 规则。
  * key值就是额外添加的全局变量，value值用于标识该变量能否被重写，true为允许变量被重写。
  */
  globals: {},
 
 
 /**
  * 插件
  * https://eslint.org/docs/latest/user-guide/configuring/plugins#configuring-plugins
  * 在使用插件之前，必须使用 npm 安装它
  * plugins本质上是为了使用更多的校验规则方法，而仅仅引用插件是不会有任何效果的，还需要通过 rules 启用插件中的哪些规则。
  * 使用插件（eslint-plugin-插件名称）时，可以省略前缀【eslint-plugin-前缀】。
  * plugins: [
  *   "jquery", // eslint-plugin-jquery
  *   "@jquery/jquery", // @jquery/eslint-plugin-jquery
  *   "@foobar" // @foobar/eslint-plugin
  * ]
  */
  plugins: [],
 
 
 /**
  * 规则继承
  * https://eslint.org/docs/latest/user-guide/configuring/configuration-files#extending-configuration-files
  * eslint内置推荐规则，即【eslint:recommended】
  * 可以使用三方配置文件中的扩展规则，书写时配置名称中省略【eslint-config-】的前缀，例如，airbnb 解析为 eslint-config-airbnb。
  * 使用插件中的配置【plugin:插件包名/配置名】，可以省略包名的【eslint-plugin-】的前缀。例如，【eslint-plugin-react】的书写为"plugin:react/recommended"。
  * 可以直接引入配置文件，例："./node_modules/coding-standard/eslintDefaults.js"。
  * 继承使用第三方的规则集（注意放置顺序）。
  */
  extends: [],
 
 
 /**
  * 共享设置
  * https://eslint.org/docs/latest/user-guide/configuring/configuration-files#adding-shared-settings
  */
  settings: {},
 
 /**
  * 针对特定文件的配置
  * https://eslint.org/docs/latest/user-guide/configuring/configuration-files#configuration-based-on-glob-patterns
  * 可以通过overrides对特定文件进行特定的eslint检测
  * 应用于相对于配置文件的目录的文件路径
  * 一个特定的配置几乎与 ESLint 的其他配置相同，覆盖块可以包含常规配置中的除了 root 之外的其他任何有效配置选项。
  */
  overrides: [
  {
    "files": ["bin/*.js", "lib/*.js"],
    "excludedFiles": "*.test.js",  //指定从匹配中排除
    "rules": {
      "quotes": ["error", "single"]
    }
  }
 ],
 
 /**
  * 自定义规则
  * http://eslint.cn/docs/user-guide/configuring#configuring-rules
  * 基本使用方式
  * "off" 或者0 关闭规则
  * "warn" 或者1 将规则打开为警告（不影响退出代码）
  * "error" 或者2 将规则打开为错误（触发时退出代码为1）
  * 如果某项规则，有额外的选项，可以通过数组进行传递，而数组的第一位必须是错误级别。如0,1,2
  * 如 'semi': ['error', 'never'], never就是额外的配置项
  */
  rules: {
  /**
   * 具体规则
   * 可以使用eslint本身的规则 https://eslint.org/docs/latest/rules/
   * 如果要使用或者覆写定义在插件中的规则时，首先需要在【plugins】中显式引入该插件，然后使用【插件名/规则】的形式进行覆写。
   */
 }
}

级联和层次结构

https://eslint.org/docs/latest/user-guide/configuring/configuration-files#cascading-and-hierarchy
层叠配置基于被检查文件的位置，如果 .eslintrc 文件与被检查的文件位于同一目录中，则该配置优先。 然后，ESLint 搜索目录结构，合并沿途找到的任何 .eslintrc.* 文件或 package.json 文件的 eslintConfig ，直到到达带有 root: true 的配置文件或根目录。

官方文档示例，项目结构如下：

• lib/下面的所有文件将使用项目根目录里的package.json文件作为它的配置文件。当 ESLint 遍历到test/目录，除了使用your-project/package.json文件中的eslintConfig配置之外，它还会用到your-project/tests/.eslintrc。
• 根目录下 package.json 文件带有 eslintConfig 字段，它描述的配置会应用到它下面的所有子目录，但是tests/目录下的.eslintrc文件描述的配置会覆盖它存在冲突的规范。
• 所以your-project/tests/test.js是基于它的目录层次结构中的.eslintrc文件和your-project/package.json文件中的eslintConfig配置的组合，并且离的最近的eslint配置优先。

.eslintignore

忽略指定文件和目录，匹配相对于【.gitignore】文件本身的文件和目录

/pages   忽略“/pages”下的所有的目录
pages    忽略“pages”下的所有目录
data.*   忽略以“data.”开头的文件或者文件夹
data/*   忽略“data”目录下的所有目录和文件
!data/index.js   排除“data/index.js”文件

Prettier 代码格式化工具

使用

npm install prettier -D

解决ESLint和Prettier的规则冲突

npm install eslint-plugin-prettier eslint-config-prettier -D

//.eslintrc.js
module.exports = {
  ...
  extends: ["eslint:recommended", "plugin:prettier/recommended", "prettier"],
  // eslint-plugin-prettier 将 Prettier 的规则设置到 ESLint 的规则中。
  // eslint-config-prettier 关闭 ESLint 中与 Prettier 中会发生冲突的规则，优先级：Prettier 配置规则 > ESLint 配置规则。
  ...
}

配置

//prettier.config.js
module.exports = {
  printWidth: 200, //一行代码的最大字符数
  tabWidth: 2, //指定每个缩进级别的空格数
  useTabs: false, //是否使用tab来缩进
  semi: true, //语句末尾使用分号
  // vueIndentScriptAndStyle: true, //缩进Vue文件  true是缩进Vue文件中的脚本和样式标签
  singleQuote: false, // 使用单引号
  quoteProps: "as-needed", //object对象中key值是否加引号（as-needed只有在需求要的情况下加引号，consistent是有一个需要引号就统一加，preserve是保留用户输入的引号）
  bracketSpacing: true, //object对象里面的key和value值和括号间的空格
  trailingComma: "es5", //尾部逗号设置，es5是尾部逗号兼容es5，none就是没有尾部逗号，all是指所有可能的情况
  // bracketSameLine: false, //将多行 HTML（HTML、JSX、Vue、Angular）元素的尖括号 > 放在最后一行的末尾，（false单独放在下一行）
  jsxBracketSameLine: false, //jsx标签多行属性写法时，尖括号是否另起一行
  jsxSingleQuote: false, //在jsx文件中的引号需要单独设置
  arrowParens: "always", //箭头函数单个参数的情况是否省略括号，默认always是总是带括号（arrowParens: "<always|avoid>"）
  insertPragma: false, //自当插入pragma到已经完成的format的文件开头
  requirePragma: false, //格式化有特定开头编译指示的文件
  proseWrap: "never", //文章换行,默认情况下会对你的markdown文件换行进行format会控制在printwidth以内
  htmlWhitespaceSensitivity: "strict", //"<css|strict|ignore>" html中的空格敏感性
  endOfLine: "auto", //"<lf|crlf|cr|auto>" 行尾换行符,默认是lf,
  rangeStart: 0, //range是format执行的范围，可以选执行一个文件的一部分，默认的设置是整个文件（rangeStart: <int>  rangeEnd: <int>）
  rangeEnd: Infinity,
  embeddedLanguageFormatting: "off", //控制被引号包裹的代码是否进行格式化（"auto" | "off"）
  // 针对不同文件或目录设置不同配置的方法
  overrides: [
    {
      files: ".prettierrc",
      options: { 
	    "parser": "json", //永远不要将解析器选项放在配置的顶层，仅在覆盖内使用它。否则，将会禁用 Prettier 的基于自动文件扩展名的解析器推断。
	  },
    }
  ],
};