随着前端技术的不断发展，代码的规范性也成为了前端开发中必要的一部分。 eslint 是目前较为流行的 JavaScript 代码规范工具。在很多公司中，为了代码的易读性和可维护性，都会将 eslint 引入到前端开发流程中。而 eslint-config-xadillax-style 提供的规则集，可以引导我们写出更加规范和易维护的代码。
安装
首先需要安装 eslint，具体安装方法可以参考 eslint 官方文档。这里推荐使用全局安装，这样可以在项目任意目录下使用 eslint 命令。
安装 eslint-config-xadillax-style：
npm install eslint-config-xadillax-style --save-dev
配置
接下来开始配置，首先需要在项目中新建 .eslintrc.js 文件，然后在该文件中新增 extends 属性，即可继承 eslint-config-xadillax-style 规则集。
module.exports = {
extends: 'eslint-config-xadillax-style',
rules: {
// 自定义规则
}
};如果需要添加自定义规则，可以在 rules 属性中进行配置。关于规则的编写和配置，可参考官网文档。
示例
下面是一个示例代码：
-- -------------------- ---- -------
-- -------------- --
---- --------
----- --------------- - -
------
-------
---------
------
--------
----------
------
--
----- ---------- -
-------------------- -
-- ---------- -
----- --- -------------- ------ -- ---------
-
------------ - --------
-
----- -------- ------- - --- -
------ ------------------- ---- ---------
-
----- --------- ---- - --- ------- - --- -
------ -------------------- ---- ----- ---------
-
----- ----------- ------- - --- -
------ ---------------------- ---- ---------
-
----- -------- ---- - --- ------- - --- -
------ ------------------- ---- ----- ---------
-
----- ---------- ---- - --- ------- - --- -
------ --------------------- ---- ----- ---------
-
----- ------------ ------- - --- -
------ ----------------------- ---- ---------
-
----- --------- ------- - --- -
------ -------------------- ---- ---------
-
----- --------------- ---- ------------- - --- ------- - --- -
-- ----------------------------------- -
----- --- -------------- ------- ------- -------------
-
--- -------------
-- ------- ------------- --- --------- -
------------ - --------
----------------- - --------------
- ---- -
------------ - --------------
-
------ ------------------------------- -
-------
-------- -
--------------- -------------------
-----------------------
--
----- ----------------------------------
--------------------
---------------- -- -
-- -------------- -
----- --- ------------------------- -------------------------
-
----- ----------- - -------------------------------------
-- ------------ -- --------------------------------------- --- --- -
------ ----------------
-
------ ----------------
---
-
-
-------------- - -----------通过引入 eslint-config-xadillax-style 规则集，可以实现以下效果：
- 禁止所有空格、括号和花括号中的换行。
- 在代码中要求始终使用单引号而不是双引号。
- 禁止使用 var，而改用 const 或 let 。
- 禁止使用 == 和 != 。
- 禁止使用未定义的变量。
- 在 if 语句、函数声明、函数表达式和箭头函数的参数列表中加入括号。
- 在方法调用前后需要加空格。
通过运用 eslint-config-xadillax-style 规则集，我们可以在代码 review 和开发过程中，帮助检查代码的规范性，提高代码的可读性和可维护性。同时也建议在项目中建立基于 eslint 的 pre-commit 钩子，帮助团队成员更早发现违反规范的代码，避免在后期修改代码时造成额外的工作量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3de605dbf7be33b2567137