こんにちは、SaaSプロダクト開発部第1開発グループの陳です。 今回は開発でよく使うコードエディターVS Codeの拡張機能＆便利な使い方について、紹介していきます。
おすすめの拡張機能
Turbo Console Log
開発中にconsole.log()をよく使う人におすすめです。デバッグする際に、何度もconsole.log()を入力したり、一時的にコメントアウトもしたりして、結構手間掛かります。console.log()を一瞬で入力できる拡張機能を紹介します。
Pretty TypeScript Errors
TypeScriptのエラーメッセージを見やすくするための拡張機能です。階層が深いエラーメッセージが見づらい時はこの拡張機能を入れましょう。
Search In Browser
開発する際に、分からないことをそのまま検索できる拡張機能です。
Error Lens
エラーが発生した際、エラー箇所を分かりやすく表示してくれる拡張機能です。
CodeSnap
選択したコードを綺麗な画像に変換してくれる拡張機能です。（因みに、この記事に使われている画像も CodeSnap で作成しました。）
拡張機能を作成してみます
色んな拡張機能を試してみましたが、どうしても既存の拡張機能では満足できない場合もあるので、公式のドキュメントを参考にして、拡張機能を作成してみます。
プロジェクト作成
ターミナルで以下のようなコードを実行して、質問に答えるだけで、プロジェクトを作成できます。
npm install -g yo generator-code
yo code
?What type of extension do you want to create?
New Extension (TypeScript)?What's the name of your extension?
chen-extension（拡張機能名）?What's the identifier of your extension?
chen-extension（拡張機能名）?What's the description of your extension?
for-test（拡張機能の説明）?Initialize a git repository?
Yes?Which package manager to use?
npm
デバッグ
プロジェクトを作成後、まずはそのままデバッグしてみましょう。サイドバーの「実行とデバッグ」もしくはF5でデバッグできます。
下記の画像のように、新しいVS Codeのウィンドウが開きます。
Macの場合、「⇧ ⌘ P」でコマンドパレットを開けます。
デフォルトのコマンド「Hello World」を入力すると、拡張機能が実行されます。右下に「Hello World from chen-extension!」のポップアップが表示されます。
プロジェクトのソースコードを修正してみましょう。
src/extension.ts
「⇧ ⌘ P」で実行した際の処理は上記のファイルのactivate()という関数で書かれています。
vscode.window.showInformationMessage()のところで表示するメッセージを「あけましておめでとうございます。」に変更して、もう1回実行してみましょう。
Open WeatherのAPIを繋いで天気の情報を取得する拡張機能にしてみます。
vscode.commands.showInputBox()で郵便番号の入力欄を作成できます。
入力後にvscode.window.createWebviewPanel()で取得した天気のアイコンを表示します。
スニペットを作成してみます
既存の拡張機能でスニペットもよく見かけますが、実際に使う際、プロジェクトの書き方と微妙に違うなど、使いづらい場面があります。そこで、新しいスニペットを作成してみます。
スニペットファイルの作成
「⇧ ⌘ P」で「snippets」を入力、「ユーザースニペットの構成」を選択する。
スニペットを作成
Reactでよく使われるuseEffectで試してみましょう。
prefixで入力するコマンドを入力し、bodyに実際出力したいコードを入れましょう。
スニペットファイルを保存して実際に使ってみましょう。
さらに、スニペットで変数の使用や、入力後のカーソルの位置の指定もできます。
例えば、ファイル名を使用して、モジュールのテンプレートを一瞬で作成したい場合はこのように書いてみます。
このようにすれば、モジュールの変数名が自動的にファイル名になります。
さらに、入力後にカーソルの位置も指定できます。$1のところで入力完了後にTabキーを押すとカーソルが自動的に$2の場所に移動してくれます。
最後に
VS Codeをカスタマイズして、快適な開発環境を作りましょう。 この記事がVS Codeを使用する開発者の役に立てれば幸いです。
最後までご覧いただきありがとうございました。
