摘要：相对于来说是免费的。配置注当前相关的配置基于版本。，该设置是用来控制光标的粗细，目前设置大小为。，这个不用多说，给提供了相关功能。总结总体上来说是一个使用比较方便的编辑器，能够通过一些特定的插件提高你的工作效率。
背景
之前一直是只用WebStorm作为IDE来编写代码，但是由于：
手中的这台Mac接了两个显示器以后，使用WebStorm会有卡顿。
WebStorm需要付费（虽然可以通过某方法和谐）。
所以需要寻找一个新的编辑器或者IDE来进行边写代码。
为什么选择VS CodeVS Code的性能明显由于Atom。
VS Code的插件系统使用方便程度远高于Sublime。
VS Code相对于WebStorm来说是免费的。
VS Code配置注：当前VS Code相关的配置基于v1.20.1版本。
用户设置在首选项->设置中，能够对VS Code相关的属性进行设置，目前有调整字段如下：
"editor.fontSize": 16，该设置用来调整编辑器中的字体大小，目前设置大小为16。
"files.autoSave": "onFocusChange"，该设置用来调整编辑器的自动保存策略，当前字段含义为当该文件失焦后保存，即切换到其他应用或者文件的时候自动进行一次保存。
"editor.cursorWidth": 2，该设置是用来控制光标的粗细，目前设置大小为2。
"editor.suggestSelection": "recentlyUsedByPrefix"，该设置是用来控制自动补全的建议，目前设置为根据之前补全过建议的前缀来进行建议，大概的意思就是你上次通过co选择了const，这次你再输入co的时候，也会建议你选择const。
代码片段VS Code可以通过名为代码片段的功能像编辑器中插入一段指定的文本，具体操作步骤为首选项->用户代码片段->新建全局代码片段。
我们可以增加一些常用的文件声明注释、通用模板等代码片段，从而避免频繁的复制粘贴和重复劳动。
我举一个简单的文件声明注释的例子来说明下这个功能：
{
// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log("$1");",
// "$2"
// ],
// "description": "Log output to console"
// }
"JS & TS description": {
"prefix": "jsfile",
"body": [
"/**",
"* @module ${TM_FILENAME_BASE}",
"* @author: Hjava",
"* @since: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
"*/",
"",
""use strict";",
""
],
"description": "Insert description."
}
}
其中，JS & TS description表示这个片段的名称，其他具体字段含义如下表所示：
| 字段 | 说明 |
|---|---|
| prefix | 前缀，即你在编辑器中输入的内容为前缀指定内容时，能够在编辑器建议中选择此片段。 |
| body | 具体文本内容，在选择此片段后，会将此数组根据
进行组合输出到编辑器中。 其中有部分特定的常量，可以获取输入时的部分信息，如： ${CURRENT_YEAR}:当前年份，具体字段可以见此处 说明：在写此文章时，部分1.20.0版本增加的常量并不在上面的文档中，具体字段为： CURRENT_YEAR：年（4位数） CURRENT_YEAR_SHORT：年（2位数） CURRENT_MONTH：月 CURRENT_DATE：日 CURRENT_HOUR：小时 CURRENT_MINUTE ：分钟 CURRENT_SECOND：秒 |
| description | 描述说明，在片段说明中会显示此字段的文本内容。 |
具体示例效果如下：
插入后效果如下：
插件在左侧插件面板中，可以进行插件的搜索、安装与卸载。推荐插件如下：
Auto Close Tag，能够在你编写HTML中自动帮你加上闭合的标签。
Auto Rename Tag，能够在你修改一个标签时自动调整与之成对的另一个标签。
js-beautify for VS Code，能够格式化你的JavaScript文件。当然，它还提供了格式化JSON的能力。
Beautify css/sass/scss/less，它能够让你对CSS相关文件进行格式化。
Better Comments，能够让你的注释看上去更加友好。
Document This，能够自动的给函数和方法添加注释。
ESLint，这个不用多说，给VS Code提供了ESLint相关功能。
PostCSS Syntax Highlighting，能够让VS Code支持PostCSS语法。
vscode-icons，能够让你的文件树增加图标标识。
总结VS Code总体上来说是一个使用比较方便的编辑器，能够通过一些特定的插件提高你的工作效率。相较于其他的IDE或者编辑器来看，他有着自己独特的优势。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/107533.html
摘要：相对于来说是免费的。配置注当前相关的配置基于版本。，该设置是用来控制光标的粗细，目前设置大小为。，这个不用多说，给提供了相关功能。总结总体上来说是一个使用比较方便的编辑器，能够通过一些特定的插件提高你的工作效率。 背景 之前一直是只用WebStorm作为IDE来编写代码，但是由于： 手中的这台Mac接了两个显示器以后，使用WebStorm会有卡顿。 WebStorm需要付费（虽然可以...
摘要：相对于来说是免费的。配置注当前相关的配置基于版本。，该设置是用来控制光标的粗细，目前设置大小为。，这个不用多说，给提供了相关功能。总结总体上来说是一个使用比较方便的编辑器，能够通过一些特定的插件提高你的工作效率。 背景 之前一直是只用WebStorm作为IDE来编写代码，但是由于： 手中的这台Mac接了两个显示器以后，使用WebStorm会有卡顿。 WebStorm需要付费（虽然可以...
摘要：将这些命令绑定到键盘快捷键是有帮助的，例如向上箭头用于平衡向外，而向下箭头用于平衡向内。是和的快速原型开发平台。 本系列的第一篇可以在这里看到： 提高 JavaScript 开发效率的高级 VSCode 扩展！ showImg(https://segmentfault.com/img/bVbnn2j?w=1254&h=768); 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质...
摘要：因为用户不用在第一次进入应用时下载所有代码，用户能更快的看到页面并与之交互。译高阶函数利用和来编写更易维护的代码高阶函数可以帮助你增强你的，让你的代码更具有声明性。知道什么时候和怎样使用高阶函数是至关重要的。 Vue 折腾记 - (10) 给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示) 稍微改改都能直接拿来用~~~哟吼吼,哟吼吼..... 如何无痛降低 if else 面...
摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行 书籍 《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...
阅读 3669·2021-11-11 10:58
阅读 2414·2021-09-22 15:43
阅读 2843·2019-08-30 15:44
阅读 2159·2019-08-30 13:08
阅读 1805·2019-08-29 17:28
阅读 851·2019-08-29 10:54
阅读 642·2019-08-26 11:46
阅读 3482·2019-08-26 11:43
