vscode用法

時間 2019-11-07

標籤 vscode 用法简体版

原文原文鏈接

工欲善其事，必先利其器。vscode是一個值得花費時間去掌握精通的編輯器。css

好文檔沒必要遠求

打開vscode，把菜單看上三遍，仔細思考每一個菜單項的做用，思考爲啥要這樣歸類每一個菜單項。html

配置是系統的核心

"文件/首選項"這個菜單相當重要，它包括以下四大塊配置功能：前端

設置
快捷鍵
快捷鍵設置分爲兩類：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鍵能夠逐個到達$數字所在的位置。java

主題：包括總體樣式主題和文件圖標主題兩部分。樣式主題有淺色、深色、高對比度三大類，每一個大類又包含若干小類。

牢記經常使用快捷鍵

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+`：打開控制檯node

把界面佈局中無關的視圖所有關閉，當須要某些視圖時使用快捷鍵調出。python

vscode相關的目錄

/Program Files/Microsoft VS Code

vscode默認的安裝位置。linux

bin：一些命令
locale：一些語言包
resources：包括vscode自帶的插件，界面所須要的一些資源，vscode所須要的其它node模塊（vscode是用nodejs運行的）
其它文件是一些動態連接庫和exe

.vscode

每一個打開的文件夾均可以有單獨的配置，存放在.vscode中，主要包括launch.json、tasks.json、settings.json，分別是調試器設置、任務設置、項目自己的設置（會覆蓋全局的settings.json）。git

~/.vscode

在~/.vscode目錄下，extensions存放了已安裝的擴展，想要學習如何編寫擴展，直接看這個文件夾就能夠了。github

~/AppData/Roaming/Code

在~/AppData/Roaming/Code下，文件夾包括備份、緩存、日誌、cookie、用戶配置等信息，其中用戶配置文件件User是最重要的，它包括：shell

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負責監視進程執行狀況。擴展激活有以下幾種狀況：文件類型被檢測到；目錄下包含某種文件；命令面板觸發；某種按鍵組合觸發。
讀取、寫入編輯器內容。
工做空間。獲取工做空間目錄，狀態欄信息，界面佈局狀況等。
事件。例如打開、關閉、更改某個文件。
編輯交互。包括代碼提示、懸浮提示、錯誤提示等。