在前端开发中，代码规范一直是我们所追求的目标。eslint 是一个非常常用的代码检查工具，它可以帮助我们规范我们的代码，并一定程度上避免代码中的一些问题。今天我们将介绍 @svenpiller/eslint-plugin 这个 npm 包，它可以帮助我们更好的进行前端代码规范检查。下面是该插件的使用教程。
安装
我们可以通过 npm 包管理工具来安装该插件:
npm install @svenpiller/eslint-plugin --save-dev
步骤
配置 .eslintrc
我们首先需要将插件添加到 .eslintrc 配置文件中。打开 .eslintrc 文件，添加以下代码:
{
"plugins": [
"@svenpiller"
]
}这将会告诉 eslint ，我们要在代码检查过程中使用该插件。如果你想使用插件中的某些规则，你还需要将这些规则添加到 extends 中：
{
"extends": [
"plugin:@svenpiller/recommended"
]
}这样，即可使用插件中的默认规则。如果你想使用自定义规则，请参考插件中的规则文档。
规则
@svenpiller/eslint-plugin 中的规则包含了提交代码过程中的一些最佳实践，可以帮助我们规范代码。
该插件中目前内置 13 个规则。
| 规则名称 | 描述 |
|---|---|
camelcase |
验证变量、函数、方法名是否使用驼峰命名法。 |
quotes |
强制使用一致的引号风格。 |
indent |
强制使用一致的缩进。 |
eol-last |
强制文件末尾至少存在一个空行。 |
no-unused-vars |
禁止未使用过的变量。 |
semi |
要求或禁止使用分号代替 ASI（自动分号插入）。 |
space-before-function-paren |
强制在 Function 的左括号之前使用一致的空格。 |
no-undef |
禁用未声明的变量，除非它们在 /*global */ 注释中被提到. |
comma-dangle |
要求或禁止对象字面量中冒号后面是否加空格 |
no-unreachable |
禁止在 return、throw、continue 和 break 语句后出现不可达代码。 |
no-empty |
禁止出现空块语句。 |
no-debugger |
禁用 debugger。 |
no-trailing-spaces |
禁止行尾有空格。 |
示例
我们来看看一个示例，这是一个函数，使用了稍微复杂一点的语法，包括使用了 let 和 await。我们可以使用 eslint 检查这个函数，查看它是否符合代码规范。
-- -------------------- ---- -------
--- ----
----- -------- ----- -
--- -
----- ---------------------
--- - ----- ------------------------
-----------------
- ----- ------- -
---------------------
- ------- -
--------------------
-
-原始代码中的缩进可能会出现不规范的地方。在执行 eslint 之后，我们可以得到这样的检查结果：
-- -------------------- ---- ------- ------------------ ----------- -- - ----- --------- --- ----- ---------------- ------------------ ----------- -- - ----- --------- --- ----- ---------------- ------------ ----- -- -------- ----- ------------------ ------------------ ----------- -- - ----- --------- --- ----- ---------------- ------------- ----- -- -------- ----- ------------------ ------------------- ----------- -- - ----- --------- --- ----- ---------------- ------------------ ----------- -- - ----- --------- --- ----- ---------------- --------------- ---- -- ---------- -- ---------------- ------------------ ----------- -- - ----- --------- --- ----- ---------------- ------------------ ----------- -- - ----- --------- --- ----- ----------------
根据上述结果，我们需要在 .eslintrc 文件中添加以下代码:
{
"plugins": [
"@svenpiller"
],
"extends": [
"plugin:@svenpiller/recommended"
]
}最后再执行一次 eslint，你将看到全是 ✅ 的检查结果：
-- -------------------- ---- ------- - --- --- ---- - --- ----- -------- ----- - - --- --- - - --- ----- --------------------- - ---- --- - ----- ------------------------ - ---- ----------------- - --- - ----- ------- - - --- --------------------- - --- - ------- - - --- -------------------- - --- - -----------------------------
小结
@svenpiller/eslint-plugin 是一个非常实用的 eslint 检查插件，它可以帮助我们规范前端项目代码，避免出现一些低级错误。在使用该插件时，我们还需要记录一些比较具体的配置信息。希望该文档能助你能提高代码规范的意识以及使用该插件的能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f80238a385564ab6b4c