@dbappsecurity/eslint-config-standard

在官方推荐 eslint:recommended 和独角兽公司 Airbnb 开源的基础配置 airbnb-base 上添加/覆盖了较强的校验规则。

安装

yarn add eslint @dbappsecurity/eslint-config-standard -D

配置

在项目根目录创建 .eslintrc.js，然后添加：

module.exports = {
    // ...
    extends: ['@dbappsecurity/eslint-config-standard'],
    // ...
};

其他文件后缀的默认配置文件按照对应格式配置。
在实际项目中，会根据使用的UI框架语法、是否采用 Typescript、是否配合 Prettier 来增加 extends，例如：

yarn add eslint-plugin-prettier eslint-config-prettier -D

module.exports = {
    // ...
    extends: [
        // ...
        '@dbappsecurity/eslint-config-standard',
        'plugin:prettier/recommended',
    ],
    rules: {
        'prettier/prettier': ['error'], // 打开 Prettier 校验
        // ...
    },
    // ...
};

extends 中的规则会由后往前覆盖，所以尽量将 @dbappsecurity/eslint-config-standard 往后放置来覆盖别的规则，若项目中使用 plugin:prettier/recommended，则必须把它放到最后，以解决 ESLint 和 Prettier 规则冲突。

使用

分为构建流程和脚本命令两部分：

1. 常用的构建工具有 webpack vite rollup 等，这里以 webpack 为例，首先安装 eslint-loader。

   yarn add eslint-loader -D

   然后配置 webpack.config.js：

   module.exports = {
       // ...
       module: [
           rules: [
               // ...
               ...(process.env.NODE_ENV === 'development' // 仅开发环境启动校验
                   ? [
                       {
                           test: /\.js$/,
                           exclude: /node_modules/,
                           loader: 'eslint-loader',
                           options: {
                               // ... eslint options (if necessary)
                           },
                       },
                   ]
                   : []),
           ],
       ],
   };

   以上是最基础的配置。 在实际项目中，各UI框架都提供了封装了 eslint-loader 对应的 plugin，例如：Vue2 使用 @vue/cli-plugin-eslint 后，方可在 vue.config.js 中通过 lintOnSave 开启或关闭 ESLint。

2. 在 package.json 中添加脚本命令：

   {
       // ...
       "scripts": {
           "lint:js": "eslint \"./**/*.{js}\"",
           "lint:js:fix": "eslint \"./**/*.{js}\" --fix",
       }
       // ...
   }

   上述脚本命令仅校验 JavaScript 文件。 在实际项目中，各UI框架都提供了对应的文件类型，例如：.vue .jsx .tsx 等，这类文件的校验需要根据情况手动添加。

其他

1. 在工程化项目中，我们常常使用构建工具提供的路径别名来为模块导入提供便利，而仅通过 eslint 命令校验时，往往不能解析路径别名，这时我们就需要为 eslint 添加别名解析器：

   yarn add eslint-import-resolver-alias -D

   然后配置 .eslintrc.js 中的 settings 和 rules：

   module.exports = {
       // ...
       settings: {
           // ...
           'import/resolver': {
               alias: {
                   map: [['^@/*', path.resolve(__dirname, 'src/')]],
                   extensions: ['.js', '.vue', '.jsx', '.tsx'], // 根据UI库调整扩展名
               },
           },
       },
       rules: {
           //...
           'import/extensions': ['error', { js: 'js', vue: 'vue', jsx: 'jsx', tsx: 'tsx' }], // 与别名扩展名保持一致
       },
       // ...
   };