使用

命令行使用

帮助：code --help
使用已经打开的窗口来打开文件：code -r
打开文件并滚动到特定行：code -r -g package.json:128
比较两个文件：code -r -d a.txt b.txt
接受管道符数据：ls | code -

图形界面、快捷键使用

光标移动至
- 单词开头/末尾 Ctrl + Left/Right,
- 代码块开头/末尾 Cmd + Shift + \
- 文档首行/末行 Ctrl + Home/End
文本
- 全选/剪切/复制/黏贴/保存 Ctrl A/X/C/V/S
- 文本选择= Shift + 上述光标操作
- 格式化 Alt + Shift + F
- 格式化部分：选中，Ctrl + K + Ctrl + F
行
- 删除 Ctrl + Shift + K
- 剪切/复制/黏贴 Ctrl + X/C/V
- 在当前行的下(上)面新开始一行 Ctrl ( + Shift) + Enter
- 上/下移动 Alt + 上/下
文档
- 查找/替换/符号跳转 Ctrl + F/H/T
- 转到行 Ctrl + G
- 转到文件 Ctrl + P
- 转到符号 Ctrl + Shift + O
- 打开命令面板 Ctrl + Shift + P
窗体
- 关闭Ctrl + W
- 打开关闭侧边栏 Ctrl + B
- 侧边栏位置命令面板toggle side bar pos
- markdown预览 Ctrl + K V
- 1/2/3列 Ctrl + 1/2/3
- 行列切换 Shift + Alt + 0
- 2x2布局命令面板2x2
- Tab切换 Ctrl + Pagedown/Pageup
- 缩放 Ctrl + /- （reset zoom 恢复）
自定义快捷键 Ctrl + K + Ctrl + S
鼠标操作
- 选中单词 双击
- 选中行 三击/单击行号
- 多光标： Alt + 单击
- 代码跳转： Ctrl + 单击
编码
- 代码补全 Ctrl + 空格
- 代码折叠/展开 Ctrl + Shift + [/]
- 参数预览 Ctrl + Shift + Space
- 自动修复建议 Ctrl + .
- 打开终端 Ctrl + Shift + `
- 隐藏/显示面板 Ctrl + J
- 转到上次编辑位置命令面板go to last edit
- 调出最近打开的工作区 Ctrl + R
用户设置
- 面包屑： breadcrumbs
- 小地图： minimap
- 自动格式化：formatOnSave、formatOnType
- 自动保存：autoSave
- 默认语言：default language
其他用户设置
- editor cursor，光标渲染和多光标
- editor find，编辑器内搜索
- editor font，字体
  - 连字字体
```
"editor.fontFamily": "Fira Code","editor.fontLigatures": true
```
- editor format，代码格式化
- editor suggest，自动补全、建议窗口

emment

https://docs.emmet.io/abbrevi...

编辑执行任务 tasks

命令面板输入conf task

shell

{    "version": "2.0.0",    "tasks": [        {            "label": "echo",            "type": "shell",            "command": "echo Hello"        }    ]}

{    "version": "2.0.0",    "tasks": [        {            "label": "echo",            "type": "shell",            "command": "echo",            "args": [                {                    "value": "Hello World",                    "quoting": "escape"                }            ]        }    ]}

process

{ "version": "2.0.0", "tasks": [  {   "label": "chrome",   "type": "process",   "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"，   "windows": {    "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"      },      "linux": {          "command": "/usr/bin/google-chrome"      }  } ]}

group

{ "version": "2.0.0", "tasks": [  {   "label": "test shell",   "type": "shell",   "command": "./scripts/test.sh",   "windows": {    "command": ".\\scripts\\test.cmd"   },   "group": "test",   "presentation": {    "reveal": "always",    "panel": "new"   },   "options": {    "cwd": "",    "env": {},    "shell": {     "executable": "bash"    }   }  } ]}

安装 quick task插件便于可视化

自定义问题分析器

{    "version": "2.0.0",    "tasks": [        {            "label": "echo",            "type": "shell",            "command": "echo",            "args": [                {                    "value": "index.js:5:3: warning: unused variable",                    "quoting": "escape"                }            ],            "problemMatcher": {                "owner": "echo",                "fileLocation": ["relative", "${workspaceFolder}"],                "pattern": {                    "regexp": "^(.*):(\\d + ):(\\d + ):\\s + (warning|error):\\s + (.*)$",                    "file": 1,                    "line": 2,                    "column": 3,                    "severity": 4,                    "message": 5                }            }        }    ]}

多任务

{ "taskName": "compile", "dependsOn": [  "frontend",  "backend" ], "group": {  "kind": "build",  "isDefault": true }}

调试

VS Code 为插件作者提供了一套统一的接口，叫做Debug Adapter Protocol（DAP），插件最终实现调试功能。

自带node调试插件Node Debug
需安装chrome调试插件Debugger for Chrome

vscode 架构

Visual Studio Code / Egret Wing 技术架构

基于Electron（Chromium + node） electron应用结构

vscode源码结构
VSCode 源码阅读

vscode 插件架构

3个主要进程：
- 第一次被启动时会创建一个主进程（main process）
- 每个窗口都会创建一个渲染进程（ Renderer Process）
- 每个窗口都会创建一个执行插件宿主进程（Extension Host）

还有两种特殊的进程：

- 调试进程（Debug Adapter），渲染进程会通过 VS Code Debug Protocol 跟 Debug Adapter 进程通讯。- 语言支持（Language Server）

开发插件

VSCode插件开发急速入门

准备工作

确保安装了Node.js和Git
然后安装Yeoman和VS Code Extension Generator和VSCE：

npm install -g yo@latest generator-code vsce

注册账号 https://aka.ms/SignupAzureDevOps
登录后User settings选择Security,添加token,注意备份,之后要用

yo code myextension创建一个 VS Code 的插件模板,选择类型
cd myextension && code .开始编辑

重要文件

- package.json 记录了node应用和插件的信息- extension.js 当前插件的全部代码- .vscode 官方提供的调试配置、任务配置等

编写js/ts代码插件(New Extension)

extension.js

const vscode = require('vscode');//激活扩展程序时会调用此方法//您的扩展程序在第一次执行命令时被激活 function activate(context) {    //使用控制台输出诊断信息（console.log）和错误（console.error）    //此代码行仅在激活扩展程序时执行一次     console.log('Congratulations, your extension "mdf" is now active!');    //该命令已在package.json文件中定义    //现在使用registerCommand提供命令的实现    //commandId参数必须与package.json中的命令字段匹配     let disposable = vscode.commands.registerCommand('extension.helloWorld', function () {        //每次执行命令时，都会执行此处放置的代码        vscode.window.showInformationMessage('Hello World!');//向用户显示消息框     });    context.subscriptions.push(disposable);}exports.activate = activate;//停用扩展程序时会调用此方法 function deactivate() {}module.exports = {    activate,    deactivate}

package.json

engines 指定了运行这个插件需要的 VS Code 版本
```
"vscode": "^1.29.0"
```
activationEvents 指定了什么情况下这个插件应该被加载并且激活
```
"activationEvents": [    "onCommand:extension.sayHello"]
```

contributes VS Code 会把这个command命令注册到命令面板中

"contributes": {    "commands": [        {            "command": "extension.sayHello",            "title": "Hello World"        }    ]},

调试 F5(会再开一个vscode,请确保电脑内存充足)
查询 API vscode.languages定义文件 vscode.d.ts

编写快捷键插件 (Keymap)

只需编写package.json

"contributes": {    "commands": [        {            "command": "extension.sayHello",            "title": "Hello World"        }    ],   "keybindings": [        {            "key": "ctrl + t",            "command": "extension.sayHello",            "when": "editorTextFocus"        }    ]},

示例：Notepad + + 源码
注意事项："activationEvents": ["*"]永远激活插件可能影响性能，慎用。

编写代码片段 (Code Snippets)

只需编写 snippets/snippets.json(若不分享插件则本地命令面板输入snippets即可编写)
snippets.json

{    "Print to console": {        "prefix": "log",        "body": [            "console.log(${1:i});",            "console.log(${1:i} + 1); // ${1:i} + 1",            "$2"        ],        "description": "Log output to console"    }}

package.json

"contributes": {    "snippets": [        {            "language": "javascript",            "path": "./snippets/snippets.json"        }    ]}

snippet-官网资料

编写主题插件(New Color Theme)

编写themes/mytheme-color-theme.json
以及package.json

"contributes": {    "themes": [        {            "label": "mytheme",            "uiTheme": "vs-dark",            "path": "./themes/mytheme-color-theme.json"        }    ]}

编写语言支持（New Language Support）

tmLanguage:语言语法定义文件（正则搜索代码并标注类型）参考文档
Language id:语言唯一标识
Language name:语言名字
File extensions 文件后缀

package.json

configurations:./ language-configuration.json 语言的配置信息所在文件的相对地址
language-configuration.json 语言相关信息的模板

{    "comments": {        "lineComment": "//",// 单行注释        "blockComment": [ "/*", "*/" ]//多行注释    },    "brackets": [// 支持的括号类型        ["{", "}"],        ["[", "]"],        ["(", ")"]    ],    "autoClosingPairs": [// 键入时自动关闭的符号        ["{", "}"],        ["[", "]"],        ["(", ")"],        ["\"", "\""],        ["'", "'"]    ],    "surroundingPairs": [// 可用于包围选区的符号         ["{", "}"],        ["[", "]"],        ["(", ")"],        ["\"", "\""],        ["'", "'"]    ]，    "folding": {//可被折叠的代码段的开头和结尾        "markers": {            "start": "^\\s*//#region",            "end": "^\\s*//#endregion"        }    },    "wordPattern": "(-?\\d*\\.\\d\\w*)|([^\\`\\~\\!\\@\\#\\%\\^\\&\\*\\(\\)\\-\\=\\ + \\[\\{\\]\\}\\\\\\|\\;\\:\\'\\\"\\,\\.\\<\\>\\/\\?\\s] + )",//一个单词    "indentationRules": {//如何根据一行的内容来控制缩进        "increaseIndentPattern": "^\\s*((begin|class|(private|protected)\\s + def|def|else|elsif|ensure|for|if|module|rescue|unless|until|when|while|case)|([^#]*\\sdo\\b)|([^#]*=\\s*(case|if|unless)))\\b([^#\\{;]|(\"|'|\/).*\\4)*(#.*)?$",        "decreaseIndentPattern": "^\\s*(}\\]]?\\s*(#|$)|\\.[a-zA-Z_]\\w*\\b)|(end|rescue|ensure|else|elsif|when)\\b)"    }}

