阅读 476

提高开发效率之VS Code基础配置篇

背景

之前一直是只用WebStorm作为IDE来编写代码,但是由于:

  1. 手中的这台Mac接了两个显示器以后,使用WebStorm会有卡顿。
  2. WebStorm需要付费(虽然可以通过某方法和谐)。

所以需要寻找一个新的编辑器或者IDE来进行边写代码。

为什么选择VS Code

  1. VS Code的性能明显由于Atom。
  2. VS Code的插件系统使用方便程度远高于Sublime。
  3. 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 具体文本内容,在选择此片段后,会将此数组根据\n进行组合输出到编辑器中。
其中有部分特定的常量,可以获取输入时的部分信息,如:
${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或者编辑器来看,他有着自己独特的优势。

评论