vscode用法

工欲善其事，必先利其器。vscode是一个值得花费时间去掌握精通的编辑器。

好文档没必要远求

打开vscode，把菜单看上三遍，仔细思考每一个菜单项的做用，思考为啥要这样归类每一个菜单项。

配置是系统的核心

"文件/首选项"这个菜单相当重要，它包括以下四大块配置功能：

• 设置
• 快捷键
  快捷键设置分为两类：1）系统提供的菜单项的快捷键；2）使用现有的keymap映射，如vim、idea、sublime等流行编辑器
  vscode的快捷键必然是从快捷键到command的映射，而command并非可执行文件，而是能够在ctrl+shift+p中看到的命令。
• 代码片断snippets
  snippets是一些代码片断，这些代码片断能够经过前缀来触发。能够给不一样的语言设置不一样的代码片断，下面的文件就是给java设置的代码片断。

{
    "sout": {
        "prefix": "sout",
        "body": [
            "System.out.println($1);",
            "$2"
        ],
        "description": "打印"
    },
    "cla": {
        "prefix": "class",
        "body": [
            "public class $1 {\n\t$2\n}"
        ],
        "description": "定义类"
    },
    "main": {
        "prefix": "main",
        "body": [
            "public static void main(String[]args){\n\t$1\n}"
        ],
        "description": "定义main函数"
    }
}

prefix就是触发条件，body就是插入的代码片断，description是一些提示性内容。在body中可使用$数字的形式表示光标位置，使用tab键能够逐个到达$数字所在的位置。

• 主题：包括总体样式主题和文件图标主题两部分。样式主题有浅色、深色、高对比度三大类，每一个大类又包含若干小类。

牢记经常使用快捷键

