漫谈 - 我如何在 Vue 项目架构中使用 ESLint & Prettier
前言
在前端开发中，我们经常需要在一个项目中协作完成的时候需要考虑代码质量的问题。代码风格和规范不统一往往会导致团队协作效率下降，增加代码维护成本，造成不必要的问题。因此，在前端项目构建中，使用相关的工具进行代码检查和自动修复是非常有好处的。
在 Vue 项目中，ESLint & Prettier 组合是一种比较好的选择，可以帮助开发者保持代码风格一致，减少错误代码提交和增加代码可读性。在下面的文章中，我将展示如何在 Vue 项目中使用 ESLint 和 Prettier 实现代码规范化，从而提高前端工程师的开发效率。
一、什么是 ESLint & Prettier？
如果您还不了解 ESLint & Prettier，那么在这里我们简单介绍一下它们的主要功能。
- ESLint
ESLint 是一个开源的 JavaScript 语法检查工具，它用于检查代码中潜在的问题。通过配置不同的规则，可以检查出潜在的语法错误、代码风格问题、错误的变量使用以及未使用代码等问题。ESLint可以与大多数代码编辑器配合使用，可以检查代码中的问题并期望开发人员进行修复。
- Prettier
Prettier 是一个代码格式化工具，它可以自动地解决代码格式问题，从而使代码看起来更加美观一致。相比较于 ESLint，Prettier 更像是一个自动化的工具，让开发者不用考虑代码风格问题，用更加专业的格式化规则来保证代码的可读性和可维护性。
二、如何配置 ESLint 和 Prettier？
下面我们将介绍如何在 Vue 项目中配置 ESLint 和 Prettier。
- 安装 ESLint 插件和配置文件
首先，我们需要在项目中安装 ESLint 的插件和配置文件。可以使用下面的命令来安装：
npm install eslint eslint-plugin-vue --save-dev
npm install eslint-config-prettier eslint-plugin-prettier --save-dev
接下来，需要在项目根目录下新增一个 .eslintrc.js 文件，配置文件可以如下：
module.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/essential', '@vue/standard', '@vue/prettier' ], rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' }, parserOptions: { parser: 'babel-eslint' } }
这个文件中包含了一些常见的配置项，其中 'plugin:vue/essential', '@vue/standard', '@vue/prettier' 是预设的语法规则。eslint-config-prettier 和 eslint-plugin-prettier 是和 Prettier 配合使用的，这里我们将 ESLint 的预设规则和 Prettier 的规则进行整合。
- 配置 Prettier
接下来，在项目根目录下新增一个 .prettierrc.js 文件，配置文件可以如下：
module.exports = { semi: false, singleQuote: true, bracketSpacing: true, arrowParens: 'always', trailingComma: 'none' }
这个 Prettier 配置文件中包含了一些常见的代码格式化选项。其中，semi 选项设置为 false 表示在语句结束处不需要添加分号；singleQuote 设为 true 标识使用单引号；bracketSpacing 选项表示花括号前后添加空格；arrowParens 设置为 always，表示箭头函数中始终添加圆括号；trailingComma 选项表示不需要在最后一行添加逗号。
三、如何使用 ESLint & Prettier ？
配置完成之后，我们就可以在 Vue 项目中使用 ESLint 和 Prettier 了。
- 在 VSCode 中配置 ESLint
VSCode 是一款非常优秀的开源代码编辑器，我们可以使用它来配置 ESLint。安装 ESLint 插件后，在 VSCode 的用户设置中，配置如下信息：
{ "editor.formatOnPaste": true, "editor.formatOnSave": true, "editor.formatOnType": false, "editor.defaultFormatter": "esbenp.prettier-vscode", "eslint.enable": true, "eslint.alwaysShowStatus": true, "eslint.validate": [ "javascript", "javascriptreact", "vue", "typescript", "typescriptreact" ], "typescript.validate.enable": false, "javascript.validate.enable": false, "vetur.validation.template": false, "vetur.validation.interpolation": false, }
以上的配置可以实现以下功能：
- 每次粘贴时格式化代码
- 每次保存时格式化代码
- 配置 Prettier 作为默认格式化器
- 开启 ESLint 校验
- 禁用 VSCode 自身的校验
- 在 VSCode 中使用插件
如果想在 VSCode 中使用 Prettier 插件进行格式化代码，可以先在 VSCode 中安装 Prettier 插件。然后可以使用 Ctrl + Shift + P 或者 Cmd + Shift + P 快捷键，打开命令面板，输入“ Format Document ”，即可使用 Prettier 进行代码格式化。
- 使用 ESLint & Prettier 进行代码规范化
配置完成之后，我们就可以开始使用 ESLint & Prettier 对代码进行规范化了，可以使用下面的命令将代码格式化：
eslint --fix FILE_NAME.js
如果在 VSCode 中进行格式化，可以使用 Ctrl + Shift + I 或者 Cmd + Shift + I 快捷键进行格式化（前提是配置了 Format On Save 选项）。
四、总结
上面的文章我们详细介绍了如何在 Vue 项目中使用 ESLint & Prettier 进行代码规范化。使用 ESLint & Prettier 能够帮助开发者保证代码的质量，使得代码风格更加统一，从而提高前端项目的质量和开发效率。同时，在 VSCode 中配合使用 ESLint & Prettier 能够更加方便地进行代码格式化，提高代码编写效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a7d01448841e98944672bc