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

20 篇文章 0 订阅 ¥49.90 ¥99.00

背景

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

对于规范我们不能寄希望于大家自觉遵守,因为每个人都可能由于各种原因导致代码规范最终无法落地执行。作为提供给整个团队使用的项目模板,我们希望通过从工具层面强制大家按照统一的规范去编码。本节课程将介绍如何通过 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 插件

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值