ctrl+P：打开文件
ctrl+shift+P：打开命令面板，这个快捷键堪称最有用的快捷键。快捷键的缺点在于1）键少容易冲突；2）难于记忆。使用命令面板，咱们只须要记忆简短的命令，既快又准。
ctrl+shift+E：打开文件资源管理器（Exploerer）
ctrl+shift+D：打开调试窗口（Debug）
ctrl+shift+G：代开Git窗口
ctrl+shift+X：打开包管理工具
ctrl+B：隐藏侧边栏
ctrl+`：打开控制台

把界面布局中无关的视图所有关闭，当须要某些视图时使用快捷键调出。

vscode相关的目录

/Program Files/Microsoft VS Code

vscode默认的安装位置。

• bin：一些命令
• locale：一些语言包
• resources：包括vscode自带的插件，界面所须要的一些资源，vscode所须要的其它node模块（vscode是用nodejs运行的）
• 其它文件是一些动态连接库和exe

.vscode

每一个打开的文件夹均可以有单独的配置，存放在.vscode中，主要包括launch.json、tasks.json、settings.json，分别是调试器设置、任务设置、项目自己的设置（会覆盖全局的settings.json）。

~/.vscode

在~/.vscode目录下，extensions存放了已安装的扩展，想要学习如何编写扩展，直接看这个文件夹就能够了。

~/AppData/Roaming/Code

在~/AppData/Roaming/Code下，文件夹包括备份、缓存、日志、cookie、用户配置等信息，其中用户配置文件件User是最重要的，它包括：

• snippets：为各类语言设定的snnippets，每种语言都对应一个json文件
• keybindings.json：用户自定义的命令和快捷键
• locale.json：语言设置
• settings.json：用户修改以后的配置

portable模式

vscode意识到了有太多文件夹不够简洁清晰，因而vscode提供了portable（便携）模式，这种模式把全部数据文件都集中放在一个文件夹中。好处是便于移动，换环境以后免于从新配置（即使不是便携模式，也可以经过复制相关文件夹的方式实现复制vscode配置）；坏处是注册表、路径须要本身手动更新，须要手动设置许多文件关联。

关于portable的模式的安装方法详见：https://code.visualstudio.com/docs/editor/portable

大概步骤以下：

• 下载zip安装包
• 把当前的~/.vscode和%APP_DATA%/Code复制到解压后的安装包的data目录

修改主题

vscode内置了许多主题，这些主题都是经过json文件指定的。vscode在界面上并无提供修改主题文件的功能，但咱们能够经过修改文本文件的方式来修改细节，例如：把注释颜色调为较亮的绿色。只须要修改vscode安装目录下的主题文件便可：C:\Program Files\Microsoft VS Code\resources\app\extensions\theme-monokai\themes

修改内置界面

vscode的设置并无提供菜单栏、侧边栏的字体设置。可是咱们能够经过修改
C:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\workbench.main.css文件来实现界面定制。
其中文件导航侧边栏的css选择器为：

.monaco-workbench>.part>.content{
  font-size:16px;
  font-family:"微软雅黑";
  line-height: 18px;
}

自定义task

好的系统都是开放的，vscode经过task和extension两种方式向用户开放。

一个例子

打开命令面板，configure task命令设置task，会在当前目录的.vscode目录下生成一个tasks.json。再次打开命令面板，task run build命令会执行build过程，这个命令的快捷键为ctrl+shift+B。这是会自动打开控制台执行设定的命令。

task自动探测

若是为每一个项目都设置不少task，那将会很是费事。而现有的一些构建工具如make、npm、maven等已经包含了不少命令，vscode正在和这些工具集成起来。例如使用npm时，在package.json中定义了run命令，就能够直接经过命令面板执行run命令，不须要更改tasks.json。

目前vscode只把前端的npm、gulp、grunt等工具的可执行任务集成进来了。

使用自定义的命令

假设在scripts文件夹下有一个test命令，咱们须要运行这个命令。

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Run tests",
            "type": "shell",
            "command": "./scripts/test.sh"
        }
    ]
}

task中的部分字段的含义以下：

• label：命令的名称，用于在界面中展现
• type：命令的类型，可取值为shell和process。shell会打开控制台并打印信息，process则只启动一个进程执行并不打印信息。
• command：实际上须要执行的命令，能够是各类可执行文件。
• windows、osx、linux：这三个都是是字典类型的字段，在不一样的操做系统下task的配置可能有差别，解析时会使用操做系统定义的字段中的内容覆盖掉task其它字段。
• group：任务也是有组的，把任务分红若干个组更加清晰。最多见的组是生命周期，maven中的构建过程分为compile、build、test、deploy等生命周期，每一个生命周期包含若干个命令。
• problemMatcher：将此字段设为[]能够避免每次选择是否查看输出

关于task.json的配置细节，参考：https://code.visualstudio.com/docs/editor/tasks-appendix

把若干个小命令组合起来

有向无环图DAG在工程界很受欢迎，彷佛任何项目中都没法避开有向无环图。缘由是由于：好项目一定复杂，复杂一定很大，大则须要拆分，拆分以后会获得一堆小组件，小组件之间必有依赖，有依赖的项目必然构成一个有向无环图，若是有环就变成死循环了。

vscode中的若干个task也能够组合起来。这经过task的dependOn字段来实现。利用这个字段就可以把一系列task串联起来实现逐步构建。

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Client Build",
            "command": "gulp",
            "args": ["build"],
            "options": {
                "cwd": "${workspaceRoot}/client"
            }
        },
        {
            "label": "Server Build",
            "command": "gulp",
            "args": ["build"],
            "options": {
                "cwd": "${workspaceRoot}/server"
            }
        },
        {
            "label": "Build",
            "dependsOn": ["Client Build", "Server Build"]
        }
    ]
}

然而，我认为这个功能很鸡肋，这已经超出了vscode的职责范围了，没有dependOn咱们照样写出逐步构建的代码，彻底能够把depend的一些命令写在一个shell脚本中。

problem matcher

vscode task的一个重要做用就是语法检测，在编辑代码时，这些问题检测程序一直在执行，vscode须要读取这些语法检测程序的输出并可视化的展现给用户。

problem matcher相关的内容较多，设计也很复杂，详见参考资料。

给任务绑定快捷键

{
    "key": "ctrl+h",
    "command": "workbench.action.tasks.runTask",
    "args": "Run tests"
}

给任务绑定的快捷键command都是相同的，只有args不一样，args参数对应task的label字段。
在vscode中，最好不要给task绑定快捷键，由于keybinding.json是一个全局文件，.vscode文件夹中tasks.json是项目特有的文件。

变量替换

在配置task时，咱们须要给命令行传递一些参数，如当前文件、当前文件夹。
例如：

• ${file}表示当前文件名
• ${workspaceFolder}表示当前工做空间的名字
• ${lineNumber}当前文件的行号

掌握这三个变量替换足够用了，vscode还定义了许多并没有卵用的变量，此处是一份详细的变量列表。https://code.visualstudio.com/docs/editor/variables-reference

编写一个有用的task

使用vscode常常编写一些单文件程序，使用的语言有多种：

• java：先使用javac命令编译，而后执行
• cpp：先使用g++命令编译，而后执行
• python：使用python命令运行
• js：使用node运行
• html：打开浏览器查看

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "type": "shell",
      "command": "lang",
      "args": [
        // Ask msbuild to generate full paths for file names.
        "${file}"
      ],
      "group": "build",
      // Use the standard MS compiler pattern to detect errors, warnings and infos
      "problemMatcher": [],
      "promptOnClose": true
    }
  ]
}

将lang.cmd这个命令放在全局变量PATH下

python %~dp0\lang.py %*

主体程序使用python实现

import sys
import os
import tempfile
"""
使用单文件运行
"""
if len(sys.argv) <= 1:
    print("usage : lang filename")
    exit(0)
filename = sys.argv[1]
print("正在运行", filename, "\n")
if filename.endswith('.js'):
    os.system('node ' + filename)
elif filename.endswith('.py'):
    os.system("python " + filename)
elif filename.endswith('.java'):
    os.system("javac {} -d {}".format(filename, tempfile.gettempdir()))
    os.system("java  -cp {} {}".format(tempfile.gettempdir(),
                                       os.path.basename(filename[:-5])))
elif filename.endswith('.cpp'):
    os.system("g++ {} -o {}/a.exe".format(filename, tempfile.gettempdir()))
    os.system(os.path.join(tempfile.gettempdir(), "a.exe"))
elif filename.endswith(".html"):
    os.startfile(filename)
else:
    print(filename, "是什么文件？")

通过以上配置，就能够快速实现对单文件的测试了。

在使用java语言编写单文件程序时，每次运行老是弹出提示“Classpath is incomplete”，这个提示官方已经说明了，这个问题不是事，能够直接设置java.errors.incompleteClasspath.severity忽略掉这个问题。

编写扩展

扩展提供的功能

vscode将哪些接口暴露给了扩展？扩展可以实现哪些功能？

• vscode负责激活扩展。每一个扩展运行的时候都以独立进程运行，vscode负责监视进程执行状况。扩展激活有以下几种状况：文件类型被检测到；目录下包含某种文件；命令面板触发；某种按键组合触发。
• 读取、写入编辑器内容。
• 工做空间。获取工做空间目录，状态栏信息，界面布局状况等。
• 事件。例如打开、关闭、更改某个文件。
• 编辑交互。包括代码提示、悬浮提示、错误提示等。

vscode的扩展的两种特殊类型

• Language Server，语言服务器，用于代码提示、定义跳转、错误检测等。
• Debugger，调试器，用于代码调试。调试器都是语言必备的组件，扩展的做用就是遵循vscode调试器适配协议在vscode和调试器之间搭建一座桥梁。

这两种类型的扩展遵循同一套vscode扩展基础架构。这些类型的扩展都和外界工具松耦合，经过某种协议进行交流，vscode提供了调试器适配器协议用来和不一样语言的调试器进行交流，提供了语言服务器协议和语言服务器进行交互。

参考资料

vscode技巧，内容全面丰富，涉及vscode功能各个方面
https://code.visualstudio.com/docs/getstarted/tips-and-tricks

为vscode编写task
https://code.visualstudio.com/docs/editor/tasks

vscode插件体系概览
https://code.visualstudio.com/docs/extensions/overview

LSP（language server protocol）协议是微软提出的一种协议，功能包括代码提示、查找引用等功能。
https://microsoft.github.io/language-server-protocol/