eslint parser配置实践

最近做一个基于vue2.0的项目，使用vue-cli生成。一开始并没有选择支持typescript，但是编写过程中因为复杂的业务逻辑，想要使用ts编写一些工具类，添加了相关依赖后却发现在配置eslint的过程中parser成了最大的问题。

1. js parser

eslint是基于estree对代码进行检测的，是一种ast语法树。最常见的parser应该就是@babel/eslint-parser了。因为eslint默认的parser只支持旧的语法规则转换，在使用较新的语法特性时，就需要使用@babel/eslint-parser来将其解析成estree供eslint使用。但是babel支持对js文件的转换，所有我们需要其他的parser来支持其他类型的文件。

2. vue parser

vue官方提供了vue-eslint-parser包来对.vue文件中template部分进行转换，script部分需要额外配置一个js/tsparser，可以在parserOption.parser中进行指定。

3. ts parser

ts中提供了一套针对eslint的解决方案，在@typescript-eslint这个org下，这里可以使用@typescript-eslint/parser对ts进行解析。

4. ts parser的问题与抉择

在@babel/esint-parser和@typescript-eslint/parser的文档中都有提到对方，@babel/esint-parser支持解析ts语法，但不支持使用@babel/eslint-plugin中的规则对ts进行lint。在@typescript-eslint/parser文档中也有提及，并且表明并没有计划支持同时使用这两个parser。

5. vue中ts的抉择

vue-eslint-parser中可以配置的额外parser是针对script标签中的内容进行解析使用的，但是因为存在历史包袱，所以script标签中仍打算使用js进行编写。所以vue-eslint-parser中必须使用@babel/ealint-parser进行解析。

6. 最终选择

在权衡各方利弊后最终决定针对不同文件使用各自最适合的parser以及extends与plugin套件，这里可以使用.eslintrc.js中overrides进行配置：

const path = require('path');

module.exports = {
  root: true,
  env: {
    node: true,
  },
  globals: {
    window: true,
    document: true,
  },
  settings: {
    'import/resolver': {
      alias: {
        map: [
          ['@', path.resolve(__dirname, './src')],
        ],
        extensions: ['.ts', '.js', '.jsx', '.json', '.vue'],
      },
    },
  },
  overrides: [
    {
      files: ['*.js', '*.jsx'],
      parser: '@babel/eslint-parser',
      parserOptions: {
        babelOptions: {
          configFile: path.resolve(__dirname, './babel.config.js'),
        },
      },
      extends: ['airbnb-base'],
    },
    {
      files: ['*.ts'],
      parser: '@typescript-eslint/parser',
      plugins: ['@typescript-eslint'],
      extends: ['airbnb-base', 'plugin:@typescript-eslint/recommended'],
    },
    {
      files: ['*.vue'],
      parser: 'vue-eslint-parser',
      parserOptions: {
        parser: '@babel/eslint-parser',
        babelOptions: {
          configFile: path.resolve(__dirname, './babel.config.js'),
        },
      },
      extends: ['airbnb-base', 'plugin:vue/recommended'],
    },
  ],
};
复制代码

其中还针对项目中alias的使用添加了eslint-import-resolver-alias依赖配置。

7. 总结

使用cli的初衷是获得一个上手可用的项目配置，但是因为@vue/cli没有类似于customize-cra这样提供现成可用自定义配置插件的途径，所以对于项目配置仍需要从基础理解，避免出现问题时手足无措。