如何优雅的复用Eslint配置

如何优雅的复用Eslint配置

背景

我经常会搭建一些空项目（我比较三心二意😂）。搭建完项目后，首先想做的就是配置项目的代码规范，但每次手动配置感觉做了大量重复的工作。因此有了复用Eslint配置的想法。

最初的想法

最初我的想法是写一个cli，cli的作用是从远程（github）将自己配置好的依赖、文件下载到本地项目中。

大概的流程如下图：

这个cli最初版开发完成后，我发现有一些缺点：

1. 使用频率不高（一个项目可能只用一次，用完就不需要了）
2. 配置文件过于复杂
3. 下载文件时经常因为网络问题失败
4. 无法与项目中已有的配置友好的集成（会与本地的配置文件冲突）

因此我便没有维护这个cli的想法了。

最新的想法

因同事在群中提到一些代码规范问题，所以又萌生了利用Eslint配置文件中的extends属性继承配置的想法。

什么是extends？

extends是Eslint配置文件中的一个属性，可用于使用预定义和可共享的配置，也可用于扩展可共享的配置。可共享的配置可以是本地配置文件的路径或npm包名称。

用起来也非常简单：

{
  "extends": ["eslint:recommended", "plugin:prettier/recommended"]
}

开发自己的Eslint config

1. 创建一个名为eslint-config-[名称]的项目
2. 安装需要的依赖
3. 在项目中创建一个index.js文件，用于导出配置

module.exports = {
  ...配置
}

4. 发布到npm仓库

我创建了一个自己的eslint config项目，在其中使用了一些个人非常喜欢的配置：

module.exports = {
  plugins: [
    'import',
    'prettier',
    'sort-destructure-keys',
    'sort-keys-fix',
    'unicorn',
    'unused-imports',
    '@typescript-eslint',
  ],
  settings: {
    'import/resolver': {
      node: true,
      typescript: true,
    },
  },
  rules: {
    'import/no-duplicates': 'error',
    'import/newline-after-import': ['error', { count: 1 }],
    'import/order': [
      'error',
      {
        groups: [
          'builtin',
          'external',
          'internal',
          'parent',
          'sibling',
          'index',
          'object',
          'unknown',
        ],
        'newlines-between': 'always',
        alphabetize: {
          order: 'asc',
          caseInsensitive: true,
        },
      },
    ],
    'unused-imports/no-unused-imports': 'error',
    'unused-imports/no-unused-vars': [
      'error',
      {
        args: 'after-used',
        argsIgnorePattern: '^_',
        vars: 'all',
        varsIgnorePattern: '^_',
      },
    ],

    'no-console': 'warn',
    'no-unused-vars': 'off',
    'padding-line-between-statements': [
      'error',
      { blankLine: 'always', prev: 'directive', next: '*' },
      { blankLine: 'any', prev: 'directive', next: 'directive' },
      { blankLine: 'always', prev: ['const', 'let', 'var'], next: '*' },
      {
        blankLine: 'any',
        prev: ['const', 'let', 'var'],
        next: ['const', 'let', 'var'],
      },
      { blankLine: 'always', prev: '*', next: 'return' },
    ],
    'prettier/prettier': [
      'error',
      {
        bracketSpacing: true,
      },
    ],
    'sort-keys-fix/sort-keys-fix': 'error',
    'sort-destructure-keys/sort-destructure-keys': [
      'error',
      {
        caseSensitive: true,
      },
    ],
    'sort-keys': [
      'error',
      'asc',
      {
        minKeys: 2,
        natural: false,
        caseSensitive: true,
      },
    ],
    'sort-imports': [
      'error',
      {
        ignoreCase: false,
        ignoreMemberSort: false,
        allowSeparatedGroups: true,
        ignoreDeclarationSort: true,
        memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
      },
    ],
    'unicorn/better-regex': 'error',
    'unicorn/prefer-node-protocol': 'error',
  },
};

因为配置项过多，所以我就不一一解释了，感兴趣可以自行百度。

遇到的问题

1. 本地开发如何测试？

使用npm pack命令将项目打包，再通过本地.tgz文件的形式安装到项目中。

2. 集成后为什么没有生效？

集成后可以重启下Eslint服务，查看是否生效：cmd + shift + p，输入Eslint: Restart Eslint Server。

3. Eslint配置项错误问题

可能使用了错误的配置项，需要根据Eslint插件的文档修改配置。

4. Eslint进行校验时，提示语法错误

项目中的Node版本较低，不支持Eslint插件中的某些语法，需要降级对应Eslint插件的版本或升级Node版本 （不推荐）。