vue项目代码规范依赖eslint、prettier、stylelint三工具协同：eslint检测js/ts/vue语法与逻辑错误，prettier统一代码格式，stylelint专查css/scss样式问题，并通过husky+lint-staged实现提交前自动校验修复。

Vue 项目代码规范检查主要靠三类工具协同工作：ESLint 负责语法与逻辑问题检测，Prettier 统一代码格式，Stylelint 专管样式部分。它们不是互斥的，而是各司其职、配合使用。

ESLint：查错+规范双保障

它是 Vue 项目最核心的静态检查工具，能识别未定义变量、潜在错误、不符合团队约定的写法等。要让它真正支持 .vue 文件，必须安装并启用 eslint-plugin-vue 插件，并在配置中引入官方推荐规则，比如：

• "extends": ["plugin:vue/essential"]（基础模板校验）
• 或更严格的 "plugin:vue/recommended"（含最佳实践）
• 搭配 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin 支持 TypeScript

命令行运行示例：eslint --ext .js,.ts,.vue src/

Prettier：专注格式，不碰逻辑

它不管变量有没有声明、函数有没有返回值，只负责把代码“排版”得整齐统一——缩进、引号、括号换行、分号有无等。和 ESLint 配合时，通常用 eslint-plugin-prettier 把 Prettier 规则当作 ESLint 的一条规则来执行，避免冲突。

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

• 推荐在 VSCode 中开启保存时自动格式化："editor.formatOnSave": true
• 同时启用 ESLint 自动修复："editor.codeActionsOnSave": { "source.fixAll.eslint": true }
• 确保 prettier 是默认 formatter，尤其对 [vue] 语言做单独配置

Stylelint：守住样式底线

Vue 单文件组件中的 <style></style> 区块需要独立检查。Stylelint 可验证 CSS/Sass/SCSS 语法、BEM 命名、单位一致性、颜色变量使用等。

• 安装后配置 .stylelintrc.js，指定检查范围如 **/*.vue
• 命令行直接运行：stylelint src/**/*.{vue,css,scss}
• 也可集成进 Webpack，用 stylelint-webpack-plugin 实现保存即校验

提交前自动拦截：lint-staged + husky

光靠手动检查容易遗漏。借助 husky 注册 Git hooks，再用 lint-staged 只处理暂存区文件，可做到：

• 执行 git add 后，自动对新暂存的 .vue/.js/.ts 文件跑 ESLint + Prettier 修复
• 失败则中断提交，强制开发者修正问题
• 避免全量扫描，速度快、体验轻量

典型配置在 package.json 中：

"lint-staged": { "*.?(js|ts|vue)": ["eslint --fix", "prettier --write"] }

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！