Vite + vue3 eslint 配置

生成 vite + vue 项目

npm create vite@latest

安装 eslint

npm i eslint -D

初始化 eslintrc

npx eslint --init

 执行上述代码后根目录下会生成 .eslintrc.cjs 文件

module.exports = {
	'env': {
		'browser': true,
		'es2021': true,
		'node': true
	},
	'extends': [
		'eslint:recommended',
		'plugin:vue/vue3-essential'
	],
	'parserOptions': {
		'ecmaVersion': 12,
		'sourceType': 'module'
	},
	'plugins': [
		'vue'
	],
	'rules': {
	}
}

安装vite-plugin-eslint（eslint结合vite使用）

npm i vite-plugin-eslint -D

安装vite-plugin-eslint（eslint结合vite使用）

npm i eslint-plugin-vue -D

 VScode 安装 eslint 插件

如果以上操作都完成了  eslintrc.cjs 中的rules 也配置了，但是eslint 格式错误还是不展示，在 package.json 添加 `"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"` 后如下

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
 },

执行 npm run lint 后错误信息会在终端展示出来，那么代表你的 eslint 配置成功了。

最后 重新打开vscode 重启项目就可以正常显示 eslint 错误信息，

另：

在 vscode settings 文件中新增下面的配置 (ctrl + shift + p 搜索 settings 文件  修改配置如下)

{
  "workbench.colorTheme": "Default Dark+",
  "editor.codeActionsOnSave":{
    "source.fixAll.eslint":true
  },
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
}

这样保存 vue/js 文件错误就会自动修复