专栏首页黄Java的地盘提高开发效率之VS Code基础配置篇

提高开发效率之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 条评论
登录 后参与评论

相关文章

  • ReasonML——新的前端强类型语言简介

    从有前端到现在,JavaScript 语言一直都是实现前端逻辑的首选。但是,由于 JavaScript 是一个弱类型语言,很难进行相关的类型检测。因此在构建大型...

    黄Java
  • 【译】WebSocket协议第五章——数据帧(Data Framing)

    在WebSocket协议中,数据是通过一系列数据帧来进行传输的。为了避免由于网络中介(例如一些拦截代理)或者一些在第10.3节讨论的安全原因,客户端必须在它发送...

    黄Java
  • 【译】WebSocket协议第五章——数据帧(Data Framing)

    本文为WebSocket协议的第五章,本文翻译的主要内容为WebSocket传输的数据相关内容。

    黄Java
  • composer使用笔记

    1.基本用法 require monolog/monolog 1.0.* 2.包版本 确定版本 1.0.1 范围 >=1.0 范围AND >=1.0,...

    苦咖啡
  • Leetcode 165 Compare Version Numbers

    Compare two version numbers version1 and version2. If version1 > version2 retu...

    triplebee
  • 推荐几个 VS Code 扩展、主题和字体

    VS Code 作为当前最流行的开源代码编辑器之一,要说它为什么这么受大众喜爱,我觉得一是它现代化的界面,二是它强大的扩展系统。

    陈皮皮
  • netty(1): IO线程模型的变迁

    jdk 1.4之前所有的socket通信都采用同步阻塞模式(bio),这种一请求一应答的通信模型简化了上层应用的开发,但是在可靠性和性能方面存在巨大的弊端,下图...

    yiduwangkai
  • ng serve出错,关于TypeScript的版本问题

    ERROR in The Angular Compiler requires TypeScript >=3.1.1 and ❤.3.0 but 3.3.3333...

    Jerry Wang
  • 【python-leetcode784-子集】字母大小写全排列

    给定一个字符串S,通过将字符串S中的每个字母转变大小写,我们可以获得一个新的字符串。返回所有可能得到的字符串集合。

    绝命生
  • P4:真正的SDN还遥远吗?

    OpenFlow协议作为SDN最流行的南向协议,得到了很多的关注,目前发展也良好,但OpenFlow并不完美,OpeFlow交换机还不能提供更好的可编程能力。P...

    SDNLAB

扫码关注云+社区

领取腾讯云代金券