Visual Studio Code 最小構成の拡張機能をJavaScriptで作成

カテゴリー：JavaScript

記事作成日：2019-03-06

Visual Studio Code で自分用の拡張機能(extension)をJavaScriptで作成する。 
公開するわけではなく、ローカルのみの自分用なので余計な記述は省いてとにかく動くことを目的とする。

## Visual Studio Code のインストール

Visual Studio Code は当然ながら必要。検索してインストールしておく。

## Node.js のインストール

こちらからNode.jsをインストールしておく。 
<a href="https://nodejs.org/ja/" target="_blank">https://nodejs.org/ja/</a>

## VS Code Generator で拡張機能のひな型を作成する

こちらの通り実行すればひな型が生成されるが、今回は使用しない。 
<a href="https://code.visualstudio.com/api/get-started/your-first-extension" target="_blank">https://code.visualstudio.com/api/get-started/your-first-extension</a> 
```
npm install -g yo generator-code
yo code
```
HelloWorldのひな型もダウンロードできる。 
ひな型がどのようなものか確認しておくとよいだろう。

今回はこれらのひな型は使用しない。

## Azure DevOps でパーソナルアクセストークンを作成

<a href="https://azure.microsoft.com/ja-jp/services/devops/" target="_blank">https://azure.microsoft.com/ja-jp/services/devops/</a> 
(すみませんが詳しい説明は省略)

## Visual Studio Code Extension Manager

拡張機能の VSIXファイルを生成する為の vsce をインストールする。
```
npm install -g vsce
```

## vsceでpublisherを作る
例としてaosystemとします
```
vsce create-publisher aosystem
```

作成されたか確認
```
vsce ls-publishers
```

## 拡張機能を記述

今回は必要最低限を下回る、とにかく動く最低限のファイル2個を作成。エディタ選択範囲の英字を小文字にする機能。 
ひとつのフォルダを作成してその中に以下2個のファイルを収納する。 
今回は toLowerCase というフォルダを作成して配置した。

package.json
```json
{
	"publisher": "aosystem",
	"name": "tolowercase",
	"displayName": "英字を小文字変換",
	"description": "選択範囲の英字を小文字に変換する",
	"version": "0.0.1",
	"engines": {
		"vscode": "^1.31.0"
	},
	"categories": [
		"Other"
	],
	"activationEvents": [
		"*"
	],
	"main": "./extension.js",
	"contributes": {
		"commands": [
			{
				"command": "extension.toLowerCase",
				"title": "英字を小文字にする"
			}
		],
		"menus": {
			"editor/context": [{
				"command": "extension.toLowerCase",
				"group": "1_modification@500"
			}]
		},
		"keybindings": [
			{
				"command": "extension.toLowerCase",
				"key": "ctrl+shift+l"
			}
		]
	}
}
```
extension.js
```javascript
const vscode = require('vscode');
function activate(context) {
	let disposable = vscode.commands.registerCommand('extension.toLowerCase', function () {
		let editor = vscode.window.activeTextEditor;	//エディタ
		let text = editor.document.getText(editor.selection);	//選択範囲のテキスト
		editor.edit((builder)=>{
			builder.replace(editor.selection, text.toLowerCase());
		});
	});
	context.subscriptions.push(disposable);
}
exports.activate = activate;
function deactivate() {}
module.exports = {
	activate,
	deactivate
}
```

## 拡張機能のパッケージを作成する

今回のフォルダをカレントディレクトリにして以下を実行。
```
vsce package
```

vsce publish コマンドは公開なので実行しない。今回はパッケージ(VSIXファイル)を作成するのみ。

本来必要な記述やファイルが無いのでWARNINGが出るが、yes で進める。
```
D:\path\to\toLowerCase>vsce package
 WARNING  A 'repository' field is missing from the 'package.json' manifest file.
Do you want to continue? [y/N] y
 DONE  Packaged: D:\path\to\toLowerCase\tolowercase-0.0.1.vsix (4 files, 1.95KB)
```

無事 vsixファイルが完成。

## Visual Studio Code へ拡張機能読み込み

拡張機能のメニューから「VSIXからのインストール」を行う。

## 以上で完了。

拡張機能のひな型や最小構成のサンプルHelloWorldでも多くのファイルがセットになっているので、なかなか手軽に拡張機能を作成できず、躊躇することも多いのではないだろうか。 
今回は使い捨ての拡張機能でも躊躇することなく作成できるよう、必要最低限以下のファイル構成を提案した。

拡張機能の多くのサンプルは TypeScriptで記述されているが、今回はJavaScriptである。

CONTENTS

Plesk

PleskでクエリパラメータでのSQLインジェクション試行をブロックする

JavaScript

PWAの基本コード

Plesk