0%

快速选择相同项目

Ctrl + D

回退一次选择

Ctrl + U

跳过选中的项目

Ctrl + K

新版 husky 实践

  1. 安装 husky

    1
    npm install -D husky
  2. 在 packgae.json 中添加 prepare 脚本

    1
    2
    3
    4
    5
    {
    "scripts": {
    "prepare": "husky install"
    }
    }

    prepare 脚本会在 npm install(不带参数)之后自动执行。也就是说当我们执行 npm install 安装完项目依赖后会执行 husky install 命令,该命令会创建 .husky/ 目录并指定该目录为 git hooks 所在的目录。

  3. 添加 git hooks,运行一下命令创建 git hooks

    1
    npx husky add .husky/pre-commit "npm run test"

    运行完该命令后我们会看到.husky/目录下新增了一个名为pre-commit的shell脚本。也就是说在在执行git commit命令时会先执行pre-commit这个脚本。pre-commit脚本内容如下:

    1
    2
    3
    4
    #!/bin/sh
    . "$(dirname "$0")/_/husky.sh"

    npm run test

    可以看到该脚本的功能就是执行npm run test这个命令

参考:
https://zhuanlan.zhihu.com/p/366786798

模式

  1. normal

  2. insert

    1. i insert 前插
    2. a append 后插
    3. o open a line below
    4. I 开头
    5. A 末尾
    6. O open a line up
  3. command

    1. 替换 :% s/java/python/g
    2. set nu 设置行号
    3. sp 横分屏 vs 竖分屏
  4. visual

    1. v
    2. V 整行
    3. ctrl + v 块状

vim 手册

vimtutor

插入模式下

ctrl+h 删除上一个字符

ctrl+w 删除上一个单词

​ctrl+u 删除当前行光标之前的内容jj

motions

  1. hjkl
  2. w/b move word by word
  3. W/B move WORD by WORD
  4. e/ge move to the end of a word
  5. E/gE
  6. f(character) find character in line
  7. F(character)
  8. t(character) until character in line
  9. T(character)
  10. ; / , 继续搜索
  11. 0 first character of a line
  12. ^ first non-blank character of a line
  13. $ end character of a line
  14. g_ end non-blank character of a line
  15. { / } move entire paragraphs
  16. ctrl + d / ctrl + u
  17. /{pattern} search forward
  18. ?{pattern} search backward
  19. n / N next/previous
  20. ctrl + o go back
  21. ? without a pattern change the direction
  22. gg top of a file
  23. {line}gg
  24. G end of a file

operators

  1. u to undo
  2. ctrl + r to redo
  3. d delete
    1. d2w delete two words
    2. dt; delete until ;
    3. df; delete until ;(include ;)
    4. d/hello delete until hello
    5. diw
    6. di”/‘/`
  4. dd delete line
  5. D delete from the cursor until the end of the line
  6. c change (combine d and i)
  7. cc change a complete line
  8. C change from the cursor until the end of the line
  9. . repeat change

text-object

  1. w word
  2. s sentence
  3. p paragraph
  4. “ quotes special
  5. ‘ single quote special
  6. ` backtick special
  7. () b
  8. {} B
  9. []

1
2
3
4
5
6
7
cd /Library/LaunchAgents
sudo vim com.oray.sunlogin.agent.plist
sudo vim com.oray.sunlogin.startup.plist

cd /Library/LaunchDaemons
sudo vim com.oray.sunlogin.helper.plist
sudo vim com.oray.sunlogin.plist

这里,是进入到系统的启动项文件存放目录,然后用vim直接修改向日葵的启动配置。

每次运行vim后,按i进入编辑模式,然后把Disabled改为,这样就禁用了该启动项,然后按Esc退出编辑模式,继续按:wq保存并退出。

编辑好了这四个文件后,再重新启动机器,烦人的向日葵控制端终于消失了!

作者:smartshallot

链接:https://www.jianshu.com/p/a20efbcc61dd

来源:简书

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

窗口操作

隐藏 H

关闭 W

最小化 M

全屏 command + control + F

浏览器全屏(窗口全屏的基础上) command + shift + F

vscode 全局搜索 command + shift + F

显示隐藏文件、文件夹

点击空白处 然后 command + shift + 。

截屏、录屏

command + shift + 5

代码之间跳转

调回之前的代码

Mac 下

ctrl + '-'

window 下

alt + '-'

折叠、展开代码块

以下命令要确保光标在编辑区域

  1. 折叠所有区域代码的快捷键:ctrl+k, ctrl+0;

    先按下ctrl和K,再按下ctrl和0; (ctrl 不要松开)
  2. 展开所有折叠区域代码的快捷键:ctrl +k, ctrl+J;

    先按下ctrl和K,再按下ctrl和J 
  3. 自动格式化代码的快捷键:ctrl+k, ctrl+f;

    先按下ctrl和K,再按下ctrl和f;

全局搜索

command + shift + F

容器的属性

flex-direction 属性

规定灵活项目的方向

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
| value | description |
|:—–|:—–|
|row |默认值。灵活的项目将水平显示,正如一个行一样。 |
row-reverse |与 row 相同,但是以相反的顺序。
column |灵活的项目将垂直显示,正如一个列一样。
column-reverse |与 column 相同,但是以相反的顺序。

flex-wrap 属性

规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

