阅读 590

手摸手带你实践标准的前端开发规范

概述

掘金上发了"制定自己团队的前端开发规范"帖子之后,有好多人给我说光写规范可不行,要进行实践,这篇文章就是告诉大家怎么将我们之前写的规范进行实践,光说不练假把式,我们要在项目中强制执行这些规范。

主要使用 husky+lint-staged+eslint 对我们的规范进行实践,首先给大家介绍一下这几个工具都是干什么用的。

  • eslint:就不多做介绍了,大家应该都知道,我们制定的规范需要用一些配置来实现,这个时候用 eslint 是最好不过的了。

  • husky:可以用于实各种 Git Hook。这里主要用到 pre-commit 这个 hook,在执行 commit 之前,运行一些自定义操作。

  • lint-staged:用于对 Git 暂存区中的文件执行代码检测。

知道了这几个包的作用之后,我们开始来给一个项目实现一套在提交代码之前的 eslint 检测。

ESlint

首先开始配置一下自己的 eslint,大家不要着急,接下来我会放一份纯正的 vue 配置,复制粘贴过来就行,如果是纯 JS、TS、React 的项目,可以根据腾讯的 eslint-config-alloy 配置。

开始实践吧:

  • 进入你的项目中,我这里新建一个项目开始配置
# 要遵循文件夹命名规范
mkdir eslint_test
cd eslint_test
# 一路回车就行
npm init
# 安装 eslint 和 babel-eslint
npm i eslint babel-eslint -D
# 配置其他的 eslint-config,需要根据说明安装其他依赖
复制代码
  • 接着我们在项目的根目录下创建 eslint 的相关文件:
# eslint 要忽略的文件
touch .eslintignore
# eslint 的规则
touch .eslintrc.js
复制代码
  • .eslintignore 文件中填写 eslint 要过滤的文件
build/*.js
src/assets
public
dist
复制代码
  • 配置 .eslintrc.js

直接看一下我之前写的制定自己团队的前端开发规范之 eslint,,去 copy 一下我根据制定的 eslint 配置,粘贴到 .eslintrc.js 中即可。

  • 接下来我们要配置一下 package.json 里面的执行脚本:
"scripts": {
  "lint": "eslint --ext .js --fix"
}
复制代码

主要是检测 js 代码,然后通过 --fix 把 eslint 能解决的问题都在检测的时候解决掉,比如格式,比如变量合并。

OK 了,eslint 的规范我们已经制定完了,接下来就要在 git 提交代码的时候对我们所写的代码进行检测了。

husky+lint-staged

先安装一下我们需要的 npm 包:

npm i lint-staged husky -D
复制代码

接下来要在 package.json 里面配置一下我们的 git 钩子:

{
  "name": "eslint_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "lint": "eslint --ext .js --fix"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,vue}": ["npm run lint", "git add"]
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-eslint": "^10.0.2",
    "eslint": "^6.1.0",
    "husky": "^3.0.1",
    "lint-staged": "^9.2.1"
  }
}
复制代码

husky 里面定义了 git 的钩子函数,我们主要在 commit 之前进行检查,所以用到了 pre-commit 这个钩子。

lint-staged 在 pre-commit 的时候执行,定义了对 git 暂存区中的文件执行的任务,我们这里只对 js 文件做 eslint 的格式化校验。

但是这里有个小坑,大家一定要注意一下:

因为 pre-commit 这个钩子是需要配合 git 去用的,它主要对文件夹 .git/hooks/pre-commit 文件做手脚,当我们从 git 上拉下来项目时,如果之前没对 hooks 下的文件做修改,那 hooks 下的文件都是以 sample 结尾的,这个时候钩子函数是不起作用的,当我们安装了 husky 之后,husky 会自动对 hooks 下面的文件做修改,当你安装完 husky 之后,再打开 .git/hooks 文件夹,你会发现所有的钩子文件,都会存在一份带有.sample 的,一份不带.sample 的,不带.sample 的文件就是 husky 创建的,这个才会让 git 钩子起作用。所以我们最好是先拉项目,然后再安装 husky,否则可能会导致 husky 失效。如果你是新开发项目,开发完后才提交到 git,开发完之后,你可以先关联 git 仓库,然后重新安装一下 husky 这个包就可以了。

这一套配置下来就可以把我们之前制定的前端规范强制执行了,怎么样,你会将这一套用到自己的项目中吗?目前我自己就在用,感觉还是很不错的,可以规避很多细节上的问题,如果你还没用上这一套,那你就需要赶快去实践一下了。

开发中代码格式化

上面的主要是在提交代码的时候进行格式化,这样会保证我们远程 git 仓库里面的代码都是统一的,其实本地开发的时候我们可以使用 prettier 进行格式化,也非常好用,支持很多编辑器,可以自行搜索配置。

阅读完后两部曲

非常感谢各位花时间阅读完,衷心希望各位小伙伴可以花少量的时间帮忙做两件事:

  • 动动你的手指,帮忙点个赞吧,你的点赞是对我最大的动力。

  • 希望各位关注一下我的公众号,新的文章第一时间发到公众号,公众号主要发一些个人随笔、读书笔记、还有一些技术热点和实时热点,并且还有非常吸引人的我个人自费抽奖活动哦~

关注下面的标签,发现更多相似文章
评论