介绍
在前端工作中，我们需要保证代码的质量和规范，这就需要借助工具来协助我们完成这项任务。其中，ESLint 是一个非常重要的工具，它能够提供给我们代码静态检查和规范化的功能。但是，在使用 ESLint 的过程中，我们可能会遇到一些问题，例如默认的输出格式不太友好、信息量不足等等，这些问题将会影响我们的工作效率。
要解决以上问题，我们可以使用 eslint-formatter-friendly-cn 这个 NPM 包。它提供了友好的中文排版，并且支持输出详细的错误报告，让你更加专注于解决问题本身。
本文将会介绍如何安装和使用 eslint-formatter-friendly-cn 进行代码规范化。
安装
eslint-formatter-friendly-cn 是一个 ESLint 插件，因此在使用之前，我们需要先安装一些必要的依赖项：
npm install eslint eslint-plugin-react eslint-config-google eslint-formatter-friendly-cn --save-dev
其中 eslint, eslint-plugin-react, eslint-config-google 是必要的依赖项，而 eslint-formatter-friendly-cn 是我们本节要介绍的插件。
配置
在安装完依赖项之后，我们需要对 .eslintrc 进行配置。我们可以在 .eslintrc 文件中加入以下内容：
-- -------------------- ---- -------
-
---------- -----------
---------- ----------
--------- ---------------
-------- -
-- ------ --
--
------------ ----------
-在上述的配置内容中，我们使 eslint-config-google 作为我们 ESLint 的规范配置，使用了 Babel 解析器（babel-eslint）来解析 JavaScript 文件，依赖的插件是 eslint-plugin-react。其中，friendly 指的是 eslint-formatter-friendly-cn 插件的格式化器。
使用
完成配置之后，我们就可以使用 eslint-formatter-friendly-cn 来格式化代码了。我们只需要在终端上输入以下命令，就可以获取我们想要的结果：
eslint --format friendly .
在上面的命令中，--format 参数指定了 eslint-formatter-friendly-cn 插件作为输出的格式化器， . 则是你要检测的代码目录。
示例代码
成熟的工具需要示例代码的支撑，因此这里提供一个 JavaScript 示例代码：
// test.js var abc = "abcdefghijklmn"
我们可以运行一下上述示例代码：
eslint --format friendly test.js
输出结果为：
-- -------------------- ---- -------
---------------------------------------------------------------
--- ----- ---------- ------
---- ------- -------- --------
- - -------- -- ------ - --------
-------
---------------------------------------------------------------
--- ----- ---------- ------
---- ------- -------- --------
- - -------- -- ------ - --------总结
本文介绍了一个 ESLint 插件 eslint-formatter-friendly-cn 的使用，从安装、配置、使用、示例代码等方面详细叙述，希望能够帮助大家更好的使用 ESLint 进行代码规范化。在实践的过程中，如果遇到了其他问题，可以查阅官方文档，或者提出 GitHub Issue，以便得到解决。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5451ab1864dac66971