# Vue-cli **代码质量** + **代码风格** * 版本 **vue2** 和 **vue3** 通用 * Eslint主检查代码质量: **使用方式有可能有问题** * Prettier检查代码风格:**风格不符合一定规则** > 通过代码质量检查不一定符合书写规范 * 参考文章 https://zhuanlan.zhihu.com/p/80574300 *** ### Manually select features 自定义模版 > 扩展:Default ([Vue 2] babel,eslint) eslint的配置会默认在pack.json中 #### 空格键选择所需内容,回车进行下一步 ![](https://img.kancloud.cn/f1/c5/f1c55555376aba8a5c7b22b889894fba_889x399.png) #### 选择vue版本 ![](https://img.kancloud.cn/df/5c/df5cc76fe238ea9eee14754a45b3a7fa_883x365.png) #### 选择代码格式标准 * 选择Eslint + Prettier ![](https://img.kancloud.cn/67/09/6709be37c24dfcea11552fdf3cb3cc5c_890x333.png) #### Eslint错误提示 * lint on save > 代码文件中有代码不符合 lint 规则时,会在 compile 阶段提示 warning。如果出现了语法错误,会直接在页面上显示 error * lint and fix on commit >代码除了语法错误导致的 error 外不会提示 warning。而是在当前项目进行 git commit 操作的时候,通过 githook,在 pre-commit 阶段执行 lint 和 fix 操作,自动帮我们把有语法错误的地方修改为符合规范。 ![](https://img.kancloud.cn/34/ab/34ab12cb0c84d71c458480068c2a9e1d_897x346.png) #### Eslint配置文件位置 ![](https://img.kancloud.cn/85/96/85964ed41ff2ec5848f95c3f48b3b5c2_860x265.png) * In dedicated config files 独立配置文件.eslintrc.js * In package.json #### 生成的package.json配置 ![](https://img.kancloud.cn/13/0c/130c03ae6cd584327c14c815614bb71e_715x174.png) #### 配置.eslintrc.js `'@vue/prettier'` 替换 `'plugin:prettier/recommended'`,将不符合prettier格式化的内容借助eslint进行错误警告 ![](https://img.kancloud.cn/30/f9/30f97dbc8c9b3f0218b680f2b797bbb5_922x305.png) > `prettier`是用于格式化代码的。而代码规范规则的设置和代码上的`warn`,`error`等提醒,则是`eslint`来实现的。 #### 配置完成后进行全体格式化 npm run lint 即 vue-cli-service lint ![](https://img.kancloud.cn/65/1c/651ce532f864e4e44c1acc3af84d209b_752x281.png)