欢乐颂小说结局是什么,古风,梦入神机

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

保姆級(jí)指南：一文擁有屬于你的Vscode插件

背景

([\u4e00-\u9fa5]+)([\da-zA-Z]+)替換為$1 $2：中文和英文要有一個(gè)空格；
([\da-zA-Z]+)([\u4e00-\u9fa5]+)替換為$1 $2：中文和英文要有一個(gè)空格；
!\[.+\]替換為![]：處理圖片描述；
頭部插入主題，內(nèi)容如下：

---
theme: cyanosis
highlight: atom-one-dark
---
> 自我介紹

這些動(dòng)作每次需要人為處理，費(fèi)時(shí)費(fèi)力且易出錯(cuò)，固化流程嘗試改用 vscode 插件自動(dòng)實(shí)現(xiàn)，遂有 edit-article 插件出現(xiàn)；

當(dāng)前實(shí)現(xiàn)效果

本文目標(biāo)

實(shí)現(xiàn)一款自己的 vscode 插件并發(fā)布在應(yīng)用市場(chǎng)，所有人可以在 vscode 擴(kuò)展中搜索并下載;由于文章目標(biāo)是實(shí)現(xiàn)效果，所以不打算用自己實(shí)現(xiàn)的 edit-article 插件作為案例。

思路：vscode 插件是個(gè)node應(yīng)用，那我們只需要找到對(duì)應(yīng)的腳手架創(chuàng)建基礎(chǔ)，再實(shí)現(xiàn)我們插件特定的功能即可。
本文 demo 插件功能：快捷鍵反轉(zhuǎn)選中的字符串。
實(shí)現(xiàn)效果：

實(shí)戰(zhàn)系列文章專注產(chǎn)出，看一個(gè)東西出現(xiàn)的滿足感是會(huì)上癮的，讓我們拋棄文檔式的學(xué)習(xí)，開始吧!

腳手架創(chuàng)建基礎(chǔ)模板

安裝及使用

首先你需要的是 yeoman，一個(gè)腳手架工具。通過(guò) yeoman 你可以快速創(chuàng)建代碼模板，如下所示：

npm install -g yo

然后你需要安裝 VS Code 的模板：

npm install -g generator-code

有了腳手架，你就可以創(chuàng)建一個(gè) VS Code 的插件模板了。接下來(lái)運(yùn)行：

yo code myextension

請(qǐng)注意，第三個(gè)參數(shù)將是你新創(chuàng)建的插件的文件夾名字。

VS Code 插件腳手架介紹

由上圖，你可以看到有七個(gè)插件模板：

前兩個(gè)是通過(guò)編程來(lái)提供插件功能，你可以選擇 TypeScript 或者 JavaScript，結(jié)果都是類似的，因?yàn)?TypeScript 最后也需要被編譯成 JavaScript 再發(fā)布;
第三個(gè)是主題插件，你可以將你自己創(chuàng)建的主題分享給其他人;
第四個(gè)是語(yǔ)言支持，也就是語(yǔ)法高亮、語(yǔ)言定義等;
第五個(gè)是代碼片段的分享;
第六個(gè)則是分享快捷鍵;
第七個(gè)就是對(duì)多個(gè)插件進(jìn)行組合分享。

先實(shí)現(xiàn)最基礎(chǔ)的New Extension (JavaScript)，即javascript版模板。

接下來(lái)，你會(huì)依次被提示輸入插件的名字、介紹、想要用哪個(gè)賬號(hào)發(fā)布、是否要打開 type check 以及是否要使用 git 等。你可以暫時(shí)按照我的樣例進(jìn)行輸入，之后也可以再根據(jù)需要修改。

項(xiàng)目基礎(chǔ)信息介紹

切換到項(xiàng)目根目錄；

cd myextension

項(xiàng)目目錄結(jié)構(gòu)及對(duì)應(yīng)信息；’


