Web制作者必見！ VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptのコードを書く時に便利
Post on:2021年3月4日
sponsors
Visual Studio Code（以下、VS Code）が素晴らしいエディタである理由の一つは、デベロッパーの生産性を向上させるVS Codeの機能拡張の巨大なライブラリがあることです。
その中から、HTMLやCSSやJavaScriptのコードを書く時に便利なVS Codeの機能拡張を紹介します。
My 12 Favorite VSCode Extensions
by Katherine Peterson
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
VS Codeとは
VS Code(Visual Studio Code)は、Microsoftが提供する統合ツールを備えた強力で軽量なコードエディタです。MITライセンスで、商用でも完全に無料で使用できます。
ここ数年でユーザーが爆発的に増え、海外をはじめ、日本でも多くのWeb制作者が使用しています。動作は非常に快適で、さまざまなテーマ、便利な機能拡張が豊富にあるのも人気の要因です。
VS Codeのダウンロード方法
VS Codeは下記ページから無料でダウンロードできます。Windows, Linux, macOS用が用意されており、64bit, M1用も用意されています。
VS Codeの機能拡張のダウンロードとインストール方法
VS Codeの機能拡張は、Visual Studio Marketplaceから無料でダウンロードできます。
VS Codeのおすすめ機能拡張
Web制作者にお勧め、HTML, CSS, JavaScriptのコードを書く時に便利なVS Codeの機能拡張を紹介します。
- Rainbow Brackets
ペアになる括弧を見つけやすくする - Auto Rename Tag
タグを変更する時、終了（開始）タグも同時に変更 - Relative Path
ファイルへの相対パスを簡単に取得 - Prettier - Code formatter
コードを読みやすくする - htmltagwrap
選択したコードをHTMLタグで包む - Markdown Preview Enhanced
マークダウンを即プレビュー - Polacode
コードのスクリーンショットを作成 - Random Everything
ダミーのデータを簡単に生成 - CSS Peek
適用されたスタイルを素早く確認できる - Turbo Console Log
デバッグが簡単になる - Simple React Snippets
シンプルで、実用的なReactのスニペット - Snippet Creator
自分用のコードのスニペットを作成
ペアになる括弧を見つけやすくする
Rainbow Bracketsは括弧をカラフルにする機能拡張で、ペアになる括弧を簡単に見つけることができます。LISPやClojureのプログラマーはもちろん、JavaScriptやその他のプログラマーにとっても特に便利です。
タグを変更する時、終了（開始）タグも同時に変更
HTMLのタグを変更する際、対応する終了タグ（または開始タグ）も変更するのは面倒です。Auto Rename Tagを使用すると、自動的に両方のタグを同時に変更することができます。
ファイルへの相対パスを簡単に取得
この機能拡張のおかげで、インポート文を書く時間が大幅に短縮されました。Ctrl+Shift+H（macOSでは、command+shift+H）を押してファイルを選択するだけで、ワークスペース内の任意のファイルへの相対パスを簡単に取得できます。また、コマンドパレットを開いて、相対パスを検索することもできます。
コードを読みやすくする
Prettierを使用して、コードのスタイルを一貫したものにしましょう。設定は希望通りに構成可能で、キーボードショートカットまたは保存時にコードをフォーマットします。HTML, CSS, SCSS, Lessをはじめ、JavaScript, TypeScript, Flow, JSX, JSON, Vue, Angular, GraphQL, Markdown, YAMLなど、さまざまな言語に対応しています。
選択したコードをHTMLタグで包む
htmltagwrapはコードのブロックを強調表示し、選択した範囲を任意のHTMLタグで包みます。インラインと複数行にまたがる選択に対応しており、Alt+W（macOSでは、option+W）を押すだけです。
マークダウンを即プレビュー
マークダウンを作成する場合、ライブプレビューができると非常に便利です。
コードのスクリーンショットを作成
Polacodeが動作しなくなって困っていた人に朗報です。
Polacode-2020を使用すると、コードのスクリーンショットを簡単に作成できます。使い方は簡単、コマンドパレットから「Polacode」を入力すると、Polacodeのパネルが開き、あとはコードを選択するだけでスクリーンショットを撮影できます。
ダミーのデータを簡単に生成
ダミーのデータを作成するよりも時間を有効に使う方法があります。Random Everythingを使用すると、数字、名前、メールアドレスなどのランダムなデータを素早くコードに追加することができます。
適用されたスタイルを素早く確認できる
CSS Peekは、CSSのclassやid、またはHTMLタグのスタイルをPeek（のぞき見）します。適用されたスタイルをインラインで表示したり、定義されているファイルを素早く開きます。
デバッグが簡単になる
キーボードショートカットを使用して、変数名とその値をコンソールに簡単に記録できます。デバッグを簡単にするために、ファイル名や行番号などをログに含めることもできます。
シンプルで、実用的なReactのスニペット
何度も何度も書くReactのコードのスニペットを簡単に利用できます。
自分用のコードのスニペットを作成
自分用のコードのスニペットを作成したいと思うこともあるでしょう。Snippet Creatorを使用すると、簡単に独自のスニペットを作成できます。
sponsors
