【vue3】vue3项目中eslint+prettier 统一代码风格_vue3 eslint
文章目录
vue3项目中eslint+prettier 统一代码风格
准备
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）可以实时检查
使用
vite构建vue3新项目
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-checkconst { 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.ts4.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.测试，修改文件中代码缩进，自动保存，代码格式会自动调整。
