提高开发效率之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或者编辑器来看,他有着自己独特的优势。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大学生计算机视觉学习DeepLearning

VS下如何建立一个新的MFC程序 网络编程 课设 基于C++ MFC 连接数据库 小应用 小项目浅析展示

46130
来自专栏葡萄城控件技术团队

Wijmo 更优美的jQuery UI部件集:C1 Wijmo Grids 更多惊喜

本文中,我将给大家介绍一系列非常棒的 Wijmo Grids功能。我们先以一个新的Wijmo Grids 来开始我们这次的 Wijmo Grids 之旅吧。 ?...

24070
来自专栏Spark学习技巧

Kafka源码系列之源码解析SimpleConsumer的消费过程

Kafka源码系列是以kafka 0.8.2.2源码为例讲解。浪尖纯属个人爱好,才写想写这个系列。希望对kafka的使用者们带来帮助。 一,消费者消费的过程讲解...

52470
来自专栏猿人谷

有趣的Linux命令行效果

有趣的Linux命令行功效 1. Linux"sl"命令行 尽管"sl"代表了"蒸汽机机头",但它是用来提醒那些命令行控们别把"ls"打成了"sl"。让我们看看...

28580
来自专栏安恒网络空间安全讲武堂

Jarvis-OJ平台多题WriteUp分享

题目 ## PORT51 ## LOCALHOST ## Login ## 神盾局的秘密 ## IN A Mess ## RE ## flag在管理员手里 ##...

2.2K100
来自专栏高性能服务器开发

libevent源码深度剖析十一 时间管理

(1)libevent源码深度剖析一 序 (2)libevent源码深度剖析二 Reactor模式 (3)libevent源码深度剖析三 libevent基本使...

10210
来自专栏Aloys的开发之路

Linux乱码问题解决方案

linux系统中文件名内容为urf8编码, windows系统中文件名默认为gbk编码, 多数文档使用gbk编码,系统采用utf8编码 无中文输入法导致的乱码 ...

57280
来自专栏大前端_Web

几种方法实现ajax请求内容时使用浏览器后退和前进功能

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

27120
来自专栏菩提树下的杨过

Flex4中的ModuleLoader,Alert以及TitleWindow

1、ModuleLoader 在Asp.Net开发中,经常会把页面的公共部分封装成自定义控件ascx,以达到重用或动态加载的目的。在Flex4中MXML Mod...

24850
来自专栏ShaoYL

UIViewController的生命周期及iOS程序执行顺序

304110

扫码关注云+社区

领取腾讯云代金券