flex-flow 属性

是 flex-direction 和 flex-wrap 属性的复合属性。默认值为row nowrap。

flex-flow: flex-direction flex-wrap|initial|inherit;

justify-content

justify-content属性定义了项目在主轴上的对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-around;

align-items

定义项目在交叉轴上如何对齐。

align-items: flex-start | flex-end | center | baseline | stretch;

align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

项目的属性

order

定义项目的排列顺序。数值越小,排列越靠前,默认为0。

flex-grow 属性

用于设置或检索弹性盒子的扩展比率。

flex-grow: number|initial|inherit;

flex-shrink 属性

指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。

flex-shrink: number|initial|inherit;

flex-basis 属性

用于设置或检索弹性盒伸缩基准值

flex

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

兰亭集序

【作者】王羲之 【朝代】魏晋

永和九年,岁在癸丑,暮春之初,会于会稽山阴之兰亭,修禊事也。群贤毕至,少长咸集。此地有崇山峻岭,茂林修竹,又有清流激湍,映带左右,引以为流觞曲水,列坐其次。虽无丝竹管弦之盛,一觞一咏,亦足以畅叙幽情。

是日也,天朗气清,惠风和畅。仰观宇宙之大,俯察品类之盛,所以游目骋怀,足以极视听之娱,信可乐也。

夫人之相与,俯仰一世。或取诸怀抱,悟言一室之内;或因寄所托,放浪形骸之外。虽趣舍万殊,静躁不同,当其欣于所遇,暂得于己,快然自足,不知老之将至;及其所之既倦,情随事迁,感慨系之矣。向之所欣,俯仰之间,已为陈迹,犹不能不以之兴怀,况修短随化,终期于尽!古人云:“死生亦大矣。”岂不痛哉!

每览昔人兴感之由,若合一契,未尝不临文嗟悼,不能喻之于怀。固知一死生为虚诞,齐彭殇为妄作。后之视今,亦犹今之视昔,悲夫!故列叙时人,录其所述,虽世殊事异,所以兴怀,其致一也。后之览者,亦将有感于斯文。

译文

永和九年,时在癸丑之年,三月上旬,我们会集在会稽郡山阴城的兰亭,为了做禊事。众多贤才都汇聚到这里,年龄大的小的都聚集在这里。兰亭这个地方有高峻的山峰,茂盛的树林,高高的竹子。又有清澈湍急的溪流,辉映环绕在亭子的四周,我们引溪水作为流觞的曲水,排列坐在曲水旁边,虽然没有演奏音乐的盛况,但喝点酒,作点诗,也足够来畅快叙述幽深内藏的感情了。这一天,天气晴朗,和风温暖,仰首观览到宇宙的浩大,俯看观察大地上众多的万物,用来舒展眼力,开阔胸怀,足够来极尽视听的欢娱,实在很快乐。人与人相互交往,很快便度过一生。有的人从自己的情趣思想中取出一些东西,在室内(跟朋友)面对面地交谈;有的人通过寄情于自己精神情怀所寄托的事物,在形体之外,不受任何约束地放纵地生活。虽然各有各的爱好,安静与躁动各不相同,但当他们对所接触的事物感到高兴时,一时感到自得,感到高兴和满足,竟然不知道衰老将要到来。等到对得到或喜爱的东西已经厌倦,感情随着事物的变化而变化,感慨随之产生。过去所喜欢的东西,转瞬间,已经成为旧迹,尚且不能不因为它引发心中的感触,况且寿命长短,听凭造化,最后归结于消灭。古人说:“死生毕竟是件大事啊。”怎么能不让人悲痛呢?每当看到前人所发感慨的原因,其缘由像一张符契那样相和,总难免要在读前人文章时叹息哀伤,不能明白于心。本来知道把生死等同的说法是不真实的,把长寿和短命等同起来的说法是妄造的。后人看待今人,也就像今人看待前人,可悲呀。所以一个一个记下当时与会的人,录下他们所作的诗篇。纵使时代变了,事情不同了,但触发人们情怀的原因,他们的思想情趣是一样的。后世的读者,也将对这次集会的诗文有所感慨。

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-name

指定要绑定到选择器的关键帧的名称

animation-duration

动画指定需要多少秒或毫秒完成

animation-timing-function

设置动画将如何完成一个周期

animation-delay

设置动画在启动前的延迟间隔。

animation-iteration-count

定义动画的播放次数。
| value | description |
| —- | —- |
|n| 一个数字,定义应该播放多少次动画 |
|infinite| 指定动画应该播放无限次(永远)|

animation-direction

指定是否应该轮流反向播放动画。

animation-fill-mode

规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。

animation-play-state

指定动画是否正在运行或已暂停。

@keyframes

1
2
3
4
5
6
7
8
9
10
11
12
13
@keyframes name
{
from {background: red;}
to {background: yellow;}
}

@keyframes name
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

设置环境变量

1
2
3
export http_proxy=http://127.0.0.1:8123/
export ALL_PROXY=socks5://127.0.0.1:1086
export PATH=$PATH:<PATH 1>:<PATH 2>:<PATH 3>

等号前后不能有空格
用冒号分隔

删除环境变量

1
2
unset http_proxy
unset ALL_PROXY

查看环境变量

1
2
3
4
# 查看某一个
echo $PATH
# 查看所有
env