国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

FE.BASE-vscode使用、原理、插件開發筆記

MingjunYang / 2393人閱讀

摘要:插件提供內容,負責渲染。增量更新,盡可能地減少重新渲染長時間運行的任務應該支持,并可以取消插件能夠正確地處理對象的生命周期。使用了模式,運行可以將這個對象銷毀。

使用 命令行使用

幫助: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)GoogleChromeApplicationchrome.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	est.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...

調試

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": "http://",// 單行注釋
        "blockComment": [ "/*", "*/" ]//多行注釋
    },
    "brackets": [// 支持的括號類型
        ["{", "}"],
        ["[", "]"],
        ["(", ")"]
    ],
    "autoClosingPairs": [// 鍵入時自動關閉的符號
        ["{", "}"],
        ["[", "]"],
        ["(", ")"],
        [""", """],
        [""", """]
    ],
    "surroundingPairs": [// 可用于包圍選區的符號 
        ["{", "}"],
        ["[", "]"],
        ["(", ")"],
        [""", """],
        [""", """]
    ],
    "folding": {//可被折疊的代碼段的開頭和結尾
        "markers": {
            "start": "^s*//#region",
            "end": "^s*//#endregion"
        }
    },
    "wordPattern": "(-?d*.dw*)|([^`~!@#\%^&*()-= + [{]}|;:"",.<>/?s] + )",//一個單詞
    "indentationRules": {//如何根據一行的內容來控制縮進
        "increaseIndentPattern": "^s*((begin|class|(private|protected)s + def|def|else|elsif|ensure|for|if|module|rescue|unless|until|when|while|case)|([^#]*sdo)|([^#]*=s*(case|if|unless)))([^#{;]|("|"|/).*4)*(#.*)?$",
        "decreaseIndentPattern": "^s*(}]]?s*(#|$)|.[a-zA-Z_]w*)|(end|rescue|ensure|else|elsif|when))"
    }
}
插件發布

插件市場
使用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

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/109503.html

相關文章

  • 關于Vue2一些值得推薦的文章 -- 五、六月份

    摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...

    sutaking 評論0 收藏0
  • 關于Vue2一些值得推薦的文章 -- 五、六月份

    摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...

    khs1994 評論0 收藏0
  • cordova研習筆記(一) —— 初試牛刀之cordova.js概要

    摘要:任何初始化任務應該在文件中的事件的事件處理函數中。這個配置文件有幾個地方很關鍵,一開始沒有認真看,將插件導進工程跑的時候各種問題,十分頭痛,不得不重新認真看看文檔。 前言 來新公司的第一個任務,研究hybrid App中間層實現原理,做中間層插件開發。這個任務挺有意思,也很有挑戰性,之前在DCloud雖然做過5+ App開發,但是中間層的東西確實涉及不多。本系列文章屬于系列開篇cord...

    buildupchao 評論0 收藏0
  • 前端學習資源匯總

    摘要:建立該倉庫的目的主要是整理收集學習資源,統一管理,方便隨時查找。目前整合的學習資源只是前端方向的,可能會存在漏缺比較好的資源,需要慢慢的完善它,歡迎在該上補充資源或者提供寶貴的建議。 說明 平時的學習資源都比較的凌亂,看到好的資源都是直接收藏在瀏覽器的收藏夾中,這樣其實并不方便,整理在云筆記上,也不方便查看修改記錄,索性就整理在 github 上并開源出來,希望幫助大家能夠更快的找到需...

    SnaiLiu 評論0 收藏0

發表評論

0條評論

MingjunYang

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<