ESlint Typescript Vite 缺少 Lint - TypeScript 显示

在使用ESLint、TypeScript和Vite的过程中，有些程序员会发现代码上没有显示 Lint - TypeScript，这是什么原因？这篇文章将介绍一些可能的原因和解决方案。

1. 缺少配置文件

如果你没有在项目中添加 .eslintrc 配置文件，那么ESLint可能会忽略TypeScript文件并不会显示 Lint - TypeScript。你可以在项目根目录下添加 .eslintrc.js 或 .eslintrc.json 文件，然后根据你的项目需求进行配置。

例如，下面是一个 .eslintrc.js 文件的示例，它启用了TypeScript检查：

module.exports = {
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  rules: {
    // 自定义规则
  },
};

2. 缺少依赖包

如果你在项目中没有安装必要的依赖包，那么ESLint也可能会忽略TypeScript文件并不会显示 Lint - TypeScript。你需要在项目的根目录下运行以下命令来安装这些依赖包：

npm i -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

3. 配置Vite

如果你使用的是Vite，那么还需要在 vite.config.js 中进行如下配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import eslintPlugin from 'vite-plugin-eslint';

// 如果你同时使用了 Prettier 插件，
// 则 eslintPlugin 应该放在 prettierPlugin 之前。
export default defineConfig({
  plugins: [
    vue(),
    eslintPlugin({
      // ⚠️ 参数会被展开传递给 @typescript-eslint/parser
      cache: true,
      formatter: "stylish",
      eslint: {
        // 以下是 @typescript-eslint/parser 的设置
        parserOptions: {
          tsconfigRootDir: __dirname,
          project: ['./tsconfig.json'],
        },
        // 以下是 @typescript-eslint/eslint-plugin 的设置
        extensions: ['.ts', '.tsx'],
        rules: {
          // 自定义规则
        },
      },
    }),
    // 安装和配置 Prettier 插件之后，添加以下行即可。
    // prettierPlugin()
  ],
  // 其他 Vite 配置
});

以上是配置 vite-plugin-eslint 的方法，eslint 的配置通过 eslintConfig 选项配置，同样可使用 .eslintrc 文件作为配置。

4. 关于VSCode

如果你在VSCode中使用了ESLint插件，那么你可能需要在你的 .vscode/settings.json 文件中添加以下配置，以便ESLint能够正确地运行：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

总结

如果你的代码上没有显示 Lint - TypeScript，那么可能是由于缺少配置文件或依赖包、缺少Vite配置或VSCode相关配置。按照上述方法进行相应的设置即可解决这个问题。