1.安装
pnpm add eslint@8.49.0 --save-dev
pnpm add -D @typescript-eslint/eslint-plugin
pnpm add -D @typescript-eslint/parser
pnpm add -D eslint-plugin-vue@9^ 只能是这个版本
pnpm add -D vue-eslint-parser
pnpm add -D eslint@8.49.0 @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-vue@9^ vue-eslint-parser
2.创建.eslintignore
node_modules
dist
/*
!src/
3. 创建.eslintrc.cjs
module.exports = {
root: true,
env: {
browser: true,
es2021: true,
node: true,
},
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser', // 这个用来解析
ecmaVersion: 2020,
sourceType: 'module',
ecmaFeatures: {
jsx: false,
},
},
extends: [
'plugin:vue/vue3-recommended',
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
],
plugins: ['vue', '@typescript-eslint'],
rules: {
// 你自定义的规则
quotes: ['error', 'single'],
},
}
4 创建lint-check.js
import { exec } from "child_process";
import chalk from "chalk";
exec("npx eslint src --ext .ts,.tsx,.vue --color", (error, stdout, stderr) => {
console.log(stdout); // 打印 eslint 输出
console.error(stderr); // 打印错误输出（如果有）
if (error) {
// ESLint 有错误或执行失败
console.log(chalk.bgYellow.bold("ESLint 检查发现问题，请查看上方错误信息！"));
} else {
// ESLint 没有错误
console.log(chalk.green.bold("ESLint 检查通过！🎉"));
}
});
5.添加执行命令
"lint": "node ./lint-check.js",
6.vscode 结合eslint插件配置
control + shift + p 输入open user seeting
// 开启 ESLint 插件
"eslint.enable": true,
// ESLint检查的目录
"eslint.workingDirectories": ["./src"],
//是否总是在状态栏显示 ESLint 的状态图标。
"eslint.alwaysShowStatus": true,
//是否在代码操作（code actions）弹出的提示里显示 ESLint 规则的文档链接。
"eslint.codeAction.showDocumentation": {
"enable": false
},
//ESLint 插件的调试开关
"eslint.debug": true,
// ESLint 校验文件类型，确保包含你写的语言
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"html"
],
// 让 ESLint 在打开文件时自动检测并提示错误
// onType 表示 ESLint 会在你每次输入代码时实时检测并显示问题
// onSave，表示只在保存文件时才运行 ESLint 检测。
"eslint.run": "onType"
6 重启
control + shift + p 输入 restart eslint
7.配置vscode
contrl/command + shift + P
open user setting(json)
配置如下
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
// 开启 ESLint 插件
"eslint.enable": true,
// ESLint检查的目录
"eslint.workingDirectories": ["./src"],
//是否总是在状态栏显示 ESLint 的状态图标。
"eslint.alwaysShowStatus": true,
//是否在代码操作（code actions）弹出的提示里显示 ESLint 规则的文档链接。
"eslint.codeAction.showDocumentation": {
"enable": false
},
//ESLint 插件的调试开关
"eslint.debug": true,
// ESLint 校验文件类型，确保包含你写的语言
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"html"
],
// 让 ESLint 在打开文件时自动检测并提示错误
// onType 表示 ESLint 会在你每次输入代码时实时检测并显示问题
// onSave，表示只在保存文件时才运行 ESLint 检测。
"eslint.run": "onType"
8.prettier
安装 pnpm add -D eslint-plugin-prettier eslint-config-prettier
创建 .prettierrc
{
"singleQuote": true,
"semi": true,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 100,
"bracketSpacing": true,
"arrowParens": "avoid",
"endOfLine": "lf"
}
避免与eslint冲突在.eslintrc.cjs
在rules添加
// 让 ESLint 检查 Prettier 格式问题，配置需和 .prettierrc 一致
'prettier/prettier': [
'warn',
{
singleQuote: true,
semi: true,
tabWidth: 2,
trailingComma: 'es5',
printWidth: 100,
bracketSpacing: true,
arrowParens: 'avoid',
endOfLine: 'lf',
},
],
// 这里可以写其他 ESLint 规则，但不要重复格式规则，避免冲突
在extends添加
'plugin:prettier/recommended', // 集成 prettier，自动关闭格式冲突规则，并启用 prettier/prettier 规则