├── .vscode
│ ├── launch.json // 插件加載和調(diào)試的配置
│ └── tasks.json // 配置 TypeScript 編譯任務(wù)
├── .gitignore // 忽略構(gòu)建輸出和 node_modules 文件
├── README.md // 插件文檔
├── CHANGELOG.md // 插件更新日志
├── extension.ts // 插件源代碼
├── package.json // 插件配置清單
├── jsconfig.json //

查看效果

啟動(dòng)默認(rèn)項(xiàng)目，按下F5啟動(dòng)調(diào)試，如果打開了一個(gè)vscode新窗口，試試打開命令面板執(zhí)行hello world，如果執(zhí)行出現(xiàn)了彈窗，就說(shuō)明我們創(chuàng)建 vscode 插件項(xiàng)目成功啦。

命令面板喚起快捷鍵

mac：cmd + shift + p
win：ctrl + shift + p

關(guān)于面板的更多信息可以閱讀：你不知道的 vscode 之空間控制。

實(shí)現(xiàn)業(yè)務(wù) -- 反轉(zhuǎn)字符串

我們?cè)谥耙呀?jīng)知道了怎么用腳手架創(chuàng)建 vscode 插件項(xiàng)目，接下來(lái)就是實(shí)現(xiàn)我們自己的業(yè)務(wù)邏輯了。本章目標(biāo)只有兩個(gè)。

功能：實(shí)現(xiàn)命令【選中文字反轉(zhuǎn)字符串】

package.json 中注冊(cè)命令和對(duì)應(yīng)的描述；
extension.js 中完成命令的實(shí)現(xiàn)。

優(yōu)化：綁定快捷鍵

注意：建議在 launch.json 中的“args”中添加"--disable-extensions"，阻止其他插件加載，不然要調(diào)試的插件加載很慢。

命令的注冊(cè)：package.json

我們先了解下【命令的注冊(cè)】，先說(shuō)流程

package.json 中注冊(cè)命令和對(duì)應(yīng)的描述
extension.js 中完成命令的實(shí)現(xiàn)

package.json 中注冊(cè)命令和對(duì)應(yīng)的描述

在package.json中存在contributes對(duì)象，有屬性commands對(duì)應(yīng)著命令數(shù)組，每個(gè)命令是一個(gè)對(duì)象有如下屬性

command：命令的 key，在命令的實(shí)現(xiàn)中會(huì)被用到
title：命令描述，會(huì)出現(xiàn)在命令面板中

配置如下：

"commands": [
      {
        "command": "edit-article.reserve",
        "title": "Hello reserve"
      }
    ],

配置完成!

命令的實(shí)現(xiàn)：extension.js

前置總結(jié)

package.json中通過(guò)配置activationEvents，定義插件的激活時(shí)機(jī)。
項(xiàng)目根路徑的extension.js文件中通過(guò)active鉤子注冊(cè)命令和對(duì)應(yīng)的實(shí)現(xiàn)。

激活時(shí)機(jī)：activationEvents

我們的業(yè)務(wù)邏輯實(shí)現(xiàn)在項(xiàng)目根路徑的extension.js文件中，默認(rèn)導(dǎo)出兩個(gè)鉤子方法。

activate：插件激活時(shí)
deactivate：插件關(guān)閉時(shí)

module.exports = {
  activate,
  deactivate,
};

這里的激活時(shí)機(jī)并不是一打開 vscode 就執(zhí)行，而是需要在package.json中存在一個(gè)屬性activationEvents，值是一個(gè)數(shù)組，存儲(chǔ)著所有會(huì)觸發(fā)插件激活的時(shí)機(jī);改為打開 js 文件時(shí)才會(huì)激活，配置如下：

"activationEvents": [
    "onLanguage:javascript"
  ],

業(yè)務(wù)邏輯實(shí)現(xiàn)

extension.js文件中還引入了一個(gè)vscode對(duì)象，這是 vscode 提供能力的載體，我們?cè)诤竺鎲为?dú)分析。

const vscode = require("vscode");

這里的 active 函數(shù)實(shí)現(xiàn)的邏輯很清晰。首先，我們要讀取的信息就是當(dāng)前的文檔信息和主光標(biāo)的信息。

