Vscode 足够强大，你值得拥有~~

开发工具以及操作

  • IDE：Vscode
  • 操作
    • 点击右侧代码管理工具，可以看到有修改的文件列表
    • 在上面输入本次提交的备注，按 Ctrl + Enter 提交

查看 git 日志

  • 按 Ctrl + Enter 提交之后，如果未通过 pre-commit hook 查检，会弹出一个提示窗口，点击【打开 git 日志】即可查看。

    该提示窗口项默认选中【打开 git 日志】，敲回车键等同于鼠标点击。

  • 也可以按 Ctrl + Shift + `，默认进入终端，点击终端左边的【输出】，然后点击右边的下拉列表，选【Git】，即可查看完整的 git 日志。

提交时没通过 pre-commit hook 检查

本次示例的 git 日志，文末有完整版。在日志中，找到有用的信息，本示例有用的是以下两行：

1
2
src/components/RightContent/index.less
 73:3  ×  Expected "color" to come before "background-color" in group "Typography"      order/properties-order

  • 第一行锁定检查未通过的文件：src/components/RightContent/index.less。
  • 第二行前面的 73:3 提示未通过检测的代码在第 73 行，从第 3 列开始，紧接着后面的提示是检查未通过的具体原因：Expected "color" to come before "background-color" in group "Typography"

本次针对的代码是 css 样式，根据提示，很容易修正。

修正后再次提交遇到的“坑”

在一次提交操作之后，会出现两种情况：

  1. 正常情况下，所有修改的文件通过代码检查，顺利提交，【暂存的更改】和【更改】列表都是空的，这个时候只需要执行推送（git push）操作，便会将修改提交到 git server。
  2. 如果有文件没有通过检查，没有通过检查的文件会跟已经通过的文件一起进入【暂存的更改】列表，如果修改了在【暂存的更改】列表中的文件，则该文件会同时在【更改】列表出现。

坑

按照日志提示修正代码之后，再次 Ctrl + Enter（这是执行 git commit），依然会提示跟之前一样的错误信息。

解决

检查未通过的文件先不提交

  • 将检测未通过的文件从【暂存的更改】列表中【取消暂存更改】，然后再提交即可。这样操作，【更改】列表中的文件不会提交。

该操作，只是临时性的，检查没有通过的文件始终是要提交的。下面讲如何一次性提交所有修改的文件。

应用最新的修改

  • 修改代码之后，再次提交前，需要将本次修改的、在【更改】列表中的文件添加到【暂存的更改】列表。
    • 操作方法：点击文件右侧的加号，作用是暂存更改，这样操作，会将本次修改与之前提交但没有通过检查的修改合并。重点：否则无论怎么修改，提交时都不会通过检查，因为同一个文件同时出现在【暂存的更改】和【更改】列表的情况下，实际检查的是【暂存的更改】列表中的文件。
  • 如上操作，即【暂存更改】之后，如果还是有代码未通过检查，需要重复上面的步骤。即：修改代码 -> 【暂存更改】-> 提交，直到检查通过。

体验

使用 Vscode 提交代码的这个过程跟使用 WebStorm 的体验不一样。使用 WebStorm 感觉更自然一些，即：提交的代码未通过检查，根据提示修正之后再提交，有问题再改，没问题就正常提交。

所以，从 WebStorm 转到 Vscode 的童鞋可能一开始很不适应这种变化。

跳过代码检查

当然，如果时间比较紧迫，没有时间一一修复代码规范问题，也可以通过以下方式暂时跳过代码检查直接提交。三选一即可。

  1. 用脚本提交，commit 脚本添加：--no-verify

    1
    2
    git add .
    git commit --no-verify -m '你的提交备注'

    这种提交方式，git 日志其实有提示：pre-commit hook failed (add --no-verify to bypass)

  2. 关闭 pre-commit hook
    • 进入项目根目录，打开子目录 .git\hooks，可以看到有很多 hook，将该目录下的 pre-commit 改名或者直接删除即可达到目的。
  3. 将不希望代码检查的文件或文件夹加到忽略列表
    • 在 .eslintignore 文件中添加对应的路径，如：/mock/user.ts，也可以添加整个目录，如：/config，甚至是整个源代码目录：/src。

俗话说，出来混迟早要还的，不按照规范写代码，留下的技术债，可能会导致非常严重的后果，很多失败的项目都是由于没有关注和正视技术债。技术债就象从银行贷款，可以不通过评估就直接贷款一样，有好处也有坏处，需要认真对待。

附：一次未通过检查的完整日志

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
> git add -A -- .
warning: LF will be replaced by CRLF in src/components/RightContent/index.less.
The file will have its original line endings in your working directory
> git commit --quiet --allow-empty-message --file -
> git ls-files --stage -- C:\workspace\wkb\wkb-oms-ui\src\components\RightContent\index.less
> git cat-file -s 98092c98d269faadade5c09fe6c9036e72c4d8c1
> git show --textconv :src/components/RightContent/index.less
> git ls-files --stage -- C:\workspace\wkb\wkb-oms-ui\src\components\RightContent\index.less
> git cat-file -s 98092c98d269faadade5c09fe6c9036e72c4d8c1
> git show --textconv :src/components/RightContent/index.less
 > running pre-commit hook: npm run precommit

> ant-design-pro@5.0.0-alpha.0 precommit C:\workspace\wkb\wkb-oms-ui
> lint-staged

[STARTED] Preparing...
[SUCCESS] Preparing...
[STARTED] Running tasks...
[STARTED] Running tasks for **/*.less
[STARTED] Running tasks for **/*.{js,jsx,ts,tsx}
[STARTED] Running tasks for **/*.{js,jsx,tsx,ts,less,md,json}
[SKIPPED] No staged files match **/*.{js,jsx,ts,tsx}
[STARTED] stylelint --syntax less
[STARTED] prettier --write
[SUCCESS] prettier --write
[SUCCESS] Running tasks for **/*.{js,jsx,tsx,ts,less,md,json}
[FAILED] stylelint --syntax less [FAILED]
[FAILED] stylelint --syntax less [FAILED]
[SUCCESS] Running tasks...
[STARTED] Applying modifications...
[SKIPPED] Skipped because of errors from tasks.
[STARTED] Reverting to original state because of errors...
[SUCCESS] Reverting to original state because of errors...
[STARTED] Cleaning up...
[SUCCESS] Cleaning up...

× stylelint --syntax less:

src/components/RightContent/index.less
 73:3  ×  Expected "color" to come before "background-color" in group "Typography"      order/properties-order

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ant-design-pro@5.0.0-alpha.0 precommit: `lint-staged`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the ant-design-pro@5.0.0-alpha.0 precommit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\andy\AppData\Roaming\npm-cache\_logs\2020-09-29T13_37_15_414Z-debug.log

pre-commit hook failed (add --no-verify to bypass)
> git config --get-all user.name
> git config --get-all user.email
> git ls-files --stage -- C:\workspace\wkb\wkb-oms-ui\src\components\RightContent\index.less
> git cat-file -s 98092c98d269faadade5c09fe6c9036e72c4d8c1
> git show --textconv :src/components/RightContent/index.less
> git status -z -u
> git symbolic-ref --short HEAD
> git rev-parse master
> git rev-parse --symbolic-full-name master@{u}
> git rev-list --left-right master...refs/remotes/origin/master
> git for-each-ref --sort -committerdate --format %(refname) %(objectname)
> git remote --verbose
> git config --get commit.template