精准配置ESLint，仅检测Vue项目中lang="ts"的文件
在Vue项目进行TypeScript渐进式改造时，如何让ESLint只检查lang="ts"的Vue组件，而忽略JavaScript部分？本文提供解决方案。
背景
渐进式迁移到TypeScript时，需要ESLint保证代码质量，但同时避免干扰未迁移的JavaScript代码。
解决方案
直接使用overrides配置可能无法精准控制。以下配置能够有效区分并分别处理lang="ts"和JavaScript代码：
module.exports = {
// ... other configurations ...
overrides: [
{
files: ['*.vue'],
// 使用vue-eslint-parser解析.vue文件
parser: 'vue-eslint-parser',
// 指定TypeScript解析器
parserOptions: {
parser: '@typescript-eslint/parser',
// 添加以下配置，让ESLint只检查lang="ts"部分
extraFileExtensions: ['.vue'],
},
rules: {
// TypeScript代码的ESLint规则
}
},
{
files: ['*.vue'],
// 使用babel-eslint解析.vue文件中的JavaScript部分
parser: 'vue-eslint-parser',
parserOptions: {
parser: 'babel-eslint',
},
rules: {
// JavaScript代码的ESLint规则
}
}
]
};
关键改进:
立即学习“前端免费学习笔记（深入）”；
- 使用
vue-eslint-parser解析.vue文件，并分别指定@typescript-eslint/parser和babel-eslint来解析TypeScript和JavaScript代码。 - 添加
parserOptions: { extraFileExtensions: ['.vue'] }到TypeScript的overrides中，这使得@typescript-eslint/parser能够识别并解析.vue文件，但仅处理其中lang="ts"的部分。
注意事项
- 确保已安装所有必要依赖：
@typescript-eslint/parser,vue-eslint-parser,babel-eslint。 - 根据项目需求调整ESLint规则。不当的规则配置可能影响代码运行。
通过此配置，ESLint将精准地只检查lang="ts"的Vue组件代码，从而在渐进式迁移过程中保持代码质量和效率。