let document = editor.document;
let selection = editor.selection;

有了這兩個(gè)信息，讀取光標(biāo)選中的內(nèi)容就簡(jiǎn)單了。

let text = document.getText(selection);

document 一共哪些 API 這里我就不介紹了，相信你可以自己探索，這里我們使用就是 getText，以獲取某段代碼。

接下來(lái)就是將這段文本進(jìn)行反轉(zhuǎn)了，我們可以寫一個(gè)非常簡(jiǎn)單的版本，將字符串分割成字母數(shù)組，然后反轉(zhuǎn)，最后重新組合成字符串。

let result = text.split('').reverse().join('');

最后一步操作就是將原來(lái)編輯器內(nèi)的文本進(jìn)行替換了。此時(shí)我們就要用到 edit 這個(gè) API 函數(shù) 了。值得注意的是，這個(gè) API 的第一參數(shù)，是一個(gè) callback，callback 的參數(shù)是 editBuilder，也就是真正用于修改代碼的對(duì)象。

editBuilder 有以下幾個(gè) API：

delete
insert
replace
setEndOfLine

這里我們要使用的當(dāng)然就是 replace 了。

editBuilder.replace(selection, result);

我們只需將原先的 selection 里的內(nèi)容，替換成新的 result 即可。

完整代碼如下：

on, result);
      });
    }
  );
  context.subscriptions.push(reserve);
}
function deactivate() {}

module.exports = {
  activate,
  deactivate,
};

至此，如何注冊(cè)一個(gè)命令我們也就了解到了，當(dāng)我們要實(shí)現(xiàn)其他功能，自然重點(diǎn)就成了vscode這個(gè)對(duì)象，在文末【擴(kuò)展】模塊分享。

優(yōu)化：綁定快捷鍵

實(shí)現(xiàn)綁定

支持我們完成了命令的設(shè)定、命令的實(shí)現(xiàn)，但每次都要自己找命令面板去執(zhí)行;如果我們能用一個(gè)快捷鍵綁定命令，按下快捷鍵就執(zhí)行，會(huì)不會(huì)方便很多?說(shuō)干就干!

在package.json的contributes中還存在keybindings屬性，就是用于實(shí)現(xiàn)綁定快捷鍵的，這是一個(gè)對(duì)象數(shù)組，存儲(chǔ)的對(duì)象結(jié)構(gòu)如下：

key：快捷鍵
command：命令
when：何時(shí)觸發(fā)

假定我們將反轉(zhuǎn)命令綁定在ctrl+shift+r上，就可以添加如下內(nèi)容：

"keybindings": [
      {
        "key": "ctrl+shift+r",
        "command": "edit-article.reserve"
      }
    ]

實(shí)現(xiàn)效果

發(fā)布插件

終于，到了最激動(dòng)人心的時(shí)刻!還記得第一次在瀏覽器上看到我們頁(yè)面時(shí)的激動(dòng)嗎?再一次，讓我們回到那個(gè)瞬間。按后文一步步走，遇到過(guò)按別人文章走結(jié)果遇問(wèn)題卡一半的痛苦，所以詳細(xì)(啰嗦)了點(diǎn)，大家多擔(dān)待，無(wú)論如何，結(jié)果親測(cè)有效！

要發(fā)布，先創(chuàng)建賬號(hào)

Visual Studio Code 的應(yīng)用市場(chǎng)基于微軟自己的Azure DevOps;所以需要在兩個(gè)平臺(tái)都注冊(cè)好賬號(hào)。有賬號(hào)后，根據(jù) Azure DevOps 平臺(tái)生成PAT(Personal Access Token，個(gè)人訪問(wèn)令牌);根據(jù)應(yīng)用市場(chǎng)創(chuàng)建發(fā)布者賬號(hào)，有了這兩者就能發(fā)布了。

整理如下：

