前端开发过程中，代码编写规范性与一致性十分重要。然而，由于不同的开发人员编写习惯不同，导致代码规范难以保证。而使用静态规范检查工具，则可以解决这个问题。
本文将介绍一个基于 ESLint 的规范检查工具包「eslint-config-origami-component」，它是基于 FT 前端团队 Origami 规范的 ESLint 配置预设。
安装
使用 npm 命令进行安装：
npm i eslint-config-origami-component -D
配置
在 .eslintrc 文件中，使用 extends 属性，将 eslint-config-origami-component 添加到已有配置中。
{
"extends": [
"origami-component"
]
}同时，可以根据项目需求，针对某些规则进行修改或覆盖。
例如，修改 indent 规则中的缩进值：
{
"extends": [
"origami-component"
],
"rules": {
"indent": ["error", 4]
}
}常用规则
JavaScript 全局变量
在 JavaScript 中，有一些全局变量是非常常见的，并且不建议在代码中对它们进行重新定义。因此，Origami 规范中禁止对全局变量进行重新定义。
var undefined = true; // Error
JavaScript 语法
Origami 规范中对于 JavaScript 语法有下列约定：
- 字符串使用单引号
' - 模板字符串使用反引号 ``
- 每个 ES6 的模块具有一个单独的 import/ export
- 对象的键值必须使用引号
-- -------------------- ---- ------- --- --- - ------ -- -- --- --- - ------ -- -- ------ - --- - ---- ------------------- -- -- ------ ------- ---- -- -- --- --- - - ------ -------- -- -- ----- -------- -- ----- --
CSS 语法
Origami 规范中对于 CSS 语法有下列约定：
- 使用
em作为字体大小单位 - 避免使用
!important - 对多个 CSS 属性值，一般放在同一行上
-- -------------------- ---- ------- ---------- ------ -- -- -- ---------- ----- -- ----- -- ---------- - ------ --- ----------- -- ----- -- - ---- - ----------------- ---- ------ ------ -- -- -- -
总结
以上是 npm 包 eslint-config-origami-component 的使用教程以及部分 Origami 规范中的约定。我们可以使用这个工具包来对项目代码进行规范检查，使用规范化的代码可以增加代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/eslint-config-origami-component