2021年、VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptなどのコードを書く時に便利

Visual Studio Code(以下、VS Code)が素晴らしいエディタである理由の一つは、デベロッパーの生産性を向上させるコミュニティによって作成された機能拡張の巨大なライブララリがあることです。

その中から、HTMLやCSSやJavaScriptなどのコードを書く時に便利なVS Codeの機能拡張を紹介します。

コードを書く時に便利なVS Codeの機能拡張

My 12 Favorite VSCode Extensions
by Katherine Peterson

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

ペアになる括弧を見つけやすくする

VSCodeの機能拡張

Rainbow Brackets

Rainbow Bracketsは括弧をカラフルにする機能拡張で、ペアになる括弧を簡単に見つけることができます。LISPやClojureのプログラマーはもちろん、JavaScriptやその他のプログラマーにとっても特に便利です。

タグを変更する時、終了(開始)タグも同時に変更

VSCodeの機能拡張

Auto Rename Tag

HTMLのタグを変更する際、対応する終了タグ(または開始タグ)も変更するのは面倒です。Auto Rename Tagを使用すると、自動的に両方のタグを同時に変更することができます。

ファイルへの相対パスを簡単に取得

VSCodeの機能拡張

Relative Path

この機能拡張のおかげで、インポート文を書く時間が大幅に短縮されました。Ctrl+Shift+H(macOSでは、command+shift+H)を押してファイルを選択するだけで、ワークスペース内の任意のファイルへの相対パスを簡単に取得できます。また、コマンドパレットを開いて、相対パスを検索することもできます。

コードの見た目を美しくする

VSCodeの機能拡張

Prettier - Code formatter

Prettierを使用して、コードのスタイルを一貫したものにしましょう。設定は希望通りに構成可能で、キーボードショートカットまたは保存時にコードをフォーマットします。HTML, CSS, SCSS, Lessをはじめ、JavaScript, TypeScript, Flow, JSX, JSON, Vue, Angular, GraphQL, Markdown, YAMLなど、さまざまな言語に対応しています。

選択したコードをHTMLタグで包む

VSCodeの機能拡張

htmltagwrap

htmltagwrapはコードのブロックを強調表示し、選択した範囲を任意のHTMLタグで包みます。インラインと複数行にまたがる選択に対応しており、Alt+W(macOSでは、option+W)を押すだけです。

マークダウンを即プレビュー

VSCodeの機能拡張

Markdown Preview Enhanced

マークダウンを作成する場合、ライブプレビューができると非常に便利です。

コードのスクリーンショットを作成

VSCodeの機能拡張

Polacode-2020

Polacodeが動作しなくなって困っていた人に朗報です。
Polacode-2020を使用すると、コードのスクリーンショットを簡単に作成できます。使い方は簡単、コマンドパレットから「Polacode」を入力すると、Polacodeのパネルが開き、あとはコードを選択するだけでスクリーンショットを撮影できます。

ダミーのデータを簡単に生成

VSCodeの機能拡張

Random Everything

ダミーのデータを作成するよりも時間を有効に使う方法があります。Random Everythingを使用すると、数字、名前、メールアドレスなどのランダムなデータを素早くコードに追加することができます。

適用されたスタイルを素早く確認できる

VSCodeの機能拡張

CSS Peek

CSS Peekは、CSSのclassやid、またはHTMLタグのスタイルをPeek(のぞき見)します。適用されたスタイルをインラインで表示したり、定義されているファイルを素早く開きます。

デバッグが簡単になる

Turbo Console Log

キーボードショートカットを使用して、変数名とその値をコンソールに簡単に記録できます。デバッグを簡単にするために、ファイル名や行番号などをログに含めることもできます。

シンプルで、実用的なReactのスニペット

Simple React Snippets

何度も何度も書くReactのコードのスニペットを簡単に利用できます。

自分用のコードのスニペットを作成

Snippet Creator

自分用のコードのスニペットを作成したいと思うこともあるでしょう。Snippet Creatorを使用すると、簡単に独自のスニペットを作成できます。

sponsors

top of page

©2021 coliss