注冊(cè)賬號(hào)；
根據(jù) Azure DevOps 平臺(tái)生成PAT(Personal Access Token，個(gè)人訪問(wèn)令牌)；
根據(jù)應(yīng)用市場(chǎng)創(chuàng)建發(fā)布者賬號(hào)；
根據(jù) vsce 在本地發(fā)布。

根據(jù) Azure DevOps 平臺(tái)生成 token

登錄 Microsoft

首先訪問(wèn)Microsoft 官網(wǎng)登錄你的Microsoft賬號(hào)，沒(méi)有的先注冊(cè)一個(gè)：

中間會(huì)要求輸入郵箱，沒(méi)有也可以直接通過(guò)手機(jī)號(hào)獲取一個(gè)；

一路 next，直到創(chuàng)建成功。

登錄 Azure

然后訪問(wèn)：Azure 官網(wǎng) ，如果你從來(lái)沒(méi)有使用過(guò) Azure，那么會(huì)看到如下提示：

點(diǎn)擊繼續(xù)，默認(rèn)會(huì)創(chuàng)建一個(gè)以郵箱前綴為名的組織。(只需要填寫驗(yàn)證碼即可)

創(chuàng)建令牌

默認(rèn)進(jìn)入組織的主頁(yè)后，點(diǎn)擊右上角的Security：

點(diǎn)擊創(chuàng)建新的個(gè)人訪問(wèn)令牌，這里特別要注意

