基于vue3 + TS项目中安装ESLint工具_eslint-plugin-vue 配置

官方资料：
eslint-plugin-vue 官网

eslint 官网

eslint getting started

1. 安装eslint 和 vue中eslint插件

npm install --save-dev eslint eslint-plugin-vue
1

2. 初始化eslint配置文件

npm init @eslint/config
1

命令选项参考如下：

执行完命令后，根目录下生成.eslintrc.cjs文件

3. 终端中运行 npm run lint 命令来检测代码

在项目package.json中添加下面的脚本

"scripts": {
    "lint": "eslint --ext .js,.vue src --fix"
  }
1
2
3

在终端运行npm run link

npm run link

> vue3-app@0.0.0 lint
> eslint --ext .js,.vue src --fix "--fix"


E:\新建文件夹\vue3-app\src\App.vue
  2:8  error  'HelloWorld' is defined but never used  @typescript-eslint/no-unused-vars
  4:1  error  Unexpected console statement            no-console
  8:1  error  The template requires child element     vue/valid-template-root

✖ 3 problems (3 errors, 0 warnings)
1
2
3
4
5
6
7
8
9
10
11
12

4. 添加.eslintignore文件

在根目录下添加.eslintignore 文件，内容参考如下：

*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
.eslintrc.*
/src/mock/*
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

5 解决eslint和prettier冲突

安装prettier、eslint-config-prettier、eslint-plugin-prettier

// 安装依赖
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

// 配置 .eslintrc.cjs
{
	...
	extends: [
		"eslint:recommended",
	    "plugin:@typescript-eslint/recommended",
	    "plugin:vue/vue3-essential",
	    "plugin:prettier/recommended" // 添加该配置
	]
	...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

• eslint-config-prettier: 关闭eslint中与prettier相互冲突的规则
• eslint-plugin-prettier: 赋予eslint用prettier格式化代码的能力