最近做一个基于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/ts
parser,可以在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
这样提供现成可用自定义配置插件的途径,所以对于项目配置仍需要从基础理解,避免出现问题时手足无措。