Organization要選擇`all accessible organizations``
``Scopes要選擇Full access

否則后面發(fā)布會(huì)失敗。

創(chuàng)建令牌成功后你需要本地記下來(lái)，因?yàn)榫W(wǎng)站是不會(huì)幫你保存的。

根據(jù)應(yīng)用市場(chǎng)創(chuàng)建發(fā)布者賬號(hào)

訪問(wèn)應(yīng)用市場(chǎng)，填完名稱，滑到最后保存即可。

至此，我們就有了如下內(nèi)容：

PAT：Personal Access Token，個(gè)人訪問(wèn)令牌
publisher：發(fā)布者賬號(hào)

就可以執(zhí)行在本地發(fā)布的動(dòng)作啦!

根據(jù) vsce 在本地發(fā)布

進(jìn)入自己的插件，如果沒(méi)有，可以閱讀【插件腳手架：如何創(chuàng)建一個(gè)插件】了解創(chuàng)建。

配置插件信息

在發(fā)布前，我們需要配置一些項(xiàng)目信息在 package.json 中，下面是必備信息

publisher：發(fā)布者 id；
activationEvents：擴(kuò)展的激活事件，建議先填指定文件類型激活(如 js 文件，onLanguage:javascript)配置項(xiàng)可見(jiàn)官網(wǎng)文檔；
repository：倉(cāng)庫(kù)地址。

其他還有很多配置，我們慢慢了解，文末放置 package.json 配置總覽。

安裝命令包

利用發(fā)布工具發(fā)布插件

vsce是一個(gè)用于將插件發(fā)布到市場(chǎng)上的命令行工具。

請(qǐng)確認(rèn)本機(jī)已經(jīng)安裝了Node.js，然后運(yùn)行：

npm install -g vsce

然后你就可以在命令行里直接使用vsce了。下面是一個(gè)快速發(fā)布的示例：

登陸

vsce login [publisherName]
# 然后輸入之前獲取到的 token

執(zhí)行發(fā)布(這里的 patch 是指自動(dòng)更新版本后發(fā)布，不帶也可以，就得手動(dòng)修改package.json文件了)。

$ vsce publish patch
Publishing [email protected]...
Successfully published [email protected]!

完成后過(guò)幾分鐘就可以去 vscode 的擴(kuò)展區(qū)看自己的插件啦!

查看結(jié)果

一圖勝千言，靜靜體會(huì)成就感的美妙吧!

尾聲

至此，閱讀本文的小伙伴應(yīng)該已經(jīng)在插件市場(chǎng)上可以找到自己的插件啦。

老規(guī)矩，分享一個(gè)感悟：重視你的、甚至是別人的每一個(gè)吐槽，嘗試解決它，這就是成長(zhǎng)。

擴(kuò)展知識(shí)：package.json 配置總覽

// package.json
{
    "name": "vscode-demo",
    "displayName": "vscode-demo",
    "description": "",
    "version": "0.0.1",
    "repository"："",// 倉(cāng)庫(kù)地址
    "publisher": "", //發(fā)布者 id，后面會(huì)講怎么發(fā)布到插件市場(chǎng)
    "engines": { //vscode 最低版本
        "vscode": "^1.57.0"
    },
    "categories": [ //插件市場(chǎng)的分類 可以設(shè)置成語(yǔ)言主題等其他類型
        "Other"
    ],
    "activationEvents": [ //擴(kuò)展的激活事件
        "onCommand:vscode-demo.helloWorld", //調(diào)用命令時(shí)激活
        "onLanguage:python", //py 時(shí)激活插件
        "workspaceContains:**/.editorconfig",// 文件夾打開時(shí)激活
        "onDebug",//調(diào)試前激活
        ...
        "*" //啟動(dòng)時(shí)候激活，使用這個(gè)不需要設(shè)置其他的
    ],
    "main": "./extension.js", //指定插件入口文件
    "icon": "", //插件圖標(biāo)
    "contributes": { //大部分的配置都要在這里配置
        "commands":[], //配置命令,如果需要暴露給用戶使用的需要在這里配置
        "menus":[], //配置菜單
        "submenus":[], //配置子菜單會(huì)用到
        "languages": [], //配置語(yǔ)言
        "grammars":[], //為語(yǔ)言配置 TextMate 語(yǔ)法
        "keybindings":[], //配置快捷鍵
        "snippets":[], //配置代碼片段
        "themes":[], //配置主題
        "views":[], //配置活動(dòng)欄視圖
        "viewsWelcome":[], //配置左側(cè)視圖歡迎頁(yè)
        "viewsContainers":[], //配置視圖容器
        "configuration":{},  //配置插件配置
        "configurationDefaults":{}, //配置插件默認(rèn)配置
        "colors":{},
        "problemMatchers":{},
        "taskDefinitions":{},
        "typescriptServerPlugins":{}
    },
}

擴(kuò)展知識(shí)：vscode 發(fā)布相關(guān)

發(fā)布鉤子

預(yù)發(fā)布步驟

可以在清單文件中添加預(yù)發(fā)布步驟，下面的命令會(huì)在插件每次打包時(shí)執(zhí)行：

{
  "name": "uuid",
  "version": "0.0.1",
  "publisher": "joaomoreno",
  "engines": {
    "vscode": "0.10.x"
  },
  "scripts": {
    "vscode:prepublish": "tsc"
  }
}

上面的示例會(huì)在每次插件打包時(shí)調(diào)用 Typescript 編譯器。

增量更新插件版本

用 SemVer 語(yǔ)義標(biāo)識(shí)符：major(最大位加一)，minor(次位加一)，patch(最小位加一)增量更新插件版本號(hào)。

例如，你想把插件從 1.0.0 更新到 1.1.0，那么加上minor：

vsce publish minor

插件package.json的 version 會(huì)先更新，然后才發(fā)布插件。

你也可以通過(guò)命令行指定版本號(hào)：

sce publish 2.0.1

更多可用的命令參數(shù)，請(qǐng)使用vsce --help

擴(kuò)展知識(shí)：vscode 提供能力

獲取編輯器對(duì)象

既然是編輯器相關(guān)的命令，那么我們肯定需要能夠訪問(wèn)到編輯器，以及其中的內(nèi)容。首先我們要獲取的就是：當(dāng)前工作區(qū)內(nèi)，用戶正在使用的編輯器。

const vscode = require('vscode');
let editor = vscode.window.activeTextEditor;

我們重點(diǎn)關(guān)注的也是這個(gè)對(duì)象。

有了這個(gè)編輯器，我們就能獲取非常多的信息了。不過(guò)先別急，editor 這個(gè)變量并非一定總是有效的值，比如用戶現(xiàn)在并沒(méi)有打開任何文件，編輯器是空的，那么此時(shí) editor 的值就是 undefined。所以，在正式使用 editor 之前，我們要判斷一下，editor 是否為 undefined，是的話就結(jié)束命令的運(yùn)行。

if (!editor) {
    return;
}

接下來(lái)，我們可以輸入 editor.，自動(dòng)補(bǔ)全立刻給我們提示了不少的屬性。

編輯器對(duì)象能力

document，也就是當(dāng)前編輯器中的文檔內(nèi)容;
edit，用于修改編輯器中的內(nèi)容;
revealRange，用于將某段代碼滾動(dòng)到當(dāng)前窗口中;
selection，當(dāng)前編輯器內(nèi)的主光標(biāo);
selections，當(dāng)前編輯器中的所有光標(biāo)，第一個(gè)光標(biāo)就是主光標(biāo)，后面的則是用戶創(chuàng)建出來(lái)的多光標(biāo);
setDecorations，設(shè)置編輯器裝飾器(我會(huì)在后面的章節(jié)專門介紹這個(gè) API 的使用)。

當(dāng)前名稱：保姆級(jí)指南：一文擁有屬于你的Vscode插件
本文路徑：http://m.fisionsoft.com.cn/article/dpccpog.html

新聞中心

背景

相關(guān)鏈接

當(dāng)前實(shí)現(xiàn)效果

本文目標(biāo)

腳手架創(chuàng)建基礎(chǔ)模板

安裝及使用

VS Code 插件腳手架介紹

項(xiàng)目基礎(chǔ)信息介紹

實(shí)現(xiàn)業(yè)務(wù) -- 反轉(zhuǎn)字符串

命令的注冊(cè)：package.json

命令的實(shí)現(xiàn)：extension.js

優(yōu)化：綁定快捷鍵

實(shí)現(xiàn)綁定

實(shí)現(xiàn)效果

發(fā)布插件

要發(fā)布，先創(chuàng)建賬號(hào)

根據(jù) Azure DevOps 平臺(tái)生成 token

登錄 Microsoft

登錄 Azure

創(chuàng)建令牌

根據(jù)應(yīng)用市場(chǎng)創(chuàng)建發(fā)布者賬號(hào)

根據(jù) vsce 在本地發(fā)布

尾聲

擴(kuò)展知識(shí)：package.json 配置總覽

擴(kuò)展知識(shí)：vscode 發(fā)布相關(guān)

發(fā)布鉤子

增量更新插件版本

擴(kuò)展知識(shí)：vscode 提供能力

獲取編輯器對(duì)象

編輯器對(duì)象能力

其他資訊

新聞中心

背景

相關(guān)鏈接

當(dāng)前實(shí)現(xiàn)效果

本文目標(biāo)

腳手架創(chuàng)建基礎(chǔ)模板

安裝及使用

VS Code 插件腳手架介紹

項(xiàng)目基礎(chǔ)信息介紹

實(shí)現(xiàn)業(yè)務(wù) -- 反轉(zhuǎn)字符串

命令的注冊(cè)：package.json

命令的實(shí)現(xiàn)：extension.js

優(yōu)化：綁定快捷鍵

實(shí)現(xiàn)綁定

實(shí)現(xiàn)效果

發(fā)布插件

要發(fā)布，先創(chuàng)建賬號(hào)

根據(jù) Azure DevOps 平臺(tái)生成 token

登錄 Microsoft

登錄 Azure

創(chuàng)建令牌

根據(jù)應(yīng)用市場(chǎng)創(chuàng)建發(fā)布者賬號(hào)

根據(jù) vsce 在本地發(fā)布

尾聲

擴(kuò)展知識(shí)：package.json 配置總覽

擴(kuò)展知識(shí)：vscode 發(fā)布相關(guān)

發(fā)布鉤子

增量更新插件版本

擴(kuò)展知識(shí)：vscode 提供能力

獲取編輯器對(duì)象

編輯器對(duì)象能力

其他資訊

要發(fā)布，先創(chuàng)建賬號(hào)