在Vue 3和Vite的组合中，使用ESLint进行代码规范检查是一个重要的实践，它有助于提高代码质量和可维护性。本文将为您提供在Vue 3 + Vite项目中配置ESLint的详细步骤，同时提供代码示例。
步骤一：创建新项目
首先，确保您已经安装了最新版本的Vue和Vite。使用以下命令创建一个新项目：
# 创建一个新的Vite项目
npm create vite my-vue-project
# 进入项目目录
cd my-vue-project
# 安装依赖
npm install步骤二：安装ESLint和相关插件
接下来，安装ESLint以及与Vue项目集成的相关插件：
npm install eslint @vue/eslint-config-app --save-dev步骤三：创建配置文件
在项目根目录下创建一个名为 .eslintrc.js 的文件，这将是ESLint的配置文件。在该文件中，引入Vue的配置：
// .eslintrc.js
module.exports = {
extends: [
'@vue/app'
],
// 可添加自定义规则和覆盖默认配置
rules: {
// 在这里添加你的规则
}
}步骤四：配置Vite插件
修改 vite.config.js 文件，添加 eslint 插件配置：
// vite.config.js
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
Vue(),
],
// 在这里添加eslint插件配置
esbuild: {
// ...
},
})步骤五：集成VSCode保存时自动修复
为了在保存文件时自动修复ESLint错误，您可以在VSCode中安装 "ESLint" 扩展，并将以下配置添加到项目的 settings.json 文件中：
// .vscode/settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}步骤六：运行项目
现在，您已经完成了ESLint的配置。运行您的Vite项目：
npm run dev如果有ESLint错误，您将在终端中看到相应的警告，并且VSCode会在保存文件时尝试自动修复。
通过遵循以上步骤，您已经成功将ESLint集成到Vue 3 + Vite项目中，以确保代码的一致性和质量。根据您的项目需求，您可以在 .eslintrc.js 文件中添加和调整规则。
步骤七：eslintrc.js的常用配置代码示例
// .eslintrc.js
module.exports = {
extends: [
'@vue/app'
],
rules: {
// 自定义规则可以在这里添加
// 禁止使用console
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// 禁止使用debugger
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// 使用2个空格缩进
'indent': ['error', 2],
// 单引号字符串
'quotes': ['error', 'single'],
// 结尾逗号
'comma-dangle': ['error', 'always-multiline'],
// 分号结尾
'semi': ['error', 'always'],
// 禁止不必要的括号
'no-extra-parens': 'error',
// 禁止在函数参数中出现重复命名
'no-dupe-args': 'error',
// 强制箭头函数的箭头前后使用一致的空格
'arrow-spacing': 'error',
// 禁止重复导入模块
'no-duplicate-imports': 'error',
// 禁止未使用过的变量
'no-unused-vars': 'error',
// 强制在花括号内使用一致的换行符
'object-curly-newline': ['error', { 'consistent': true }],
// 禁止出现多个空格
'no-multi-spaces': 'error',
// 强制在注释中 // 或 /* 使用一致的空格
'spaced-comment': ['error', 'always'],
}
}