VSCode拡張機能開発メモ

## はじめに

アルバイトの改修案件で version3 の Riot.js を使っているのですが、.tagファイル内のjsをショートカットキーでコメントアウトしようとしても、うまくコメントアウトできないのが不便だったので、拡張機能を自作しました。

全体の流れ等は、すでに記事が散見されたので、その記事を見ても詰まったところを列挙していきたいと思います。

gasでの開発と似たような感じがありましたが、固定されているセルがないので難しく感じました。
かかった期間は半日です。

レポジトリ
https://github.com/wafuwafu13/riot-commentout

## 参考記事、リファレンス

### 開発

- [Visual Studio Code はじめての拡張機能開発](https://qiita.com/rma/items/8c53077d1355ab8fa4c6#packagejson)  
- [microsoft/vscode-extension-samples](https://github.com/microsoft/vscode-extension-samples)  
- https://code.visualstudio.com/api/references/vscode-api#TextEdit
- https://code.visualstudio.com/api/references/vscode-api#Range
- https://code.visualstudio.com/api/references/vscode-api#TextLine

### 公開

- [VS CodeのエクステンションをMarketPlaceに公開する](https://qiita.com/YuichiNukiyama/items/ffcb32188f473b92133d)


## 開発で詰まったところ

### コードをデバッグしたい

console.log で吐き出し、**拡張機能を開発している方の画面**の DEBUG CONSOLE をみる
<img width="491" alt="スクリーンショット 2020-05-17 15.58.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/bcc393bc-56bd-aa4b-1d58-4a3243135064.png">


### 「cmd+shift+p」で出てくる選択肢に自分の拡張機能がない

``package.json`` の ``title`` を変えないといけない

```json:package.json
"contributes": {
		"commands": [
			{
				"command": "riot-comment.riot-commentout",
				"title": "riot-commentout"  // 変える
			}
		]
},
```

### ショートカットキーを設定したい

``package.json`` で 以下のように ``keybindings`` を設定

```json:package.json
"contributes": {
		"keybindings": [
			{
				"command": "riot-comment.riot-commentout",
				"key": "cmd+c"
			}
		]
},
```

### ``editor.edit``内の処理が一回しか実行されない

``editor.edit``の処理は非同期で行われるようなので、以下のコードでは1行しかコメントアウトできなかった。(デバッグしたら同期的だったので本当はよくわからない)

```javascript
for (let i = start; i <= end; i++) {
	editor.edit((edit: any) => {
		let position = new vscode.Position(i, 0);
		edit.insert(position, '// ');
	});
}
```

``async/await`` を使って解決する

```javascript
async function main(){

        ......

        for (let i = start; i <= end; i++) {
            let start_position: vscode.Position = new vscode.Position(i, space);
					
            await editor.edit((edit: string | any) => {
                   edit.insert(start_position, '// ');
            });
　　　　 }
				
}

main();
```

## 公開で詰まったところ

### アクセストークンをどこから入手すれば良いか分からない

公式をみる
[Get a Personal Access Token](https://code.visualstudio.com/api/working-with-extensions/publishing-extension#get-a-personal-access-token)

### ``vsce create-publisher`` で401エラー

[Common questions](https://code.visualstudio.com/api/working-with-extensions/publishing-extension#common-questions)

アクセストークンの Scopes を Full access にする
<img width="411" alt="スクリーンショット 2020-05-17 17.32.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/5c73e4d9-0c4e-f932-8c20-cbfe7bcda1e6.png">

### ``vsce publish`` で Error, WARNING がでる

```
Error: Make sure to edit the README.md file before you publish your extension.
```
このエラーはReadMeを書き換えれば解決
https://github.com/Microsoft/vscode/issues/14730　


```
WARNING  A 'repository' field is missing from the 'package.json' manifest file.
```
このエラーは ``package.json`` の ``repository`` を編集すれば解決
https://stackoverflow.com/questions/16827858/npm-warn-package-json-no-repository-field

### Marketplace の Readme が更新されない

1回目の ``vuce publish`` で下記のURLが生成された

https://marketplace.visualstudio.com/items?itemName=hirotakatagawa.riot-commentout

Readmeを更新して再度 ``vuce publish`` をしても更新されていない

3回目の ``vuce publish`` で下記のエラー

```
 ERROR  hirotakatagawa.riot-commentout@0.0.1 already exists. Version number cannot be the same.
```

``package.json`` の ``version`` を変更して ``vuce publish`` したら解決