Open riskers opened 7 years ago
本文介绍现在最常用的前端工程化工具:
EditorConfig 是一套用于统一代码格式的解决方案,官网介绍很简单。简单来说,EditorConfig 可以让代码像是在同一个编辑器里打开的。
在项目跟目录下新建 .editorconfig 配置文件,配置项目有:
.editorconfig
配置文件的格式如下:
root = true [*.js] charset = utf-8 end_of_line = lf indent_size = 2 indent_style = space insert_final_newline = true trim_trailing_whitespace = true
这样,只要团队内都使用这样的一份 .editorconfig ,再根据我们用的编辑器去安装相应的 EditorConfig 插件就行了。主流编辑器都支持,比如:
前端检验工具有:
所以,很明显 ESLint 是现在大家首选的检验工具。
使用很简单:
npm install --save-dev eslint
{ "scripts": { "lint": "eslint src --ext .js" } }
执行 npm run lint 就会检查 src 目录下的 .js 文件。
npm run lint
.js
.eslintrc
{ "extends": "airbnb" "rules": { "semi": ["error", "always"], "quotes": [2, "double"] } }
eslint-config-airbnb 是根据 airbnb 规范所制作的 ESLint 配置。
git hook是你每次进行git相关操作的时候,都会触发的一些与该操作对应的事件,并运行相应的脚本代码,实现例如格式化提交信息,发送提交邮件,运行单元测试等功能。
git hook分为client side和server side,其中,client side的git hook是在创建git项目的时候,就会自动产生,并且保存在名为 .git/hooks 目录下:
.git/hooks
可以看到有很多种 hook ,有 .sample 后缀表示还没有开启。我们可以做个试验,修改 .git/hooks/pre-commit.sample 为 .git/hooks/pre-commit ,并且修改内容为:
.sample
.git/hooks/pre-commit.sample
.git/hooks/pre-commit
之后,我们执行 git commit 的命令时:
git commit
我们可以利用 git hook 做很多事情,比如 ESLint 代码,如果没有通过,就不允许 commit 。但是 git hook 是 需要 shell 编程脚本。
我们前端是不熟悉的,还好有 pre-commit 和 husky 帮助我们。下面以 pre-commit 为例,介绍怎么配置 hook:
{ "scripts": { "lint": "eslint src --ext .js,.jsx", "precommit-msg": "echo 'Pre-commit checks...' && exit 0" }, "pre-commit": [ "precommit-msg", "lint" ] }
这样,我们就在每次 commit 之前依次执行 precommit-msg 和 lint,如果 lint 出错,则不会成功 commit 。
precommit-msg
lint
这些都是约束团队编码的工具,能够帮助团队更好地协作,让整个团队的代码看起来像是一个人写的。
lint-staged 可以取到修改的文件,这样就可以只 lint 你本次修改的文件而不是所有文件:
// commit 之前得到修改的文件,然后进行 eslint 命令 "lint-staged": { "src/**/*.{js,jsx}": "eslint" }, "scripts": { "precommit": "lint-staged", }
再配合 VSCode 的 ESLint 插件,不要太舒服
上文已经过时,自从 prettier 出现后,已经可以代替 editorconfig 了,而且 prettier 还能集成进 eslint 。 最让我高兴的是,我最近发现 ESLint 通过 typescript-eslint-parser 可以检查 TypeScript 了,也就是说可以不用 tslint 了,这玩意当时让我很抓狂。
详细的不聊了,本来想更新一篇,但是看到 https://github.com/AlloyTeam/eslint-config-alloy 已经说得这么清楚了,就没有必要再制造水文了。
向我捐助 | 关于我 | 工作机会
本文介绍现在最常用的前端工程化工具:
EditorConfig
EditorConfig 是一套用于统一代码格式的解决方案,官网介绍很简单。简单来说,EditorConfig 可以让代码像是在同一个编辑器里打开的。
在项目跟目录下新建
.editorconfig
配置文件,配置项目有:配置文件的格式如下:
这样,只要团队内都使用这样的一份
.editorconfig
,再根据我们用的编辑器去安装相应的 EditorConfig 插件就行了。主流编辑器都支持,比如:ESLint
前端检验工具有:
所以,很明显 ESLint 是现在大家首选的检验工具。
使用很简单:
npm install --save-dev eslint
执行
npm run lint
就会检查 src 目录下的.js
文件。.eslintrc
:npm run lint
即可eslint-config-airbnb 是根据 airbnb 规范所制作的 ESLint 配置。
git hook
git hook是你每次进行git相关操作的时候,都会触发的一些与该操作对应的事件,并运行相应的脚本代码,实现例如格式化提交信息,发送提交邮件,运行单元测试等功能。
工作原理
git hook分为client side和server side,其中,client side的git hook是在创建git项目的时候,就会自动产生,并且保存在名为
.git/hooks
目录下:可以看到有很多种 hook ,有
.sample
后缀表示还没有开启。我们可以做个试验,修改.git/hooks/pre-commit.sample
为.git/hooks/pre-commit
,并且修改内容为:之后,我们执行
git commit
的命令时:前端应用
我们可以利用 git hook 做很多事情,比如 ESLint 代码,如果没有通过,就不允许 commit 。但是 git hook 是 需要 shell 编程脚本。
我们前端是不熟悉的,还好有 pre-commit 和 husky 帮助我们。下面以 pre-commit 为例,介绍怎么配置 hook:
这样,我们就在每次 commit 之前依次执行
precommit-msg
和lint
,如果lint
出错,则不会成功 commit 。这些都是约束团队编码的工具,能够帮助团队更好地协作,让整个团队的代码看起来像是一个人写的。
20170718 更新
lint-staged 可以取到修改的文件,这样就可以只 lint 你本次修改的文件而不是所有文件:
再配合 VSCode 的 ESLint 插件,不要太舒服
20190506 更新
上文已经过时,自从 prettier 出现后,已经可以代替 editorconfig 了,而且 prettier 还能集成进 eslint 。 最让我高兴的是,我最近发现 ESLint 通过 typescript-eslint-parser 可以检查 TypeScript 了,也就是说可以不用 tslint 了,这玩意当时让我很抓狂。
详细的不聊了,本来想更新一篇,但是看到 https://github.com/AlloyTeam/eslint-config-alloy 已经说得这么清楚了,就没有必要再制造水文了。