（三十六）代码美化器 eslint详解

步骤三十六

代码美化器-eslint详解

TypeScript 的代码检查工具主要有 TSLint 和 ESLint 两种。早期的 TypeScript 项目一般采用 TSLint 进行检查。TSLint 和 TypeScript 采用同样的 AST 格式进行编译，但主要问题是对于 JavaScript 生态的项目支持不够友好，因此 TypeScript 团队在 2019 年宣布全面转向 ESLint（具体可查看 TypeScript 官方仓库的 .eslintrc.json 配置），TypeScript 和 ESLint 使用不同的 AST 进行解析，因此为了在 ESLint 中支持 TypeScript 代码检查需要制作额外的自定义解析器（Custom Parsers，ESLint 的自定义解析器功能需要基于 ESTree），目的是为了能够解析 TypeScript 语法并转成与 ESLint 兼容的 AST。

• @typescript-eslint/parser 在这样的背景下诞生，它会处理所有 ESLint 特定的配置并调用 @typescript-eslint/typescript-estree 生成 ESTree-compatible AST（需要注意不仅仅兼容 ESLint，也能兼容 Prettier）。
• @typescript-eslint/eslint-plugin: 配合 @typescript-eslint/parser 一起使用的 ESLint 插件，可以设置 TypeScript 的校验规则。

ESLint配置

从背景介绍可以知道，对于全新的ts项目直接抛弃TSLint而使用ESLint，需要饱含解析AST的解析器@typescript-eslint/parse和使用校验规则的插件@typescript-eslint/eslint-plugin，安装依赖：

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

在根目录新建.eslintrc.js配置文件：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['plugin:react/recommended', 'airbnb'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react', 'prettier', '@typescript-eslint'],
  rules: {
    semi: 2, // 强制句尾使用分号
    eqeqeq: 2, // 必须使用===
    'no-plusplus': 0, // 允许使用++或--
    'import/extensions': 'off',
    'jsx-quotes': ['error', 'prefer-double'],
    'array-bracket-spacing': 2, // 在数组括号内强制实现一致的间距
    'block-spacing': 2, // 代码块间距
    'comma-spacing': 2, // 在变量声明，数组文字，对象文字，函数参数和序列中的逗号前后加上一致的间距
    'comma-style': 2, // ,在当前行结尾
    'func-names': 2, // 强制使用命名函数表达式(禁止使用匿名函数)
    'lines-between-class-members': 2, // 强制在类成员之间填充空行
    'spaced-comment': 2, // 强制注释符号与文案间距的一致性
    'no-underscore-dangle': 0, // 允许悬挂下划线在标识符的开头或末尾
    'no-unused-expressions': [
      2,
      {
        // 消除对程序状态没有影响的未使用的表达式
        allowShortCircuit: true, // 允许在表达式中使用短路评估
        allowTernary: true, // 允许在表达式中使用三元运算符
      },
    ],
    quotes: [
      2,
      'single',
      {
        // 强制使用‘’，
        avoidEscape: true, // 允许转义字符串使用单引号或双引号
        allowTemplateLiterals: true, // 允许变量字符串使用反引号
      },
    ],
    'no-multiple-empty-lines': 2, // 不允许多行空行
    'import/order': [
      'warn',
      {
        'newlines-between': 'always',
        pathGroups: [
          {
            pattern: '@**/**',
            group: 'external',
            position: 'after',
          },
        ],
        pathGroupsExcludedImportTypes: ['builtin', 'type'],
        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object', 'type'],
      },
    ],
    'import/no-extraneous-dependencies': 'off',
    'import/no-unresolved': 'off',
    'react/jsx-filename-extension': 'off',
    'operator-linebreak': 'off',
    'max-len': 'off',
    'no-unused-vars': 'off',
    'no-use-before-define': 'off',
    'implicit-arrow-linebreak': 'off',
    'no-unused-expressions': 'off',
    'object-curly-newline': 'off',
    'no-confusing-arrow': 'off',
    'react/jsx-boolean-value': 'off',
    'jsx-a11y/alt-text': 'off',
    'jsx-a11y/anchor-is-valid': 'off',
    'jsx-a11y/no-static-element-interactions': 'off',
    'jsx-a11y/click-events-have-key-events': 'off',
    'jsx-a11y/no-noninteractive-element-interactions': 'off',
    'linebreak-style': ['off', 'windows'],
    'react/function-component-definition': 'off',
    'no-console': 'off',
    'no-undef': 'off',
    'react/no-unstable-nested-components': 0,
    'function-paren-newline': 'off',
    'react/require-default-props': 'off',
    'react/jsx-wrap-multilines': 'off',
    'react/destructuring-assignment': 'off',
    'react/jsx-props-no-spreading': 'off',
    'prefer-destructuring': 'off',
    'react/jsx-curly-newline': 'off',
    'react/react-in-jsx-scope': 'off',
    'react/jsx-one-expression-per-line': 'off',
    'arrow-body-style': 'off',
    'prefer-regex-literals': 'off',
  },
};

要在vscode中安装ESLint插件，可以实时提示ts错误信息。 当然为了防止不需要被校验的文件出现校验信息，可以通过 .eslintignore 文件进行配置（例如以下都是一些不需要格式校验的配置文件）

build/*.js
public
dist/
node_modules/
config
prettierrc