ESLint 配置真的是项目搭建永远的痛, 特别是加上 TS 之后, 简直就是噩梦级别

配置参考

有位老哥总结了一整版专门讲 ESLint 相关的配置说明, 很有学习价值, 建议看完 链接点这里

个人配置总结

TS 配置

• TS 项目首先肯定要配置 tsconfig.json, 先贴上文件, 具体配置项可以参考 这里

json 文件复制使用需要去掉注释

{
  "compilerOptions": {
     // 基本配置项
    "jsx": "react", // 识别 jsx
    "esModuleInterop": true, // 处理 import 导入
    "sourceMap": true, // 生成相应的 .map 文件
    "resolveJsonModule": true, // 是否解析导入的 .json 文件
    "target": "es5", // 指定目标版本
    "lib": ["es5", "es2015", "es2016", "dom", "es2015.promise"], // 指定编译过程中需要包含的库文件列表
    "module": "ESNext", // 指定生成哪个模块系统代码
    "moduleResolution": "node", // 决定如何处理模块
    "allowJs": true, // 是否允许编译 js 文件
    "strict": true, // 是否开启所有严格类型检查
    "noImplicitAny": false, // 是否禁止使用隐式 any
    "downlevelIteration": true, // 是否为低版本编译目标提供迭代器的完整支持
    "forceConsistentCasingInFileNames": true, // 是否强制对同一文件使用一致的大小写引用
    "experimentalDecorators": true, // 是否启用装饰器
    "emitDecoratorMetadata": true, // 是否给装饰器声明生成元数据 (反射相关), 需要配合 reflect-metadata 包进行使用

    // 目录配置
    "rootDir": "./", // 指定输入文件的根目录, 以控制 outDir 的输出目录结构
    "outDir": "./dist", // 定义输出结构目录
    "paths": { // 指定路径别名映射
      "@src/*": ["./src/*"]
    }
  },

  // 指定编译器需要包含的文件, 配置之后一般不需要再配置 exclude, 注意一般可以把 eslintrc 等文件单独加进来
  "include": ["src", "./.eslintrc.js", "./postcss.config.js", "webpack/*.js"]
}

ESLint 配置

• 下面才是大头, 个人配置仅供参考, 建议详细阅读文章开头的博文
• 为了方便配置 rules, 我没用 override 分别对 ts 和 js 进行配置, 项目里的 js 文件也很少, 所以干脆不管了

module.exports = {
  env: {
    // 支持浏览器环境
    browser: true,
    // 支持node 环境
    node: true,
    // 支持ES2021
    es2021: true,
  },
  // 继承规则
  extends: [
    'airbnb-typescript', // airbnb 规则
    'plugin:react/recommended', // react 规则
    'plugin:import/recommended', // 支持 import/export
    'plugin:prettier/recommended', // 一键配置 prettier
  ],
  parser: '@typescript-eslint/parser', // 处理 TS 文件
  parserOptions: {
    project: ['./tsconfig.json'], // 告诉 eslint：tsconfig 在哪
    sourceType: 'module', // 支持 import/export
  },
  plugins: [
    // 使用 typescript x eslint 的插件
    '@typescript-eslint',
  ],
  settings: {
    // 自动检查 react 版本
    react: {
      version: 'detect',
    },
    // 配置路径别名
    'import/resolver': {
      alias: {
        map: [['@src', './src']],
        extensions: ['.tsx', '.ts', '.jsx', '.js'],
      },
    },
  },
  rules: {
    'no-console': 'off',
    '@typescript-eslint/no-unused-vars': 'off',
    eqeqeq: 'off', // 禁用 == 等号
    'jsx-a11y/click-events-have-key-events': 'off',
    'class-methods-use-this': 'off',
    'react/no-danger': 'off', // dangerousSetInnerHTML
    // 'linebreak-style': 'off', // 换行符
  },
};

• 需要用到的包有很多, 大概列一下

{
  "@typescript-eslint/eslint-plugin": "^4.31.2",
  "@typescript-eslint/parser": "^4.31.2",
  "eslint": "^7.32.0",
  "eslint-config-airbnb": "^18.2.1",
  "eslint-config-airbnb-typescript": "^14.00",
  "eslint-config-prettier": "^8.3.0",
  "eslint-import-resolver-alias": "^1.1.2",
  "eslint-plugin-import": "^2.25.4",
  "eslint-plugin-jsx-a11y": "^6.5.1",
  "eslint-plugin-prettier": "^4.0.0",
  "eslint-plugin-react": "^7.28.0",
  "prettier": "^2.4.1",
}

• Prettier 的配置就比较简单了, 最简单的方式就是不配置, 用默认配置, 新建 .prettierrc 文件放一对大括号就行了
• 我用到的有这几个

{
  "printWidth": 120, // 换行字数
  "singleQuote": true, // 单引号
  "endOfLine": "auto", // 换行符
  "trailingComma": "all" // 多参数换行最后结尾的逗号
}