在前端开发过程中，代码的风格和规范化对于代码的可读性和维护性是非常重要的。为此，我们常常使用 ESLint 工具来检测并修复代码中的语法和风格问题。
而在 ESLint 中，我们也可以使用 prettier 标准来做规范化。prettier 是一个代码格式化工具，它能够自动识别代码中的语法和格式问题，并给出相应的解决方案。那么，本文就来分享一下如何在 ESLint 中使用 prettier 标准来优化代码规范化。
安装 ESLint 和 prettier
在使用 ESLint 和 prettier 前，我们需要先进行安装。
# 全局安装 ESLint npm install -g eslint # 在项目中安装 ESLint 和 prettier npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev
上述命令中，我们分别安装了 ESLint 和 prettier，同时也需要安装额外的 eslint-config-prettier 和 eslint-plugin-prettier 工具，这两个工具分别用于将 ESLint 和 prettier 配置的规则统一起来。
对 ESLint 进行配置
接下来我们需要在项目中对 ESLint 进行配置，具体步骤如下：
初始化 ESLint
在项目的根目录下创建 .eslintrc.js，并使用以下命令进行初始化：
npx eslint --init
按照提示进行选择即可，这里我们选择：
- 使用配置文件
- JavaScript 模块（.eslintrc.js）
- 使用 airbnb 规则风格
- JavaScript
完成初始化后，可查看到在项目根目录下生成了 .eslintrc.js 文件，该文件包含了对 ESLint 规则的配置，同时也将 airbnb 规则风格引入。
配置 prettier
在项目根目录下创建 .prettierrc 文件，并进行相应的 prettier 配置。
// www.javascriptcn.com code example
{
"printWidth": 80, // 每行最大字数
"tabWidth": 2, // 缩进空格数
"useTabs": false, // 是否使用 tab 缩进
"semi": true, // 是否需要分号
"singleQuote": true, // 是否单引号
"quoteProps": "as-needed", // 属性引号
"jsxSingleQuote": false, // jsx 文件是否使用单引号
"trailingComma": "none", // 是否使用尾逗号
"bracketSpacing": true, // 对象括号前后添加空格
"jsxBracketSameLine": false, // jsx 文件中，> 符号是否与标签在同一行
"arrowParens": "always", // 箭头函数是否总是有括号（avoid 为有一个参数时无括号）
"rangeStart": 0, // 格式化的起始字符，默认从零开始
"rangeEnd": Infinity, // 格式化的结束字符，默认是无限大
"insertPragma": false, // 是否插入文档头部一行的 pragma 字符串
"requirePragma": false, // 是否要求文件开头包含一个 pragma 字符串
"proseWrap": "preserve" // 是否换行
}修改 .eslintrc.js 配置
在上述步骤完成之后，我们需要再次修改 .eslintrc.js 文件，添加 prettier 的配置。
// www.javascriptcn.com code example
module.exports = {
env: {
browser: true,
es6: true
},
extends: ['airbnb-base', 'plugin:prettier/recommended'], // 引入 prettier 配置
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly'
},
parserOptions: {
ecmaVersion: 2018,
sourceType: 'module'
},
rules: {
'prettier/prettier': 'error' // 执行 prettier 的规则
}
}在上述文件中，我们引入了 prettier/recommended 的配置，并在规则中添加了执行 prettier 的规则。
结尾
在上述步骤完成之后，我们就可以通过 ESLint 的检查和 prettier 的格式化来达到规范化代码的目的。
最后附上一段符合 ESLint 和 prettier 标准的示例代码：
const arr = [1, 2, 3]
const sum = arr.reduce((acc, cur) => acc + cur, 0)
console.log(`The sum of the array is: ${sum}`)在执行之后可以看到，该代码已经被 prettier 格式化。
希望这篇文章能够帮到你，并且让你更好地掌握如何在 ESLint 中使用 prettier 标准来优化代码规范化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cfa068e46428fe9eb4e43c