第 07 课：引入代码检查工具

背景

在多人或者团队共同开发一个项目的时候，由于每个人的习惯和能力不同，产出的代码可能风格各异，日积月累整个工程的代码乱作一团，可维护性很差。因此需要共同遵守一定的代码书写规范，来提高工程的可维护性。

对于规范我们不能寄希望于大家自觉遵守，因为每个人都可能由于各种原因导致代码规范最终无法落地执行。作为提供给整个团队使用的项目模板，我们希望通过从工具层面强制大家按照统一的规范去编码。本节课程将介绍如何通过 ESLint 和 stylelint 等静态代码检查工具，对代码进行检查。

1 ESLint

ESLint 最初是由 Nicholas C. Zakas 于 2013 年 6 月创建的开源项目。它的目标是提供一个插件化的 JavaScript 代码检测工具。ESLint 非常灵活，对 ES6 的支持非常好。

1.1 安装

首先本地安装依赖的 npm 包：

npm install -D eslint eslint-loader eslint-plugin-vue babel-eslint eslint-friendly-formatter

除了基础的 ESLint 外，还用到了其他 3 个包。

我们需要在 Webpack 对源代码执行编译之前进行代码检查，eslint-loader 负责对 JS 的源代码执行静态检查。

在我们的项目模板中 vue 的开发方式是以单文件模板的形式组织的，对于.vue 中的文件涉及到 <script> 中的 JS 代码，<template> 中的 JS 和 Vue 指令等 ，ESLint 本身是无法对这些代码进行检查的，这里我们用到了 Vue 官方开发的 ESLint 插件