太长不看版

npm install eslint --save-dev
./node_modules/.bin/eslint --init
npm install vite-plugin-eslint -D
npm install -D --save-exact prettier
npm install -D eslint-plugin-prettier eslint-config-prettier

更改配置：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslint from 'vite-plugin-eslint'	// 引入
export default defineConfig({
plugins: [vue(), eslint()]	// 添加eslint()
})

// .eslintrc.js
module.exports = {
...
parser: "vue-eslint-parser",
extends: [
'prettier'
// 只保留prettier规则或添加到数组最后
],
plugins: [
...
'prettier'	// 添加
],
rules: {
"prettier/prettier": "error"	// 开启prettier规则
},
};

首先初始化一个基于Vite+Vue3+TS的项目

npm create vite@latest

参考文档
根据需要选择对应的配置项
npm安装不成功可以使用cnpm或配置淘宝镜像，下同
推荐配置淘宝镜像

安装Eslint

npm install eslint --save-dev

参考文档

初始化Eslint:

./node_modules/.bin/eslint --init

根据需要选择配置项，以下是我选择的参数，给予参考：

You can also run this command directly using 'npm init @eslint/config'.
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · standard
√ What format do you want your config file to be in? · JavaScript
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · npm

配置完，项目的根目录出现新文件.eslintrc.js

安装兼容Vite的Eslint插件：

目的是使Eslint的错误提示信息能在VSCode的控制台中出现
参考文档

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

安装完成后在文件vite.config.ts中增加如下代码：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslint from 'vite-plugin-eslint'
export default defineConfig({
plugins: [vue(), eslint()]
})

安装prettier

参考文档

npm install --save-dev eslint-plugin-prettier // 兼容eslint的prettier插件
npm install --save-dev --save-exact prettier
npm install --save-dev eslint-config-prettier // 关闭全部不必要的或可能和Prettier发出冲突的ESLint规则

功能：Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.

安装完成后在文件.eslintrc.js中增加如下代码，以开启prettier规则：

{
"parser": "vue-eslint-parser",
"extends": ["prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}

"extends": ["prettier"] ：应用eslint-config-prettier配置, 关闭与prettier起冲突的Eslint规则.
"plugins": ["prettier"] ：注册插件
"prettier/prettier": "error"：在Eslint中开启prettier校验规则

常见错误

错误一：

error
The template root requires exactly one element
vue/no-multiple-template-root

原因：

是Vue3支持在template标签中存在多个根标签，而Vue2只支持一个。
默认的plugin:vue/essentialEslint规则不支持Vue3的多个根标签

解决办法：

删除extends数组中的除prettier以外的Eslint规则，如下

extends: [
'prettier'
]

最后可以选择删除多余的依赖，如项目中的eslint-config-standard

错误二：

error
Parsing error: Unexpected token <

原因：

模板的开发环境与ESLint当前的解析功能不兼容

解决办法：

在文件.eslintrc.js中添加解析配置项

module.exports = {
...
parser: "vue-eslint-parser",
...
}

错误三：

error
Delete `␍`
prettier/prettier

原因：

在window系统中，默认换行符是回车符CRLF(carriage-return character)。这时候我们本地的代码都是回车符，而prettier默认要求是LF

解决办法：

在VSCode底部的CRLF改为LF行尾序列

至此配置完成，在VSCode中安装Prettier插件即可格式化文档

最后

以上就是开朗牛排为你收集整理的在Vite+Vue3+TypeScript项目中，配置Eslint+Prettier太长不看版首先初始化一个基于Vite+Vue3+TS的项目安装Eslint安装prettier常见错误至此配置完成，在VSCode中安装Prettier插件即可格式化文档的全部内容，希望文章能够帮你解决在Vite+Vue3+TypeScript项目中，配置Eslint+Prettier太长不看版首先初始化一个基于Vite+Vue3+TS的项目安装Eslint安装prettier常见错误至此配置完成，在VSCode中安装Prettier插件即可格式化文档所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。