ESLint在Vue3 + TypeScript中的配置与使用方法

前言

ESLint 是一个用于 JavaScript/TypeScript 代码的静态代码分析工具。它的核心作用是：在代码运行之前，自动检查并发现代码中的错误、潜在问题，以及强制执行统一的代码风格规范

1.为什么需要 ESLint？—— 解决什么问题？

   比如张三喜欢用单引号，李四喜欢用双引号

   王五写if语句不加花括号 {}，赵六每次都加

   有人定义了变量却没用，有人调用了不存在的函数

   .......

   这些问题会导致代码混乱、隐藏的bug、协作低效 等问题

   ESLint 就是为了解决这些问题而生的，它通过一套可配置的规则，自动将上述所有问题标准化

2.工作原理

3.1 解析：  将你的 JavaScript 代码解析成一个抽象语法树。这是一种用树状结构来表示代码语       法的方法，便于程序分析。

   3.2 遍历与检测：ESLint 携带一组规则，去遍历这颗 AST 树

• 例如，它有一条规则叫 quotes，规定字符串必须用单引号。

• 当它遍历到 ‘World’ 这个节点时，发现用的是单引号 ，通过。

• 如果它发现代码里用的是 “World”（双引号），规则就会被触发。

   3.3 报告：ESLint 将所有触发的规则，以错误或警告的形式输出给你。

3.配置与使用

//安装eslint
npm install eslint --save-dev

//自动生成配置文件  配置如下
npm init @eslint/config

//eslint.config.ts文件

import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
import { defineConfig } from "eslint/config";

export default defineConfig([
  // 1. 通用 JavaScript 规则
  { 
    files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"], //匹配所有 JS, TS, Vue 文件
    plugins: { js }, 
    extends: ["js/recommended"], // 使用 ESLint 官方推荐的规则集，很多规则配置好的，就不需要一个个写了，官方地址：https://eslint.org/docs/latest/rules/
    languageOptions: { 
      globals: globals.browser // 声明浏览器全局变量，如 window, document
    } 
  },
  // 2. TypeScript 特定规则
  tseslint.configs.recommended,// 应用 TypeScript-ESLint 的推荐规则
  // 3. Vue 特定规则
  pluginVue.configs["flat/essential"],// 应用 Vue 插件的核心规则（适配 Flat Config）
  // 4. 让 Vue 文件中的 <script> 标签能被 TypeScript 解析器正确处理
  { 
    files: ["**/*.vue"], 
    languageOptions: {
       parserOptions: { 
        parser: tseslint.parser // 告诉 Vue 插件，用 TypeScript 的解析器去解析 <script> 标签里的内容
      } 
    } 
  },
]);

安装eslint插件  --自动检验规则

示例1：配置一个semi规则(建议把自定义规则写在最后，下拉滚到底可查看如何写到最后)

• 第一个值 "error"：规则的错误级别。"error" (或 2) 表示会报错并阻止程序（比如 git pre-commit hook）；"warn" (或 1) 表示只是警告；"off" (或 0) 表示关闭该规则。
• 第二个值 "always"：规则的选项。"always" 表示必须使用分号；"never" 表示禁止使用分号。

当下面这行代码没有写分号时  就会报红

示例2：关闭某个规则

 no-explicit-any 规则会警告你：“你正在使用一个不安全的类型，这可能会隐藏潜在的 bug

如果你想关闭掉这个规则就可以这样配置(不推荐)

"@typescript-eslint/no-explicit-any": "off"

4.ESLint 配合 Vite 设置更多规则

安装
npm install vite-plugin-eslint --save-dev

在vite.config.ts中配置

去掉 ts 中部分 分号，npm run dev运行时就会报错

5.注意

1. 建议把自定义规则配置在最后，这样就能覆盖前面的规则

2. ### 添加基于Typescript的特殊规则组 

@vue/eslint-config-typescript插件是用来验证ts语法(比如 ts 中的一些符号会报错，如泛型的括号)

在eslint.config.ts配置文件中的extends中添加上 @vue/eslint-config-typescript即可解决

但是在现代的 Vue 3 + Ts 项目中，我们不再使用它，而是使用配置文件里的 typescript-eslint 

import tseslint from "typescript-eslint";

总结 

到此这篇关于ESLint在Vue3+TypeScript中的配置与使用方法的文章就介绍到这了,更多相关Vue3+TS中配置使用ESLint内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！