@anjianshi/eslint-config

公共 ESLint Configs

设计思路

从简

少开启规则，目标为“减少 bug 率”，而不是限制代码风格。

不关注”代码样式“

参考 此文章 的建议，不开启代码样式规则， 由专门的格式化工具（Prettier + @anjianshi/prettier-config）来控制它们。

被排除的规则列表，主要包括 ESLint 自身 Layout & Formatting 段落的全部规则和 TypeScript、React 插件的许多规则。

---

配置文件列表

base: 基础 JavaScript 规则
typescript: TypeScript 规则
react: React App 规则
node: Node.js 环境下的规则

• typescript、react、node 都包括了 base 的内容。
• react 并未包含 typescript，如需用 typescript 写 React 应用，则两个都要引用。

---

如何使用

安装

yarn add --dev eslint @anjianshi/eslint-config

配置 ESLint

建立一个 .eslintrc.js 文件：
（若项目指定了 { "type": "module" }，则要命名为 .eslintrc.cjs）

module.exports = {
  extends: [
    '@anjianshi/eslint-config/base',
    ...
  ]
}

配置 TypeScript

1. 安装 TypeScript：

   yarn add --dev typescript

2. @anjianshi/eslint-config/typescript 要求当前 ESLint 配置文件的同级目录里有一个 tsconfig.json。
   如果它在别的位置，则需在配置文件里指明：

   module.exports = {
     extends: [
       '@anjianshi/eslint-config/base',
       '@anjianshi/eslint-config/typescript',
     ],
     parserOptions: {
       project: './src/tsconfig.json',
     },
   }

3. 如果在 TypeScript 项目里启用了 Node.js 原生 ES6 Module 或配置了 alias，
   则 eslint-import-plugin 需要配合 eslint-import-resolver-typescript 才能正确解析文件引用。

   安装此依赖后，在 ESLint 配置里指明项目路径：

   {
     settings: {
       'import/resolver': {
         typescript: {
           project: './'
         }
       }
     }
   }

配置 VSCode

一、安装 VSCode 插件 ESLint

二、修改 VSCode 设置（Code - Preferences - Settings）

{
  "editor.tabSize": 2,
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
  ],
  "eslint.workingDirectories": [{ "mode": "auto" }],
}

三、关于 ESLint workingDirectories 若 VSCode 的 workspace 配置成类似如下目录结构：

projects/     // /Users/me/office/projects/
  proj-1/
  proj-2/
  ...

library/      // /Users/me/library/
  lib-1/
  lib-2/

也就是，workspace 下添加了多个独立的文件夹，每个独立文件夹下又有多个项目。 在开发这些项目（proj-1、lib-1...）时，VSCode 默认会把顶层目录作为 ESLint 的 workingDirectory，从那个目录下加载插件等依赖，导致找不到依赖。 在 VSCode 配置里指定 { "mode": "auto" } 可解决此问题，它会让 VSCode 把 package.json 存在的目录作为 workingDirectory，也就能正常引入依赖了。

---

开发说明

如何更新 ESLint 规则

看 ESLint 及各插件的 ChangeLog，来补充、移除、调整规则定义。 (规则文件里只定义和默认值不同的规则，例如默认不开启，也没准备开启的规则就不写下来)