vue3项目中eslint+prettier统一代码风格方式
作者：weixin_45658815
准备
VS Code 插件
- Volar（推荐用于 Vue 3）
- ESLint
- Prettier - Code formatter
一、eslint
介绍
ESLint 是一个 JavaScript 和 TypeScript 代码的语法规则和代码风格检查工具，可以帮助你：
- 发现潜在错误（如变量未定义、函数重复定义等）
- 统一代码风格（比如强制使用单引号、缩进为 2 个空格等）
- 提高代码质量（比如提示不要使用 ==，而应该用 ===）
ESLint 会根据你配置的规则（eslint.config.js或 .eslintrc 文件）扫描代码，然后告诉你哪里不符合这些规则。
例如：
const a = "hello" console.log(a)
如果 ESLint 配置了以下规则：
{
"rules": {
"semi": ["error", "always"], // 强制加分号
"quotes": ["error", "single"] // 强制使用单引号
}
}它会提示你：
- 应该用单引号：“hello” → ‘hello’
- 每行结尾要加分号
为什么要用 ESLint？
- 团队开发中可以统一代码风格
- 早发现低级错误，避免运行时报错
- 配合 IDE（如 VSCode）或 Git hook（如 Husky）可以实时检查
使用
1.修改包配置文件packge.json依赖如下
{
"name": "kaishu-ui-admin-vue3-master", // 项目名称，自行修改
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vue-tsc -b && vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "3.5.12"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.4",
"typescript": "5.3.3",
"vite": "4.5.11",
"vue-tsc": "^1.8.27",
"@typescript-eslint/eslint-plugin": "^7.1.0",
"@typescript-eslint/parser": "^7.1.0",
"@unocss/eslint-config": "^0.57.4",
"@unocss/eslint-plugin": "66.1.0-beta.5",
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-define-config": "^2.1.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-vue": "^9.22.0"
}
}2.下载依赖，pnpm i
3.新建eslint配置文件，.eslintrc.js 与 .eslintignore，内容如下
.eslintrc.js文件
// @ts-check
const { defineConfig } = require('eslint-define-config')
module.exports = defineConfig({
// 根配置，ESLint 将停止在父目录中查找配置文件
root: true,
// 设置脚本的运行环境
env: {
browser: true, // 浏览器全局变量
node: true, // Node.js 全局变量和作用域
es6: true // 启用 ES6 语法支持
},
// 使用 Vue 的 ESLint 解析器
parser: 'vue-eslint-parser',
// 解析器选项
parserOptions: {
parser: '@typescript-eslint/parser', // 解析 TypeScript
ecmaVersion: 2020, // 使用 ES2020 语法
sourceType: 'module', // 使用 ECMAScript 模块
ecmaFeatures: {
jsx: true // 允许 JSX
}
},
// 继承的规则集
extends: [
'plugin:vue/vue3-recommended', // Vue 3 推荐规则
'plugin:@typescript-eslint/recommended', // TypeScript 推荐规则
'plugin:prettier/recommended' // Prettier 推荐规则(解决与 ESLint 的冲突)
],
// 自定义规则
rules: {
"semi": ["error", "never"], // 禁止使用分号
'prettier/prettier': 'warn', // 关闭 prettier 的 ESLint 校验
}
}).eslintignore文件
/build/ /config/ /dist/ /*.js /test/unit/coverage/ /node_modules/* /dist* /src/main.ts
4.packge.json中新增运行指令
"scripts": {
...
"lint": "eslint --ext .js,.ts,.vue ./src" //eslint检查错误指令
},5.测试，在App.vue文件中某代码行后面加上;，运行命令pnpm run lint，可以看到控制台报错表明App.vue文件中有额外的分号，如下
D:\kaishu\kaishu-project\kaishu-ui-admin-vue3-master\src\App.vue
2:53 error Extra semicolon semi
二、prettier
介绍
Prettier 是一个代码格式化工具，用于自动统一和美化代码风格，支持多种编程语言（如 JavaScript、TypeScript、HTML、CSS、JSON、Markdown 等）。它的核心目标是通过自动格式化代码来减少开发人员在代码风格上的争论，让大家专注于代码本身的逻辑和功能。
Prettier 的主要特点
- 一致的代码风格：不依赖团队成员的个人格式化习惯，所有代码格式统一。
- 开箱即用：配置简单，也可以使用默认配置快速上手。
- 自动格式化：保存文件时自动格式化，无需手动对齐、缩进。
- 多语言支持：支持 JS/TS、HTML、CSS、JSON、Markdown、YAML 等。
- 集成方便：可以与 VS Code、WebStorm、Git Hooks、CI 工具集成。
使用
1.packge.json新增依赖
"devDependencies": {
...
"prettier": "^3.2.5",
"prettier-eslint": "^16.3.0"
}2.下载依赖，pnpm i
3.在./vscode文件下新建setting.json文件，该文件会覆盖vscode自带setting.json文件，文件内容配置如下。这样的话检验只开一个vscode窗口，不然会冲突
{
"workbench.colorTheme": "Quiet Light", // 风格
"window.zoomLevel": 1, // 整个窗口显示缩放级别
"git.autofetch": true, // 自动拉取
"editor.fontSize": 18, // 编辑器内字体大小
"editor.formatOnSave": true, // 保存时格式化
"editor.defaultFormatter": "esbenp.prettier-vscode", // 设置默认格式化器为 Prettier
}ps:eslint 中的prettier/prettier属性需开放，不能为off，改为warn/error
4.测试，修改文件中代码缩进，自动保存，代码格式会自动调整。
总结
| 方面 | ESLint | Prettier |
|---|---|---|
| 主要目的 | 代码质量和规范检查（代码风格、潜在错误） | 代码格式化（自动统一代码排版） |
| 功能 | - 发现潜在错误（如未定义变量、死代码） | - 自动调整缩进、换行、空格、分号等格式 |
| - 规范代码风格（如变量命名、语句顺序） | - 几乎不关注代码逻辑，只关注“外观” | |
| 规则灵活性 | 规则丰富，且可自定义 | 规则固定，配置项很少，注重统一 |
| 处理方式 | 代码检查工具，发现问题并提示（可自动修复部分） | 代码格式化工具，直接修改代码样式 |
| 应用范围 | 代码风格、最佳实践、潜在错误、复杂规则 | 代码缩进、换行、括号位置、引号类型等格式 |
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。