背景
在前端开发中，代码规范是很重要的一环，而 ESLint 是一个长期以来广泛使用的代码规范和风格检查工具。但是用到 ESLint，配置也往往会带来不小的麻烦。为了解决这个问题，@znemz/js-common-eslint-config 库应运而生。该库提供了一套合理、规范的 ESLint 配置，减少了配置环节的工作量，提高了开发效率。
安装
在使用 @znemz/js-common-eslint-config 之前，需要先安装 Node.js，并在项目中安装 ESLint 和该库的依赖项：
npm install eslint @znemz/js-common-eslint-config --save-dev
配置
安装完依赖后，在你的项目根目录中创建一个 .eslintrc.js 文件，指定你需要使用的 ESLint 配置。在该文件中，我们只需要 extends 一下该库，然后添加一些自定义的规则即可。例如，我们希望规定 max-lines-per-function 的长度为 50：
module.exports = {
extends: [
"@znemz/js-common-eslint-config"
],
rules: {
"max-lines-per-function": ["error", { "max": 50 }]
}
};这里的 max-lines-per-function 是 ESLint 提供的一个规则，用于限定一个函数的行数。在该库的基础上进行扩充，我们规定该函数的最大行数为 50 行。
使用
配置好之后，我们可以在终端中运行 eslint <your-file> 指令来对某个文件进行 ESLint 检查。例如，我们对 src/app.js 进行检查：
npx eslint src/app.js
当代码规范不符合要求时，ESLint 将会提示你：代码不符合样式规范，并带有具体的提示信息，以便于后续修改代码。
示例代码
下面是一个简单的示例，使用该库 校验一段 TypeScript 代码的风格：
// .eslintrc.js
module.exports = {
extends: [
"@znemz/js-common-eslint-config",
"@znemz/js-common-eslint-config/typescript"
]
};-- -------------------- ---- ------- -- ---------- --- - ------ -------- ---- -- - ------ -------- --- -- - ------- -------- ---- -- -------- --------------- ------- ---- -------- ------ - ------ --- ---------- ------ ---- - ----- ----- - --------------- ---- -------------------
在使用命令校验后，eslint 会输出如下的信息：
3:1 error expected a type annotation @typescript-eslint/explicit-function-return-type 5:3 error Parameter 'name' implicitly has an 'any' type @typescript-eslint/no-explicit-any 5:13 error Parameter 'age' implicitly has an 'any' type @typescript-eslint/no-explicit-any
这意味着：该项目引入了 typescript-eslint 插件，并且该程序存在两个参数缺少参数类型的问题。此时我们可以去修改程序，以符合代码规范。
结语
如何正确使用 ESLint 一直都是一个值得探讨的话题。而在使用 @znemz/js-common-eslint-config 库后，我们可以更加方便、快速且准确地完成规范的代码开发。如果你还没有使用过它，不妨尝试一下。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f07a4f7403f2923b035bf99