背景
在多人或者团队共同开发一个项目的时候,由于每个人的习惯和能力不同,产出的代码可能风格各异,日积月累整个工程的代码乱作一团,可维护性很差。因此需要共同遵守一定的代码书写规范,来提高工程的可维护性。
对于规范我们不能寄希望于大家自觉遵守,因为每个人都可能由于各种原因导致代码规范最终无法落地执行。作为提供给整个团队使用的项目模板,我们希望通过从工具层面强制大家按照统一的规范去编码。本节课程将介绍如何通过 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 插件