突然发现大多数工程ESLint设置都是不对的！

看到标题，是不是感觉有点危言耸听了？别急，且花3分钟时间听完说...

先打开你的前端工程，留意一下工程结构，是不是类似这样的：

├── build
├── src
│    ├── ...
│    └── index.ts
│
├── babel.config.js
├── tsconfig.json
├── .eslintrc.js
└── package.json
 

.eslintrc.js设置例如：

module.exports = {
  extends: ['plugin:vue/vue3-recommended'],
  env: {
    browser: true,
  },
  rules: {
    'no-console': 'off',
  },
  ignorePatterns: ['**/dist']
}
 

tsconfig.json设置例如

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "lib": ["dom"],
    "jsx": "preserve"
  },
  "exclude": ["**/dist"]
}
 

babel.config.js设置例如

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}
 

区分工程化环境和项目环境

这样看貌似都是对的，但是忽略了一个问题，从整个工程来看，其实分2大领域：

• /src 下面是项目环境
• / 下面其实是属于工程化的环境

所以如果只有一套.eslintrc.js、tsconfig.json、babel.config.js 显然是不对的。根下面都是node编译环境，如果出现alert('hello!')等browser环境下的方法，应当报错才对！

所以，正确的做法应当至少配置2套环境：

├── build
├── src
│    ├── ...
│    ├── index.ts
│    ├── babel.config.js
│    ├── tsconfig.json
│    └── .eslintrc.js
│
├── babel.config.js
├── tsconfig.json
├── .eslintrc.js
└── package.json
 

ESLint支持多个配置

eslint本身就是支持按目录来配置的，不同目录下可以配置不同的.eslintrc.js，eslint引擎会不断往上查找配置文件，遇到root: true则停止查找，所以记得设置root: true，以提高性能。

/.eslintrc.js：

module.exports = {
  extends: ['eslint:recommended'],
  env: {
    browser: false,
    node: true,
  },
}
 

/src/.eslintrc.js：

module.exports = {
  extends: ['plugin:vue/vue3-recommended'],
  env: {
    browser: true,
    node: false,
  },
}
 

tsconfig支持多个配置

tsconfig本身也是支持多配置的，TS引擎会自动识别出现tsconfig.json的目录为独立的子项目，并且支持"extends"来继承tsconfig设置。

项目根目录下的tsconfig配置更多是给eslint和babel读取的。

/.tsconfig.json：

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ESNext",
    "lib": ["es2020"]
  }
}
 

/src/.tsconfig.json：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "lib": ["es2020", "dom"],
    "jsx": "preserve"
  }
}
 

babel支持多个配置

babel 7.x 以上开始支持两种类型的配置文件, 分别是.babelrc 和 babel.config.js:

• babel.config.js 当前项目维度 (Project Wide)的配置文件，相当于一份全局配置，如果 babel 决定应用这个配置文件，则一定会应用到所有文件的转换。
• .babelrc 相对文件(File Relative)的配置文件， babel 决定一个 js 文件应用哪些配置文件时,会执行如下策略: 如果要转换的这个 js 文件在当前项目内，则会先递归向上搜索最近的一个 .babelrc 文件(直到遇到package.json目录)，将其与全局配置合并。如果这个 js 文件不在当前项目内，则只应用全局配置，忽略与这个文件相关的 .babelrc 。

简单来说就是babel 会在当前执行目录搜索 babel.config.js, 若有则读取并作为全局配置，若无则全局配置为空。然后在转换一个具体的js文件时会去判断，如果这个文件在当前执行目录外面，则只应用全局配置。如果这个文件在当前执行路径内，则会去基于这个文件向上搜索最近的一个 .babelrc ，将其与全局配置合并作为转换这个文件的配置。