プレゼンモード
再生
← / →で移動
fでフルスクリーン
escでおわる
id:hitode909です.Kyoto.なんか #4 に飛び入りでLTするための資料です.
VSCode拡張を作ろう
- ここ2ヶ月くらい早起きして作っている
- 友達作りのため様子を紹介
自己紹介
はてなで働いている
Emacs→Atom→VSCode
練習
gyazo.com
const holidayList = "元日 成人の日 建国記念の日 春分の日 昭和の日 憲法記念日 みどりの日 こどもの日 海の日 山の日 敬老の日 秋分の日 体育の日 文化の日 勤労感謝の日 天皇誕生日 元日 成人の日 建国記念の日 建国記念の日 振替休日 春分の日 昭和の日 昭和の日 振替休日 憲法記念日 みどりの日 こどもの日 海の日 山の日 敬老の日 秋分の日 秋分の日 振替休日 体育の日 文化の日 勤労感謝の日 天皇誕生日 天皇誕生日 振替休日 元日 成人の日 建国記念の日 春分の日 昭和の日 憲法記念日 みどりの日 こどもの日 こどもの日 振替休日 海の日 山の日 山の日 振替休日 敬老の日 秋分の日 体育の日 文化の日 文化の日 振替休日 勤労感謝の日".split(/ /g);
vscode.window.showQuickPick(holidayList).then(item => {
editor.edit(editBuilder => {
editor.selections.forEach(selection => {
editBuilder.insert(selection.start, item);
});
});
});
今日の日付.mdを開くやつ
- ほかのエディタでも今日の日付.mdにメモを取っていた 10年分,2500ファイル
- エディタを開く前にファイルを作る必要があるようだった
- fs.closeSync(fs.openSync())
const path = expandHomeDir(`${dir}/${date()}.md`);
if (!fs.existsSync(path)) {
fs.closeSync(fs.openSync(path, 'w+'));
}
const doc = await vscode.workspace.openTextDocument(path);
vscode.window.showTextDocument(doc, -1, true);
github.com
perlを編集中にコードのアウトラインを出してくれるやつ
github.com
vscode.DocumentSymbolProvider
を実装するとエディタにアウトラインを表示できる
- (普通は静的解析して)パッケージ一覧や関数一覧を返していく
- ポイント:雑な正規表現
- 作りは荒くても動けば便利
TODO
private get pattern() {
return /(^package|\bsub|\bsubtest)\b +([^ ;\n'"{]+|(['"].+['"])+)/gm;
}
古いタブを順番に閉じてくれるやつ
github.com
- Atomのzentabsが便利だったのでほしかった
- タブの一覧を得るAPIがない
- ほかのタブを閉じるAPIがない
- 失敗すると振動してなにもできなくなる
- 分割したウィンドウごとにn件ずつ保持してほしいというissueをもらえた
作り方
% yo code
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What type of extension do you want to create? (Use arrow keys)
❯ New Extension (TypeScript)
New Extension (JavaScript)
New Color Theme
New Language Support
New Code Snippets
New Keymap
New Extension Pack
(Move up and down to reveal more choices)
- .vscode/launch.jsonが仕込まれているのでデバッガから起動できる
- ブレイクポイントとか普通に使えて快適
ほかのエディタとの比較
Eclipseプラグイン
- ほしいAPIをひたすら探す宝探しっぽい雰囲気が似てる
- デバッガの充実感が似てる
VSCode拡張を作るのはおすすめ
- 最高の開発環境が突然手に入るのでテンションが上がる
- 歴史が浅いのでほしい拡張はだいたいない,ブルーオーシャン
- Emacs, Vim, Atom拡張を作ってる友達はたくさんいるけどVSCode拡張を作ってる友達いはいない,友達になりましょう
- 拡張が「作者名.拡張名」とネームスペースが切られている
- そこそこフィードバックもらえてモチベーションを保ちやすい
- 便利グッズを作ると日々の生産性が向上するプリミティブな喜び