在Vue项目中如何配置ESLint以仅检测lang="ts"的文件内容？-js教程-PHP中文网

在Vue项目中如何配置ESLint以仅检测lang="ts"的文件内容？

心靈之曲

发布： 2025-03-15 10:58:15

原创

688人浏览过

在vue项目中如何配置eslint以仅检测lang=

精准配置ESLint，仅检测Vue项目中lang="ts"的文件

在Vue项目进行TypeScript渐进式改造时，如何让ESLint只检查lang="ts"的Vue组件，而忽略JavaScript部分？本文提供解决方案。

背景

渐进式迁移到TypeScript时，需要ESLint保证代码质量，但同时避免干扰未迁移的JavaScript代码。

解决方案

直接使用overrides配置可能无法精准控制。以下配置能够有效区分并分别处理lang="ts"和JavaScript代码：

标贝悦读AI配音

在线文字转语音软件-专业的配音网站

查看详情

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"的部分。