前端开发代码规范工具

规范化是前端工程化的一个重要部分。现在，有许多工具能够辅助我们实行代码的规范化,比如你一定知道的 ESLint 和 Prettier。

今天，来聊聊这些工具的工作原理和基本使用，了解它们是如何发挥作用的，以及如何更好地利用这些工具去规范项目的代码。

本文主要聊聊这些工具的作用和基本使用方式，不会有细致的使用步骤和教程，这些内容我希望你能从官方指引中查看。

1. ESlint - 检查你的 JavaScript 代码

让我们先从知名度最高的 ESLint[1] 开始。

1.1. ESLint 及其作用

Lint 是一类专门用于检查代码的工具软件， 也称 linter。ESLint ，即 JavaScript （ECMAScript）代码的检查工具。

正如官网的介绍 —— “Find and fix problems in your JavaScript code”，ESLint 能够辅助查找出你的 JavaScript 代码中的问题，包括：

• 代码风格问题（styles）。比如，运算符两边的空格、语句末尾的分号。

• 不好的写法。比如，使用 == 进行比较而不是 ===。

• 可能存在逻辑问题的代码模式。比如，定义了一个变量，但没有使用到它。

此外，ESLint 还能够帮你自动修复一些简单的问题。

我们将在下一小结学习如何使用 ESLint 检查我们的 JavaScript 代码，并修复其中的一些问题。

1.2. ESLint 快速上手

为了在项目中使用 ESLint，需要先安装它。

# 初始化一个 npm 项目
mkdir eslint-test
cd eslint-test
npm init -y
# 安装 eslint
npm init @eslint/config
复制代码

回答一系列问题后，你可以看目录中的配置文件 .eslintrc.js，这个配置文件告诉 ESLint 如何去解析项目，这个项目采用了哪些规范和规则。

ESLint 是一个高度配置化的工具。尤其需要留意 extends 和 rules 字段，它们定义了在项目中采用哪些规则。一段代码有没有问题，取决于项目中应用了哪些规则。比如：{semi: ["error", "always"]} 要求必须在语句末尾添加分号，相反，semi: ["error", "never"] 禁止任何不必要的分号。

具体的配置教程可以参考官方配置文档[2]，不是这里三两句能说完的。

在这里，我使用的是 airbnb-base[3] 规范。

module.exports{
  // ...
  extends: 'airbnb-base'
  // ...
}
复制代码

写一段简单的 JavaScript 代码用于测试：

// file - add.js
function add(x,y) {
  return Number(x)+Number(y);
}
 
// ❌ 这是一个错误的调用
add("2"+'3')
复制代码

ESLint 是一个命令行工具，这个命令调用之前安装的 ESLint 去检查 add.js 代码：

npx eslint add.js
复制代码

输出结果：

eslint-test/add.js
  1:15  error  A space is required after ','                comma-spacing
  2:19  error  Operator '+' must be spaced                  space-infix-ops
  5:5   error  Strings must use singlequote                 quotes
  5:8   error  Operator '+' must be spaced                  space-infix-ops
  5:8   error  Unexpected string concatenation of literals  no-useless-concat
 
✖ 5 problems (5 errors, 0 warnings)
  4 errors and 0 warnings potentially fixable with the `--fix` option.
复制代码

可以看到，ESLint 发现了代码中的 5 个 error 等级的问题，并且提示其中的 4 个问题是可修复的。根据提示，执行：

npx eslint add.js --fix
复制代码

可以看到，现在提示只有一个问题：

eslint-test/add.js
  5:9  error  Unexpected string concatenation of literals  no-useless-concat
 
✖ 1 problem (1 error, 0 warnings)
复制代码

重新查看 add.js 文件，可以看到 4 个格式化问题已经被自动修复了。检查第 5 行 add('2' + '3');, 发现正确写法应该是 add('2', '3');。

很好，所有的问题都解决了，ESLint 可帮了大忙