框架常见问题
我使用需要自定义文件扩展名的框架(如 Vue),并且收到类似“你应该将 parserOptions.extraFileExtensions 添加到你的配置”的错误
¥I use a framework (like Vue) that requires custom file extensions, and I get errors like "You should add parserOptions.extraFileExtensions to your config"
你可以使用 parserOptions.extraFileExtensions 指定要允许的非 TypeScript 扩展数组,例如:
¥You can use parserOptions.extraFileExtensions to specify an array of non-TypeScript extensions to allow, for example:
有关避免性能问题,请参阅 projectService 对 extraFileExtensions 的更改。
¥See Changes to extraFileExtensions with projectService to avoid performance issues.
- 扁平配置
- 旧版配置
export default defineConfig(
// ... the rest of your config ...
{
languageOptions: {
parserOptions: {
extraFileExtensions: ['.vue'],
projectService: true,
},
},
},
);
module.exports = {
// ... the rest of your config ...
parserOptions: {
extraFileExtensions: ['.vue'],
projectService: true,
tsconfigRootDir: __dirname,
},
};
我在解析 .vue 文件中的 TypeScript 时遇到错误
¥I am running into errors when parsing TypeScript in my .vue files
如果你在解析 .vue 文件时遇到问题,可能是因为需要像 vue-eslint-parser 这样的解析器来解析 .vue 文件。在这种情况下,你可以将 @typescript-eslint/parser 移动到 parserOptions 内,并使用 vue-eslint-parser 作为顶层解析器。
¥If you are running into issues parsing .vue files, it might be because parsers like vue-eslint-parser are required to parse .vue files. In this case you can move @typescript-eslint/parser inside parserOptions and use vue-eslint-parser as the top level parser.
- 扁平配置
- 旧版配置
import tseslint from 'typescript-eslint';
import { defineConfig } from 'eslint/config';
import vueParser from 'vue-eslint-parser';
export default defineConfig(
// ... the rest of your config ...
{
languageOptions: {
parser: tseslint.parser,
parser: vueParser,
parserOptions: {
parser: tseslint.parser,
sourceType: 'module',
},
},
},
);
module.exports = {
// ... the rest of your config ...
parser: '@typescript-eslint/parser',
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
extraFileExtensions: ['.vue'],
},
};
parserOptions.parser 选项还可以指定一个对象来指定多个解析器。有关更多详细信息,请参阅 vue-eslint-parser 使用指南。
¥The parserOptions.parser option can also specify an object to specify multiple parsers. See the vue-eslint-parser usage guide for more details.