使用 ESLint 避免重构代码
在前端开发过程中，我们经常会遇到一些写出来的代码，虽然看上去能够达到我们的要求，但是实际上这些代码缺乏可维护性、可扩展性和可读性，这样的代码难以被其他开发者理解和修改，而且难以对代码进行重构和优化。对于这样的代码，我们往往需要进行一次大规模的重构。
然而，我们如何避免这样的情况，让我们的代码在开发过程中就符合工程标准呢？这时，为我们介绍 ESLint 工具。
何为 ESLint
ESLint 是一个用于识别和报告 ECMAScript/JavaScript 代码中的模式和报告中的错误的工具，它是一个开放源代码 JavaScript linting 实用程序。ESLint 可定制的规则允许使用者检查 JavaScript 代码中的特定问题。
为什么使用 ESLint
项目中每个人对代码的编写方式都有各自的习惯，但是这样就会出现代码风格不一致的情况。使用 ESLint 工具可以规范代码风格、编写规范，提高代码的可读性、可维护性和可扩展性，并且能够避免代码的潜在缺陷和错误。
使用 ESLint
- 安装 ESLint
在命令行中安装 ESLint：
npm install eslint --save-dev
- 指派规则集
常见规则集：
- airbnb：注重代码可维护性和可读性，采用严格模式
- standard：基础规则集，代码风格比较固定
- google：适用于大规模项目，确保代码清晰、可读性强
以 airbnb 套件为例：
npm install eslint-config-airbnb --save-dev
安装完成以后需要在项目的根目录下配置 .eslintrc 文件，指定规则集，例如使用 airbnb：
{
"extends": "airbnb-base"
}你也可以再此基础上进行自定义规则配置。
- 运行 ESLint
通过 ES Lint 运行你的 JS 文件：
./node_modules/.bin/eslint.js yourfile.js
- 集成到编辑器
与通过命令行调用 ESLint 不同，集成到编辑器可以立刻获得反馈和修复问题，提高效率。ESLint 工具有许多插件，如：
- vscode-eslint for Visual Studio Code
- SublimeLinter-eslint for Sublime Text
- atom-eslint for Atom
示例代码
下面是一个包含规范代码和不规范代码的示例：
规范代码：
-- -------------------- ---- -------
----- --------- - ----- -- -
-- ---- - -- ------ ----------
-- ---- --- - -- --- --- -- ------ --
--- --- - --
--- ---- - - -- - -- ---- ---- -
--- -- --
-
------ ----
--不规范代码：
-- -------------------- ---- -------
----- ------ - -------- -- -
-- ------- - -- -
------ ----------
-
-- ------- --- - -- ------ --- -- -
------ -
-
--- ------ - --
--- ---- - - -- - -- ------- ---- -
------ -- --
-
------ ------
-下面是上述代码的 ESLint 检查结果
规范代码：
$ ./node_modules/.bin/eslint.js app.js app.js 2:8 warning Unexpected unnamed function func-names 6:3 warning Expected indentation of 2 spaces but found 4 indent 7:3 warning Expected indentation of 2 spaces but found 4 indent ⚠ 3 warnings
不规范代码：
-- -------------------- ---- ------- - ----------------------------- ------ ------ --- ----- ---------- ---- --- --- -- ----- ------- ------ --- ------- ---------- ------- -------- ---------- --- ----- -------- ----------- -- - ------ --- ----- - ------ --- ----- -------- ----------- -- - ------ --- ----- - ------ --- ----- -------- ----------- -- - ------ --- ----- - ------ --- ----- -------- ----------- -- - ------ --- ----- - ------ --- ----- -------- ----------- -- - ------ --- ----- - ------ --- ----- -------- ----------- -- - ------ --- ----- - ------ - - -------- -- ------- - ---------
结论
ESLint 是一个非常有用的工具，它可以帮助规范代码风格、编写规范， 并且能够避免代码的潜在缺陷和错误。在使用过程中，我们需要选择适合自己项目的规则集，并且需要及时修复代码中存在的问题。这样可以提高代码的可读性、可维护性和可扩展性，使得代码更具有吸引力，更加稳定。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6748154793696b0268e30bcd