进步开辟效力之VS Code基本设置篇

2019年8月24日 260次阅读 来源: hjava

背景

之前一直是只用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形貌申明，在片断申明中会显现此字段的文本内容。

详细示例结果以下：

《进步开辟效力之VS Code基本设置篇》

插进去后结果以下：

《进步开辟效力之VS Code基本设置篇》

插件

在左边插件面板中，可以举行插件的搜刮、装置与卸载。引荐插件以下：

  • 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或许编辑器来看，他有着本身奇特的上风。

    原文作者：hjava
    原文地址: https://segmentfault.com/a/1190000013307868
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