VUE3项目配置

用户93816912553602025-11-21 13:40

一、安装ESLint

1、安装ESLint

下载并安装ESLint。

pnpm create @eslint/config@latest

执行命令后，命令运行窗口会要求回答几个问题，回答完成后，就会在当前目录下生成eslint.config.ts配置文件，并且安装eslint相关的插件和依赖包。可以看到package.json文件发生了变化。

2、配置校验规则

打开eslint.config.ts配置文件。配置全局忽略文件。

javascript 复制代码

import { defineConfig, globalIgnores } from "eslint/config";

export default defineConfig([
  // 默认忽略node_modules
  globalIgnores(['dist/']),
  
  ...其他配置...
])

如果有个别需要校验的规则，可以放在rules模块中。

arduino 复制代码

export default defineConfig([
...其他配置...
    {
        rules: {
          "no-undef": "warn", //未定义的变量
          "no-var": "error", //要求使用let或const, 而不是var
        }
    }
    
])

3、校验并修复

在package.json文件中，找到scripts模块，增加如下配置：

json 复制代码

"scripts": {
    "lint": "eslint src",
    "fix": "eslint src --fix"
  },

在某个src文件夹下的vue文件或者ts文件中，写一段错误代码，比如 var a = 123。
执行命令 pnpm lint，会对src文件夹下的所有文件按照eslint.config.ts配置文件中配置的校验规则进行校验，在控制台打印出校验不通过的信息。
执行命令 pnpm fix会对部分错误代码进行自动修正。

并不是所有错误都能被自动修正。可以访问官网查看哪些错误能够被自动修正。