在Vite+Vue3+TypeScript项目中，配置Eslint+Prettier
太长不看版
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行尾序列