配置ESLint仅对Vue文件中lang=ts的内容进行检测

要配置 ESLint 仅对 Vue 文件中 lang="ts" 的内容进行检测，可以按照以下步骤操作：

1. 安装必要的依赖

确保你已经安装了以下依赖：

npm install eslint eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

2. 配置 .eslintrc.js 文件

在你的项目根目录下，创建或更新 .eslintrc.js 文件，配置 ESLint 仅对 Vue 文件中的 lang="ts" 部分进行检查。你可以使用以下配置：

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: ['vue', '@typescript-eslint'],
  extends: [
    'plugin:vue/vue3-recommended', // 或者根据你的 Vue 版本选择对应的配置
    'plugin:@typescript-eslint/recommended',
  ],
  overrides: [
    {
      // 仅对 .vue 文件进行检查
      files: ['*.vue'],
      parser: 'vue-eslint-parser',
      parserOptions: {
        parser: '@typescript-eslint/parser',
        extraFileExtensions: ['.vue'],
      },
      rules: {
        // 仅对 lang="ts" 的部分启用 TypeScript 检查
        '@typescript-eslint/explicit-module-boundary-types': 'off',
        '@typescript-eslint/no-explicit-any': 'warn',
        // 在这里添加更多的 TypeScript 规则
      },
    },
  ],
  rules: {
    // 其他全局 ESLint 规则
  },
};

3. 配置 eslint-plugin-vue

确保在 .eslintrc.js 文件中配置了 eslint-plugin-vue 插件，它会帮助 ESLint 解析 Vue 文件中的模板和脚本部分。

4. 配置 vue-eslint-parser

使用 vue-eslint-parser 作为 Vue 文件的解析器，它允许你将 Vue 文件中的 TypeScript 部分传递给 TypeScript ESLint 插件进行检测。

5. 在 Vue 文件中使用 lang="ts"

确保你的 Vue 文件中使用了 lang="ts"，例如：

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  // TypeScript 代码
});
</script>

通过这些步骤，你可以配置 ESLint 仅对 Vue 文件中 lang="ts" 的内容进行 TypeScript 代码的检测。