FE.BASEvscode运用、道理、插件开辟笔记

敕令行运用

• 协助：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
  • 2&＃215;2规划 敕令面板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， 自动补全、发起窗口

https://docs.emmet.io/abbrevi&＃8230;

敕令面板输入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
}
}

更多材料

https://code.visualstudio.com&＃8230;

VS Code 为插件作者供应了一套一致的接口，叫做Debug Adapter Protocol（DAP），插件终究完成调试功用。

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

Visual Studio Code / Egret Wing 手艺架构

基于Electron（Chromium + node） electron运用构造

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/&＃8230;

其他教程

VSCode插件开辟全攻略

事情台API

1. 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);
})

1. 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

1. 题目面板

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'
}
]);

1. 输出面板

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

宣布流程：

• 发起(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