插件发布

插件市场
使用vsce工具命令创建发布账号vsce create-publisher your-publisher-name
登录账号vsce login your-publisher-name
发布vsce publish
发布-官方文档

官方demo

https://github.com/Microsoft/...

其他教程

VSCode插件开发全攻略

API使用

工作台API

Information、Warning、Error消息

vscode.window.showInformationMessage('Hello World', 'Yes', 'No').then(value => {    value=='Yes'&&vscode.window.showWarningMessage('User press ' + value);    value=='No'&&vscode.window.showErrorMessage('User press ' + value);})

QuickPick

给用户提供了一系列选项，然后根据用户选择的选项进行下一步的操作。

vscode.window.showQuickPick(['first', 'second', 'third']).then(value => {   vscode.window.showInformationMessage('User choose ' + value);})

vscode.commands.registerCommand('extension.sayHello', () => {    vscode.window.showQuickPick([{        label: 'first',        description: 'first item',        detail: 'first item details'    }, {        label: 'second',        description: 'second item',        detail: 'second item details'    }]).then(value => {        vscode.window.showInformationMessage('User choose ' + value.label);    })});

面板(Panel) API

问题面板

let collection = vscode.languages.createDiagnosticCollection('myextension');    let uri = vscode.window.activeTextEditor.document.uri;    collection.set(uri, [        {            range: new vscode.Range(0, 0, 0, 1),            message: 'We found an error'        }    ]);

