VScode おすすめの拡張機能

今回はテキストエディタの中でも人気の高いVScodeについて、個人的に入れてよかった拡張機能について紹介します。

テキストエディタにはAtom、DreamWeaver、Sublime Textなど様々な種類がありますが、特にこだわりがなければ、ひとまずVScodeを使用することをオススメします。

これから紹介する拡張機能についてはエディタから検索可能です。

もし紹介していくなかで、気に入ったものがれば是非ダウンロードしてみて下さい。

2. japanese language pack

メニューなどのVScodeの表記を日本語化してくれる拡張機能です。

最初にVScodeをダウンロードした際は、デフォルトで英語表記になっているので、英語に苦手意識のある人は、japanese language packをインストールして日本語表記に変えておくと良いでしょう。

japanese language packをインストールした後、Installと表記されていた箇所が、歯車マークになっていれば、インストール成功です。

日本語表記に変更するために local.json内で"ja(japaneseの略)"を設定する必要があります。といってもそこまで難しい作業ではなく、windowsの方は「ctrl+shift+P」、Macの方は「Command+shift+P」と入力しコマンドパレットを開き「Configure Display Language」と入力してEnterキーを押します。

その後、"ja"か"en"を選択する欄がでてきますので、日本語の"ja"を選択します。"ja"を選択すると、VScodeの再起動が求められ、再起動後、無事にほぼすべての表記が日本語に変更になっているかと思います。

3. Bracket Pair Colorizer 2

括弧を色分けで表現してくれる拡張機能です。

JavascriptやCSSのコードを書いていくととにかく、括弧の量が尋常ではなく、入れ子が増えてくるとどのき何があるのか、分からなくなってしまう事があります。

この様に括弧を色分けしてくれるので、バグの発見がし易くなりますし、綺麗なコードを見ているとそれだけで気持ちが良くなりますね。

3. Evillnspector

全角スペースを強調配置してくれる拡張機能です。

コーディング作業をしていると、全角スペースが入るミスがでて、エラーが発生することがあります。(私もJavaScriptに全角スペースを書いてしまい、それに気が付かず、思うような動きをしてくれないことがありました。)

この拡張機能をあらかじめ入れておくと、ミスの発見がし易くなりとても便利です。

4. Prettier

コードを自動で綺麗にしてくれる拡張機能です。

タブのサイズや位置、さらにはセミコロンやシングルクォーテーションなども整形してくれます。インデントが一切ない場合でも、ソースを保存(Windowsの方はCtrl + s、Macの方はcommand + s)すると自動で綺麗にしてくれます。

5. HTML CSS support

CSSのclass名に迷うことが時々ありますが、その時にぴったりな拡張機能がHTML CSS supportです。これはHTMLを書くときに、CSS側で作ったclass名が候補としてでてくれる拡張機能になります。

CSSのclass名に迷ったときにに、適切なclass名を記載するヒントになるかと思います。

6. open in browser

HTML、CSS、JavaScriptを編集したあと、いちいちフォルダを開いてブラウザで動作確認をするのは面倒ですよね。

そこで、おすすめする拡張機能が、現在編集中のHTMLファイルをVScodeからブラウザに表示することができるopen in browserです。ダウンロードしたあと右クリックで「Open in Default Browser」をクリック(ショートカットキーはalt + B)すれば、ブラウザを開くことができます。「open in Other Browsers」を選択すると開くブラウザの種類を選択することができます。

本日はここまでとなります。最後までお読みいただきありがとうございました。