在Vue项目中如何仅对使用TypeScript的组件进行ESLint检测？

Vue项目中ESLint仅检测TypeScript组件的配置方法

在渐进式TypeScript改造Vue项目时，如何仅对已迁移为TypeScript的组件进行ESLint检测，而不影响原有JavaScript代码，是一个常见问题。本文提供一种有效的解决方案。

背景

项目迁移过程中，部分Vue组件的标签内容从JavaScript转换为TypeScript，并使用.ts或标识。 理想情况下，ESLint应智能识别并仅对TypeScript组件进行检查，避免对JavaScript代码产生误报。

解决方案

通过.eslintrc.js或.eslintrc.json文件的精确配置，可以实现此目标。以下示例配置展示了如何区分TypeScript和JavaScript组件：

module.exports = {
  // 其他ESLint通用配置...
  overrides: [
    {
      files: ['*.vue'],
      parser: 'vue-eslint-parser',
      parserOptions: {
        parser: '@typescript-eslint/parser',
        extraFileExtensions: ['.vue'], // 关键：支持.vue文件解析
        ecmaFeatures: {
          jsx: true,
        },
      },
      // TypeScript规则
      rules: {
        // ...你的TypeScript ESLint规则...
      },
    },
    {
      files: ['*.vue'],
      excludedFiles: ['*.vue?(ts)'], // 关键：排除已处理的.vue文件
      parser: 'vue-eslint-parser',
      parserOptions: {
        parser: 'babel-eslint',
        ecmaVersion: 2018,
        sourceType: 'module',
      },
      // JavaScript规则
      rules: {
        // ...你的JavaScript ESLint规则...
      },
    },
  ],
};

此配置包含两个overrides：

立即学习“前端免费学习笔记（深入）”；

Civitai

AI艺术分享平台！海量SD资源和开源模型。

下载

1. 第一个overrides: 针对所有.vue文件，使用vue-eslint-parser解析，并指定@typescript-eslint/parser作为内部解析器。extraFileExtensions确保正确解析.vue文件中的TypeScript代码。 此部分应用TypeScript相关的ESLint规则。

2. 第二个overrides: 同样针对所有.vue文件，但excludedFiles排除所有已包含TypeScript的.vue文件（.vue?(ts)匹配.vue和.vue.ts文件）。 此部分使用babel-eslint解析JavaScript代码，并应用JavaScript相关的ESLint规则。

通过这种双重overrides配置，ESLint能够准确区分并分别应用TypeScript和JavaScript规则，从而只对TypeScript组件进行TypeScript相关的代码检查。 根据项目实际情况，需要调整规则和配置，但此方法提供了一个可靠的起点。