前言
在前端开发过程中，代码规范与风格的统一化是十分重要的，既能提高代码可读性，还能减少冲突与错误。ESlint 和 Prettier 是目前比较主流的代码规范化及代码格式化工具，它们都有着高度的定制化能力。因而本篇文章将介绍如何配置 ESlint 和 Prettier。
安装
首先，需要全局安装 ESLint 和 Prettier：
npm i eslint prettier -g
配置 ESLint
接下来，我们需要在项目中配置 ESLint。需要注意的是，在进行代码规范化和格式化工作时，一定要先对 ESLint 的规则进行配置，才能保证 Prettier 的格式化能够在 ESLint 上运行。
在项目根目录下，创建 .eslintrc.js 文件，并加入以下代码，此代码为官方默认推荐配置。
-- -------------------- ---- ------- -------------- - - ---- - -------- ----- ---- ----- ----- ----- -- -------- ---------------------- ---------------------------- -------- - -------- ----------- ------------------ ----------- -- ------- --------------- -------------- - ------------- - ---- ----- -- ------------ ----- ----------- --------- -- -------- ---------- ------ --- --展开代码
env：指定了我们代码的执行环境，包括浏览器、Node.js、es6 等，它们共同影响了 ESLint 对某些全局变量的检查方式。browser：浏览器环境全局变量。es6：ECMAScript 6 全局变量。node：Node.js 全局变量和 Node.js 作用域。
extends：继承 ESLint 内置规则。parser：指定解析器为 Babel 解析器，以支持 ES6 语法。parserOptions：指定解析器的相关设置。ecmaFeatures：指定解析器是否支持特定的语法，例如 JSX。ecmaVersion：指定要使用的 ECMAScript 版本。sourceType：指定 JavaScript 脚本类型是 module 还是 scripts。
plugins：指定 ESLint 插件。rules：指定要使用的 ESLint 规则。
规则配置
在上面的配置文件中，我们没有指定具体的 ESLint 规则，但是通过配置 rules 我们可以对特定规则进行重写或关闭。例如，我们可以在这里禁用不必要的小括号：
module.exports = { // ... rules: { 'no-extra-parens': 'warn', }, };
在这个配置中，我们将 no-extra-parens 规则设置为 warn，表示该配置项为警告级别，即 ESLint 代码扫描时，当出现不必要的小括号时，会抛出警告。我们也可以选择将它设置为 error 级别，这样当出现不必要的小括号时，会抛出错误。
更为详细的规则配置请参考 ESLint 官方文档。
配置 Prettier
Prettier 的配置比较简单，只需要在项目根目录下，创建 .prettierrc.js 文件并添加以下代码即可完成配置。
module.exports = { singleQuote: true, trailingComma: 'es5', printWidth: 120, tabWidth: 2, };
其中:
singleQuote: 是否使用单引号。trailingComma: 结尾是否加上逗号。这里推荐使用 es5。printWidth: 每行代码长度限制。tabWidth: 一个 Tab 键的长度（默认为 2）。
更多关于 Prettier 的配置项请查阅其官方文档。
配置 Git Hooks
为了保证项目代码的规范性，我们要使用 Git Hooks 对代码提交前的规范检查。
首先，我们需要安装 husky：
npm i husky -D
在 package.json 中配置 Git Hook：
"husky": { "hooks": { "pre-commit": "lint-staged" } },
这里我们只使用 pre-commit 钩子，在代码提交前对 lint-staged 进行规范检查。
我们还需要安装一个工具包 lint-staged，它可以针对当前修改的文件，执行 Git Hook 的操作。
npm i lint-staged -D
配置 lint-staged 的操作：
"lint-staged": { "src/**/*.{js,jsx,ts,tsx}": [ "eslint --fix", "prettier --write", "git add" ] },
这个配置表示，在 src/**/*.{js,jsx,ts,tsx} 文件发生修改后，先进行 ESLint 格式化操作，然后进行 Prettier 格式化操作，并提交相关修改。
总结
以上是 ESLint 和 Prettier 的配置指南，我们希望本篇文章可以帮助您全部完成配置，并保障代码风格规范。另外，针对当前前端代码规范乱象，更加推荐对 Prettier 进行配置，以统一前端代码规范。 希望各位开发者，能够拥有更为一致的代码风格，进而加速项目开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64abf4a148841e98947e1937
