Web制作者必見! VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptのコードを書く時に便利

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

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

Web制作者必見! VS Codeのおすすめ機能拡張のまとめ

My 12 Favorite VSCode Extensions
by Katherine Peterson

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

VS Codeとは

VS Code(Visual Studio Code)は、Microsoftが提供する統合ツールを備えた強力で軽量なコードエディタです。MITライセンスで、商用でも完全に無料で使用できます。

Visual Studio Code

ここ数年でユーザーが爆発的に増え、海外をはじめ、日本でも多くのWeb制作者が使用しています。動作は非常に快適で、さまざまなテーマ、便利な機能拡張が豊富にあるのも人気の要因です。

VS Codeのダウンロード方法

VS Codeは下記ページから無料でダウンロードできます。Windows, Linux, macOS用が用意されており、64bit, M1用も用意されています。

Download Visual Studio Code

VS Codeの機能拡張のダウンロードとインストール方法

VS Codeの機能拡張は、Visual Studio Marketplaceから無料でダウンロードできます。

Visual Studio Marketplace

VS Codeのおすすめ機能拡張

Web制作者にお勧め、HTML, CSS, JavaScriptのコードを書く時に便利なVS Codeの機能拡張を紹介します。

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

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

©2022 coliss