はじめに
アルバイトの改修案件で version3 の Riot.js を使っているのですが、.tagファイル内のjsをショートカットキーでコメントアウトしようとしても、うまくコメントアウトできないのが不便だったので、拡張機能を自作しました。
全体の流れ等は、すでに記事が散見されたので、その記事を見ても詰まったところを列挙していきたいと思います。
gasでの開発と似たような感じがありましたが、固定されているセルがないので難しく感じました。
かかった期間は半日です。
レポジトリ
https://github.com/wafuwafu13/riot-commentout
参考記事、リファレンス
開発
- Visual Studio Code はじめての拡張機能開発
- 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
公開
開発で詰まったところ
コードをデバッグしたい
console.log で吐き出し、拡張機能を開発している方の画面の DEBUG CONSOLE をみる
「cmd+shift+p」で出てくる選択肢に自分の拡張機能がない
package.json の title を変えないといけない
"contributes": {
"commands": [
{
"command": "riot-comment.riot-commentout",
"title": "riot-commentout" // 変える
}
]
},
ショートカットキーを設定したい
package.json で 以下のように keybindings を設定
"contributes": {
"keybindings": [
{
"command": "riot-comment.riot-commentout",
"key": "cmd+c"
}
]
},
editor.edit内の処理が一回しか実行されない
editor.editの処理は非同期で行われるようなので、以下のコードでは1行しかコメントアウトできなかった。(デバッグしたら同期的だったので本当はよくわからない)
for (let i = start; i <= end; i++) {
editor.edit((edit: any) => {
let position = new vscode.Position(i, 0);
edit.insert(position, '// ');
});
}
async/await を使って解決する
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
vsce create-publisher で401エラー
アクセストークンの Scopes を Full access にする
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が生成された
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 したら解決