如何让ESLint只检测Vue文件中的TypeScript？

本文介绍如何配置ESLint，仅检查Vue项目中使用TypeScript (lang="ts") 的`.vue`文件，避免对JavaScript代码进行误判，从而实现平滑的渐进式TypeScript迁移。通过巧妙运用ESLint的`overrides`配置和`excludedFiles`属性，分别定义针对TypeScript和JavaScript的规则，并有效避免规则冲突和重复检查。 文章详细讲解了配置方法，并强调了安装必要依赖包（eslint, vue-eslint-parser, @typescript-eslint/@parser）的重要性，为Vue项目中TypeScript的集成提供了一种高效的解决方案。

精准配置ESLint，仅检查Vue组件中的TypeScript代码

在逐步将老项目迁移到TypeScript的过程中，如何配置ESLint只检查.vue文件中使用TypeScript ( lang="ts" ) 的部分，而忽略JavaScript代码，是一个常见的难题。本文提供一种有效的ESLint配置方案，避免overrides配置的常见误区。

首先，在.eslintrc.js文件中进行如下配置：

module.exports = {
  // ...其他配置...
  overrides: [
    {
      files: ['*.vue'],
      parser: 'vue-eslint-parser',
      parserOptions: {
        parser: '@typescript-eslint/parser',
      },
      rules: {
        // TypeScript相关的ESLint规则
      },
    },
    {
      files: ['*.vue'],
      //关键：排除所有.vue文件，避免重复检查
      excludedFiles: ['**/*.vue'], 
      parser: 'vue-eslint-parser',
      parserOptions: {
        parser: 'espree',
        ecmaVersion: 2020,
        sourceType: 'module',
      },
      rules: {
        // JavaScript相关的ESLint规则 (不会应用于TypeScript代码)
      },
    },
  ],
};

此配置利用overrides定义两套规则：第一套针对.vue文件中的TypeScript代码；第二套看似也针对.vue文件，但通过excludedFiles巧妙地排除了所有.vue文件，从而确保其规则只作用于非.vue文件，避免与第一套规则冲突，并防止对TypeScript代码进行重复检查。

确保你的.vue文件正确使用lang="ts"属性：

<template></template><script lang="ts">
// TypeScript代码
</script><style scoped>
/* 样式代码 */
</style>

通过以上配置，ESLint将只对带有lang="ts"的标签内的TypeScript代码进行检查，而不会干扰项目中的JavaScript代码。 记住安装必要的依赖包：eslint, vue-eslint-parser, @typescript-eslint/parser，并正确初始化ESLint配置文件。 此方法确保了渐进式TypeScript迁移的平滑过渡。

到这里，我们也就讲完了《如何让ESLint只检测Vue文件中的TypeScript？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！