输出面板

let channel =vscode.window.createOutputChannel('MyExtension');channel.appendLine('Hello World');

调试面板
终端面板

视图(TreeView) API

vscode.window.registerTreeDataProvider('myextension', {    getChildren: (element) => {        if (element) {            return null;        }        return ['first', 'second', 'third'];    },    getTreeItem: (element) => {        return {            label: element,            tooltip: 'my ' + element + ' item'        }    }})

package.json的contributes

"contributes": {        "views": {   "explorer": [    {     "id": "myextension",     "name": "My Extension"                }            ]        }    }

WebView API 来生成任意的编辑器内容
FileSystemProvider 或者 TextDocumentContentProvider 来为 VS Code 提供类似于本地文件的文本内容

装饰器(Decorations) API

let decorationType = vscode.window.createTextEditorDecorationType({    backgroundColor: '#fff',    border: '1px solid red;',    fontStyle: 'italic',    letterSpacing: '3px'});let editor = vscode.window.activeTextEditor;editor.setDecorations(decorationType, [new vscode.Range(0, 0, 0, 1)]);

createTextEditorDecorationType(DecorationRenderOptions)

DecorationRenderOptions={    //颜色和背景相关    backgroundColor?: string | ThemeColor;    color?: string | ThemeColor;    overviewRulerColor?: string | ThemeColor;    //边框    border?: string;    borderColor?: string | ThemeColor;    borderRadius?: string;    borderSpacing?: string;    borderStyle?: string;    borderWidth?: string;    //轮廓    outline?: string;    outlineColor?: string | ThemeColor;    outlineStyle?: string;    outlineWidth?: string;    //字体    fontStyle?: string;    fontWeight?: string;    opacity?: string;    letterSpacing?: string;    //其他    gutterIconPath?: string | Uri;    gutterIconSize?: string;    before?: ThemableDecorationAttachmentRenderOptions;    after?: ThemableDecorationAttachmentRenderOptions;}

ThemeColor

new vscode.ThemeColor('editorWarning.foreground')

插件参考：Rainbow Brackets 和 Indent Rainbow

插件 API 设计模式

发布流程：

提议(Proposal)，API 在 vscode.proposed.d.ts文件中，
维护团队review，要点：
- 插件 API 不会将 UI 直接暴露给插件。插件提供内容，VS Code 负责渲染。增量更新，尽可能地减少 VS Code 重新渲染
- 长时间运行的任务应该支持 Promise，并可以取消
- 插件 API 能够正确地处理对象的生命周期。VS Code 使用了 Dispose 模式，运行dispose可以将这个对象销毁。
稳定版本(Stable)， API 则是在 vscode.d.ts 里

Node.js 模块使用:

使用模块要克制
treeshaking
Native Module：不用担心 Electron 升级的问题；不同的平台要分别编译
Web Assembly：无法访问系统 API

参考

极客时间-玩转vscode

your-first-extension

FEBASEvscode使用原理插件开发笔记

使用

命令行使用

图形界面、快捷键使用

emment

编辑执行任务 tasks

shell

process

group

自定义问题分析器

多任务

更多资料

调试

vscode 架构

vscode 插件架构

开发插件

准备工作

编写js/ts代码插件(New Extension)

编写快捷键插件 (Keymap)

编写代码片段 (Code Snippets)

编写主题插件(New Color Theme)

编写语言支持（New Language Support）

插件发布

官方demo

其他教程

API使用

工作台API

面板(Panel) API

视图(TreeView) API

装饰器(Decorations) API

插件 API 设计模式

参考