eslint 正确处理 vue, ts, tsx 配置小技巧

[pikou1995]

eslint --fix --ext .js,.vue,.ts,.tsx .

加上文件后缀，配好 vue-eslint-parser 和 babel-eslint 的 parser，结果 ts 文件硬是不能正确识别... 找了半天才找到一个配置项overrides -_-

{
    parser: 'vue-eslint-parser',
    extends: [
        'eslint:recommended',
        'plugin:vue/recommended',
        'plugin:@typescript-eslint/recommended',
    ],
    parserOptions: {
        parser: 'babel-eslint',
        sourceType: 'module',
        ecmaVersion: 2020,
        ecmaFeatures: {
            jsx: true,
        },
        project: './tsconfig.json',
    },
    overrides: [
        {
            files: ['*.ts', '*.tsx'],
            parser: '@typescript-eslint/parser',
        },
    ],
    plugins: ['vue', '@typescript-eslint'],
}

[pikou1995]

因为@babel/eslint-plugin@7.11.3还不支持ts, 比如as语法, 已将parserOptions.parser换成@typescript-eslint/parser. 项目有某些原因必须要混合使用js,所以保留babel-eslint用来处理js

{
    parser: 'vue-eslint-parser',
    extends: [
        'eslint:recommended',
        'plugin:vue/recommended',
        'plugin:@typescript-eslint/recommended',
    ],
    parserOptions: {
        parser: '@typescript-eslint/parser',
        sourceType: 'module',
        ecmaVersion: 2020,
        ecmaFeatures: {
            jsx: true,
        },
        project: './tsconfig.json',
    },
    overrides: [
        {
            files: ['*.js'],
            parser: 'babel-eslint',
        },
    ],
    plugins: ['vue', '@typescript-eslint'],
}