JavaScript 代码风格检测

Unsplash

在日常开发中，每个人的代码编写习惯都不尽相同，比如有的人喜欢在代码末尾加上分号，而有的人不喜欢加，在个人开发的项目中这并不是什么严重问题。但在团队协作开发时，我们往往需要阅读其他人所写的代码，此时没有一个统一完整的代码规范，无法有效的控制代码质量，进而影响团队的开发效率。通过引入代码规范工具，可以帮助我们保障一个团队的代码风格相同，并且能能避免一些因为格式上的问题，而出现的低级错误

在新建 Vue 项目过程中，我通常会勾选 ESLint + Prettier 作为项目的语法检查方式，Prettier 是业界主流的代码风格格式化工具，不仅支持多种主流语言，还提供了各大 IDE 和编辑器插件，能够根据用户所配置的规则，重新打印出符合格式规范的代码，或许大家已经注意到，ESLint 也具有语法风格检查功能，既然如此，为何还要引入 Prettier 呢？

确实在代码格式化方面，Prettier 和 ESLint 有所重叠，不过它们的侧重点不同，ESLint 的主要工作就是检测出代码中的潜在问题，并给出相应的提示，比如使用了某个变量却忘记定义，在格式化功能上却很有限，我们来看下面这个例子

methods: {
    say() {
        let number = 1;
    }

}

通过 ESLint 的检查，可以检测到：① number 为常量，应该使用 const 进行声明；② number 在声明之后没有使用。这就是 ESLInt 能为我们所做的所有事情，对于倒数第二行的空行，就显得心有余而力不足了，这时候就轮到 Prettier 登场了，Prettier 能够在我们保存代码时，自动删除倒数第二行的空行。所以，ESLint 主要还是负责校验代码是否符合规范，而代码的风格则由 Prettier 进行调整，两者分工不同，需要配合使用

既然我们已经了解到 ESLint 和 Prettier 各自的优势了，那又该如何使用？或许有同学会有疑问，在项目初始化的时候，不是已经引入这两个 Node 模块了吗？直接使用不就可以了吗？确实如此，代码格式错误的提醒、代码格式处理确实能通过 npm 或者通过 webpack 打包的时候去操作，但这里建议大家通过 IDE 或编辑器去操作，这样会比较方便，接下来的步骤会比较繁琐，需要大家按照顺序并细心做好每一步

配合 VS Code 插件使用

这里只介绍 VS Code 的配置方法，而使用 IDE 和其他编辑器的同学可参考并自行配置，首先打开 VS Code 的插件市场，搜索并安装以下插件——Vetur、ESLint、Prettier-Code formatter，待安装完成之后，重启下 VS Code 避免插件不生效

Vetur 插件除了支持 .vue 文件语法高亮、语法补全之外，其默认代码风格化使用的是 Prettier，我们只需要按一下快捷键 Shift + Option + F（Win 快捷键为Shift + Alt + F）即可快速格式化代码

除此之外，我们还可以通过快捷键 Command + ,（Win 快捷键为 Ctrl + ,）开启 VS Code 的 setting.json 文件，搜索 editor.formatOnSave 配置项，将其取值改为 true，就能在保存的时候进行自动排版了

ESLint 插件和 Prettier 插件会自动检索项目根目录下的 .eslintrc.js 文件和 .prettierrc.js 文件，根据配置文件里的规则设置进行代码检查，而这两个文件的基础配置 Vue-Cli 3 已经帮我们配置好了，我们需要做的，就是依据自己的代码风格，在配置文件中添加相应的规则

规则配置

ESLint 的配置多达上百条，为了方便大家更容易的配置出自己心目中的规则，建议大家参考腾讯 AlloyTeam 团队的 ESLint 配置规则，打开 .eslintrc.js 文件，在 rules 里添加强制使用单引号和结尾不能使用分号两条规则，具体代码如下所示：

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "@vue/prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    //强制使用单引号
    quotes: ["error", "single"],
    //强制不使用分号结尾
    semi: ["error", "never"]
  },
  parserOptions: {
    parser: "babel-eslint"
  }
};

随后我们打开 .prettierrc.js 文件，如果项目中没有该文件，在根目录新建一个即可，随后添加使用单引号和结尾不加分号两条规则，具体代码如下所示：

// .prettierrc.js
module.exports = {
  //使用单引号
  singleQuote: true,
  //结尾不加分号
  semi: false
}

规则修改之后，如果项目正在运行，记得重新 npm run serve 一下，或许大家已经注意到了，我们在 ESLint 中定义的规则是强制使用单引号，而 Prettier 格式化的时候，会将所有单引号转换为双引号，这就和 ESlint 定义的校验规则冲突了

解决的方法也很简单，那就是把 ESLint 的规则配置里也配置和 Prettier 相同的规则，而更好的做法是，不需要在 ESLint 里设置风格化的规则，全都交给 Prettier 去做