基于vue3 + TS项目中安装ESLint工具

Xxxuaneer

已于 2024-03-04 21:00:01 修改

阅读量675

点赞数 11

分类专栏： vue3 文章标签： vue

于 2024-02-29 12:41:20 首次发布

本文链接：https://blog.csdn.net/XUANEER/article/details/136361214

版权

vue3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue.js项目中安装和配置ESLint插件，包括eslint-plugin-vue的安装、eslint配置文件的初始化、运行lint检查，以及如何处理eslint与prettier的冲突，提供了解决方案。

摘要由CSDN通过智能技术生成

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

eslint 官网

eslint getting started

1. 安装eslint 和 vue中eslint插件

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

2. 初始化eslint配置文件

npm init @eslint/config

命令选项参考如下：
在这里插入图片描述
执行完命令后，根目录下生成.eslintrc.cjs文件

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

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

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

在终端运行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)

4. 添加.eslintignore文件

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

*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
.eslintrc.*
/src/mock/*

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" // 添加该配置
	]
	...
}

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