今天这篇博文来跟大家聊一聊vscode中的一些设置问题。
vscode中的可设置项也是特别多的，有兴趣的童鞋可以多去研究研究！
接下来我就从中挑三个问题来给你们说道说道，我赶脚都是特别实用的，你们不妨跟我一起设置一下自己的vscode，你会发现他怎么越用越好用呢，怎么回事，小老弟？
一. 用户自定义代码片段
只要是敲代码的童鞋对Emmet一定不陌生，几乎是各大编辑器的必备插件。而在vscode中是默认内置了Emmet插件，不再需要我们自己安装啦~
由于Emmet的存在，让我们敲代码的效率拔高了一大截：
我们可以输入特定的关键字和符号的组合，来快速生成代码，比如：ul>li*5，div.nav等等。
其实在vscode中，我们也可以自定义这一操作，这一设置就是：用户自定义代码片段。
1.1 示例
先看几个例子：
1 . 输入关键字 log 即可快速生成——输出语句：
console.log(' ');
2 . 输入关键字 func 即可快速生成——函数体：
function xxx(){
};
3 . 输入关键字 mine 即可快速生成——文档注释：
/**
*@module: index
*@author:zevin
*@description:
*@since: 2020-07-14 21:13:29
*/
上动图：
毫无疑问，这样的操作又会提高我们敲代码的效率和规范性，章节末将会给大家附上相关设置代码。
1.2 设置步骤
接下来我将一步一步给大家详细介绍怎么设置和使用用户自定义代码片段：
- ①：首先按如下路径打开User snippets的命令面板
- Files --> Preferences --> User snippets
-
或者
ctrl + shift +P直接打开命令面板，输入Configure User Snippets - ②：选择选项：New Global Snippets file（新建全局代码片段文件…）
- log.code-snippets——我这里是创建过全局代码片段文件了，log是我当时第三步的命名；
- 我们可以创建多个全局代码片段文件，同时起作用；
- ③：为你的全局代码片段文件命名，输入一个名称即可，比如：test
- 下次打开的时候，第二步将会多出一个选项： test.code-snippets，可继续编辑。
- ④： 编辑器打开名为test.code-snippets的文件；
- 我们接下来的一些操作都会在这个文件中进行。
-
⑤： 把
//Example：以下的代码块取消注释； - 这就是我们将用到的全局代码片段的示例。摘录如下：
"Print to console": {
"scope": "javascript,typescript",
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
| Key | Value |
|---|---|
| “Print to console” | 名称 |
| “scope” | 作用域，适用的编程语言 |
| “prefix” | 关键字 |
| ‘$1’，’$2’… | 定义光标位置，tab键切换（ $1处 --> $2处） |
| “body” | 触发所输出的代码段 |
| “description” | 描述 |
- ⑥： 尝试设置自己的代码片段：
- 直接在log部分之后，添加同样格式的代码，一定要注意格式写正确。
1.3 附录：示例相关设置代码
这里给大家附上开头演示的代码片段的相关设置代码：
"Create A Function": {
"scope": "javascript,typescript",
"prefix": "func",
"body": [
"function xxx$1($2){",
" $3",
"};"
],
"description": "Create A Function"
}
"Add Document Annotation": {
"scope": "javascript,typescript",
"prefix": "mine",
"body": [
"/**",
"*@module: ${TM_FILENAME_BASE}",
"*@author:Your Name",
"*@description:$1",
"*@since: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
"*/",
],
"description": "Add Document Annotation"
}
二. 自动保存
这个设置是我在每款IDE工具上都会打开的必备设置之一。毕竟每次都需要按ctrl + S还是很麻烦滴。
而且打开自动保存的设置后，还能和之前提过的live Server插件有一个很棒的联动：
每次在vscode中修改完代码，不需要其他任何操作，可直接切到浏览器看效果！！！
2.1 设置步骤
1） 打开用户设置界面，第一个选项【Auto Save】就是我们需要配置的，可选项如下：
- ①：off （默认）
- 意思是不自动保存；
-
每次都需要用户自己手动
ctrl + S保存 ； - ②：afterDelay （推荐使用）
- 固定间隔时间，自动保存；
- 需要配合下一个【Auto Save Delay】配置项，用于指定间隔时间，单位是毫秒；
- ③：onFocusChange
- 当焦点离开编辑器的当前窗口时，自动保存；
- 只有当焦点离开整个编辑器，才会触发保存，在编辑器内部切换页签是不会自动保存的；
- 此项设置不需要【Auto Save Delay】中的时间间隔设置，这个值将被自动忽略 ；
- ④：onWindowChange
- 当焦点离开编辑器的当前窗口时，自动保存；
- 在编辑器内部切换页签也会触发自动保存；
- 此项设置不需要【Auto Save Delay】中的时间间隔设置，这个值将被自动忽略 ；
2） 给下一项【Auto Save Delay】指定数值，意为间隔时间，单位是毫秒；
2.2 推荐配置
【Auto Save】中选择afterDelay模式，【Auto Save Delay】中输入1000。
三. 自动换行
有时候我们也会遇到某一行代码过长，屏幕显示不全，每次都需要拖动底部滚动条查看，非常的不方便。所以我们可以把vscode的自动换行功能打开，就完美解决了这个问题。
3.1 设置步骤
请熟练的打开用户设置界面，然后搜索Editor:WordWrap，将off修改为on即可。
效果见图：
这三个设置都是一些细节问题，而往往就是细节决定成败。
日后不管是工作还是学习，希望大家都能越来越严谨，不断进步~
我想写的vscode相关的博文就更完啦，之后想想再写些什么吧 ~`- ~
感谢各位童鞋的收看，over