eslint-plugin-tsvue-parser

本插件用来解决 vue 项目中 JS/TS 混合开发的过度阶段带来的 eslint 问题

核心思想是用一个 eslint 插件，把 vue+ts 的 vue 文件，修改文件的后缀名为 .tsvue

从而达到按语言区分文件名，这样可以在 eslint 里面用 overwrite 进行规则区分了

由 Github 此问题得到的解决办法 vuejs/vue-eslint-parser/issues/49，文中提及的包 eslint-plugin-tsvue 完善而来

需配合另外一个 npm 包 eslint-plugin-tsvue 一起使用

安装

1npm install eslint-plugin-tsvue eslint-plugin-tsvue-parser --save-dev

使用

1{
2  parser: require.resolve('vue-eslint-parser'),
3  parserOptions: {
4    parser: require.resolve('@babel/eslint-parser'),
5  },
6  plugins: ['tsvue'],
7  overrides: [
8    {
9      files: ['**/*.{ts,tsx,tsvue}'],
10      parser: require.resolve('eslint-plugin-tsvue-parser'),
11      parserOptions: {
12        parser: require.resolve('@typescript-eslint/parser'),
13        extraFileExtensions: ['.vue', '.tsvue'],
14        project: ['tsconfig.json'],
15        ecmaVersion: 'latest',
16        sourceType: 'module',
17        ecmaFeatures: {
18          jsx: false,
19          modules: true,
20        },
21      },
22      plugins: ['@typescript-eslint'],
23    },
24  ],
25}