Zenn
📝

VS Code拡張機能の開発メモ

2023/08/03に公開
VS Code 拡張機能
tech

プロジェクト作成

volta install node@18.17.0
 
npm install generator-code
npx yo code
? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? vscode-k8s-manifest-commands
? What's the identifier of your extension? vs-k8s-manifest-commands
? What's the description of your extension?
? Initialize a git repository? No
? Bundle the source code with webpack? Yes     
? Which package manager to use? npm

Package

パッケージ作成

npm i vsce -D
package.json
  "scripts": {
    "build": "vsce package",

拡張機能一覧での表示を良い感じにする

アイコン画像は128*128で用意する（例: https://jp.freepik.com/icons ）

package.json
  "displayName": "k8s manifest commands",
  "icon": "images/icon.png",
  "publisher": "proyuki02",

コマンドパレットに日本語を併記する（多言語対応）

nlsファイル作成して、contributesを変数にする

package.nls.json
{
  "commands.apply": "kubectl apply"
}
package.nls.ja.json
{
  "commands.apply": "マニフェストを適用"
}
package.json
  "contributes": {
    "commands": [
      {
        "command": "vscode-k8s-manifest-commands.apply",
        "category": "k8s-manifest",
        "title": "%commands.apply%"
      }
    ]
  },

Get

開いているファイルパスの取得

const editor = vscode.window.activeTextEditor;
const path = editor.document.uri.path;

開いているファイルの内容を取得

const editor = vscode.window.activeTextEditor;
const text = editor.document.getText();

// 選択されているテキスト
const selectedText = editor.document.getText(editor.selection);

Exec

システムコマンドの実行

execSyncを使う

// kubectxの結果からnamespaceを取得
const { execSync } = require("child_process");
const kubectxOutput = execSync("kubectx");
const ctx = kubectxOutput
  .toString()
  .match(new RegExp(`${cluster}.*${namespace}`));
console.log({ ctx });
if (!ctx) {
  vscode.window.showInformationMessage("Not found namespace in kubectx.");
  return;
}

ターミナル操作

Doc: https://code.visualstudio.com/api/references/vscode-api

// namespaceの選択
const terminal = vscode.window.createTerminal("kubectl apply");
terminal.show();
terminal.sendText(`kubectx "${ctx}"`);
 
// apply
terminal.sendText(`kubectl apply -f "${path}"`, false);

Discussion