简介
在前端开发中，代码规范是一个非常重要的部分。为了保证代码质量和可维护性，我们通常采用 Prettier 和 ESLint 两个工具来实现代码规范和格式化。Prettier 是一个代码格式化工具，可以帮助我们自动化地格式化代码。 ESLint 是一个 JavaScript 代码检查工具，可以帮助我们检查代码，提高代码质量。 本文将介绍如何整合 Prettier 和 ESLint，来使得我们的开发更加高效和规范。
安装 Prettier 和 ESLint
首先，我们需要在项目中安装 Prettier 和 ESLint，可以使用以下命令：
npm install prettier eslint eslint-config-prettier eslint-plugin-prettier --save-dev
其中，
prettier是 Prettier 工具；eslint是 ESLint 工具；eslint-config-prettier是用来禁用一些可能与 Prettier 冲突的 ESLint 规则；eslint-plugin-prettier是用来启用 Prettier 作为 ESLint 规则的一部分。
配置 ESLint
在项目中创建 .eslintrc.js 文件，配置 ESLint：
module.exports = {
extends: ['plugin:prettier/recommended'],
plugins: ['prettier'],
rules: {
'prettier/prettier': ['error', { endOfLine: 'auto' }],
// 自定义其他的规则
},
};其中，extends 指定了使用的 ESLint 规则配置，plugins 指定了使用的插件。这里我们使用了 eslint-plugin-prettier 和 eslint-config-prettier，这样就可以禁用一些与 Prettier 冲突的 ESLint 规则，同时启用 Prettier 作为 ESLint 规则的一部分。rules 是自定义的规则。这里我们启用了 prettier/prettier 规则，指定了 endOfLine 的值为自动检测，表示自动识别当前操作系统的换行符。
配置 Prettier
在项目根目录下创建 .prettierrc.js 文件，配置 Prettier：
module.exports = {
trailingComma: 'es5',
tabWidth: 2,
semi: true,
singleQuote: true,
};其中，trailingComma 指定对象字面量项尾部是否加逗号，可选值为 "es5" 或 "none"。tabWidth 指定缩进空格数。semi 指定是否强制加分号。singleQuote 指定是否使用单引号。
集成两者
我们可以使用 eslint-plugin-prettier 插件中的 prettier/prettier 规则来集成 Prettier，保证代码格式正确。同时，加入一个 pre-commit 钩子，在每次 commit 时自动运行 ESLint 和 Prettier，来保证代码规范和格式正确。
首先，安装 husky 和 lint-staged 这两个工具：
npm install husky lint-staged --save-dev
然后，在 package.json 中添加以下配置：
-- -------------------- ---- -------
-------- -
-------- -
------------- -------------
-
--
-------------- -
----------------- -
------- -------
--------- --------
-
-其中，husky 子属性中的 hooks 可以配置 git 钩子，这里我们将 pre-commit 钩子绑定到 lint-staged 上。lint-staged 中配置了要检查的文件以及相应的工具的命令，可以使用多个命令。这里我们执行了 ESLint 并使用 --fix 参数自动修复一些常规问题，并使用 prettier 来格式化 JS 文件。
示例代码
-- -------------------- ---- -------
-- ------------ --
-------------- - -
-------- --------------------------------
-------- -------------
------ -
-------------------- --------- - ---------- ------ ---
-- --------
--
--
-- -------------- --
-------------- - -
-------------- ------
--------- --
----- -----
------------ -----
--
-- ------------ --
-------- -
-------- -
------------- -------------
-
--
-------------- -
----------------- -
------- -------
--------- --------
-
-结论
本文介绍了如何整合 Prettier 和 ESLint，使得我们的前端开发更加高效和规范。通过配置 .eslintrc.js 文件和 .prettierrc.js 文件，并加入 husky 和 lint-staged，能够在每次 commit 时自动运行 ESLint 和 Prettier，来保证代码规范和格式正确。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674ac648f37365f50a19e0f0