vscode使用快捷键生成自定义代码片段(以js为例),帮助你提高代码速度

512 阅读2分钟

vscode使用快捷键生成自定义代码片段(以js为例)

在俺们写代码的过程中 或多或少都会有一些代码片段经常需要重复书写 这个时候俺们可以通过vscode快捷键生成自定义代码片段来帮助我们快速生成那些经常重复书写的代码片段

1.点击vscode页面左下角齿轮设置按钮

1.png

2.点击用户代码片段

2.png

俺的电脑是用户代码片段 可能有得同学电脑显示的是或配置用户代码片段或Configuring user code snippets或大概意思是代码片段的 点!

3.搜索框里输入js选择javascript.json

3.png

我是以js为例就选择javascript.json 有需要配置其他语言的同学可以自行选择

4.下图为初次进入javascript.json的界面

4.png

5.Example是vscode提供的一个快捷键例子 俺们将Example下面的几行代码取消注释得到下图

5.png

6.第一行蓝色代码"Print to console"

6.png

7.png 第一行蓝色代码"Print to console"在敲代码过程中对应的是上方图片的红框位置 是第一种提示 这一行蓝色代码也可以修改成定义的

7.第二行蓝色代码"scope"

8.png 这一行俺目前还不知道什么意思(如果有知道的同学欢迎共勉)

8.第三行蓝色代码"prefix"

9.png

10.png 第三行代码prefix就是俺们自己设置的快捷键 比如图中"prefix":"log"的意思就是快捷键就是log 如第二幅图提示所示 想改快捷键把prefix的属性值改成自己想要的就行了

9.第四行蓝色代码"body"

11.png

12.png 第四行body就是俺们自己书写的代码片段如第二幅图所示 在body属性值中用[]包起来里面就写自己想要快捷生成的代码片段 这里需要注意的是 每一行代码都需要用一对双引号""包起来并结尾需要用逗号,结束 不然会报错 有几对双引号就会生成几行代码 在每一行代码中 美元符号1表示代码片段生成后光标的悬停位置 "console.log($1)"就表示代码片段生成后光标会悬停在括号中 \n表示换行 \t表示缩进一次自己设置的缩进距离(2就缩进2 4就缩进4)

10.第五行蓝色代码"description"

13.png

14.png 第五行description跟第一行有点类似也是提示的 如第二幅图所示

希望对你有帮助