ご覧いただきありがとうございます!
領護(りょうご)です。
実際に私が使っていて便利だと感じたPython×Djangoの開発を楽にするVSCodeの拡張機能をご紹介します!
気になる拡張機能があったらインストールしてプログラミングの開発効率を爆上げしちゃいましょう!
拡張機能とは
VSCodeの拡張機能とは、VSCodeに便利なツールや機能を追加することができる機能です。
拡張機能を使用することで、VSCodeを自分に合った環境にカスタマイズすることができます!
拡張機能のインストール
![20230313_vscode-extensions-01](/media/images/20230313_vscode-extensions-01.width-870.format-webp.webp)
VSCodeを開き、左メニューの赤枠の部分をクリックします。
![20230313_vscode-extensions-02](/media/images/20230313_vscode-extensions-02_hu6.width-870.format-webp.webp)
左上の赤枠にインストールしたい拡張機能を検索します。
インストールしたい拡張機能を「インストール」ボタンからインストールして追加完了です。
それでは早速カテゴリーに分けてご紹介していきます!
環境構築
![extensions-python](/media/images/20230313_extensions-python.width-870.format-webp.webp)
Python
VSCodeでPythonを書く時に必須の拡張機能です。
Pythonのバージョンを変更したり、コードを補完してくれます。
詳細ページを見る
![extensions-jp](/media/images/20230313_extensions-jp.width-870.format-webp.webp)
Japanese Language Pack for Visual Studio Code
VSCodeを日本語化する拡張機能です。
詳細ページを見る
コード補完
![django-snippetsa](/media/images/20230313_extensions-django-snippe.width-870.format-webp.webp)
Djaneiro - Django Snippets
Djangoでよく使うフォームのフィールド型やテンプレートタグ等を補完してくれる拡張機能です。
Djangoでよく使うコードを速く書くことができます。
ショートカットコード一覧は、詳細ページからご覧ください。
詳細ページを見る
![html-css-support](/media/images/20230313_extensions-html-css-supp.width-870.format-webp.webp)
![20230313_vscode-extensions-04](/media/images/20230313_vscode-extensions-04.width-870.format-webp.webp)
HTML CSS Support
HTMLやCSSのコードを補完してくれる拡張機能です。
詳細ページを見る
![django](/media/images/20230313_extensions-django.width-870.format-webp.webp)
![20230313_vscode-extensions-06](/media/images/20230313_vscode-extensions-06.width-870.format-webp.webp)
Django
Djangoテンプレートタグのコード補完・自動整形をしてくれる拡張機能です。
テンプレートタグに色が付くので、非常に見やすくなります。
詳細ページを見る
![yaml](/media/images/20230313_extensions-yaml.width-870.format-webp.webp)
YAML
ymlファイルでコード補完・自動整形してくれる拡張機能です。
最近は、DockerやGitHubActionsといったymlファイルを書く機会が増えているので入れておくと便利です!
詳細ページを見る
![auto-rename-tag](/media/images/20230313_extensions-auto-rename-t.width-870.format-webp.webp)
Auto Rename Tag
HTMLの開始タグと終了タグを同時に修正できる拡張機能です。
詳細ページを見る
![path-autocomplete](/media/images/20230313_extensions-path-autocomp.width-870.format-webp.webp)
![20230313_vscode-extensions-05](/media/images/20230313_vscode-extensions-05.width-870.format-webp.webp)
Path Autocomplete
ファイルパスのコードを補完してくれる拡張機能です。
views.pyのtemplate_nameのパスを指定する時に助かります!
詳細ページを見る
コード整形
![black-formatter](/media/images/20230313_extensions-black-formatt.width-870.format-webp.webp)
Black Formatter
Pythonのコードを自動整形してくれる拡張機能です。
設定項目が少なく、シンプルな整形ツールなので、インデントや改行のポイントを細かく設定したい人には向きません。
詳細ページを見る
![trailing-spaces](/media/images/20230313_extensions-trailing-spac.width-870.format-webp.webp)
Trailing Spaces
余分な空白や改行を削除してくれる拡張機能です。
詳細ページを見る
![python-indent](/media/images/20230313_extensions-python-indent.width-870.format-webp.webp)
![20230313_vscode-extensions-08](/media/images/20230313_vscode-extensions-08.width-870.format-webp.webp)
Python Indent
辞書型や関数の引数定義で改行をする時、インデントを自動で揃えてくれる拡張機能です。
詳細ページを見る
![csscomb](/media/images/20230313_extensions-csscomb.width-870.format-webp.webp)
CSScomb
CSSのコード補完・自動整形をしてくれる拡張機能です。
csscomb.json設定ファイルを作成することで、自分に合った設定にカスタマイズすることができます。
詳細ページを見る
スペルチェック
![css-tree-validator](/media/images/20230313_extensions-css-tree-vali.width-870.format-webp.webp)
![20230313_vscode-extensions-10](/media/images/20230313_vscode-extensions-10.width-870.format-webp.webp)
CSSTree validator
CSSのプロパティ名に間違いがないかチェックしてくれる拡張機能です。
詳細ページを見る
![code-spell-checker](/media/images/20230313_extensions-code-spell-ch.width-870.format-webp.webp)
![20230313_vscode-extensions-11](/media/images/20230313_vscode-extensions-11.width-870.format-webp.webp)
Code Spell Checker
変数やクラス名を定義する時、単語の綴りに間違いがないかチェックしてくれる拡張機能です。
VSCodeのsettings.jsonにチェックを行わないキーワードを設定することもできます。
詳細ページを見る
視認性向上
![indent-rainbow](/media/images/20230313_extensions-indent-rainbo.width-870.format-webp.webp)
![20230313_vscode-extensions-07](/media/images/20230313_vscode-extensions-07.width-870.format-webp.webp)
indent-rainbow
インデントに色付けしてコードの構造を見やすくしてくれる拡張機能です。
Pythonは、プログラムの構造をインデントで判別するので、必須と言っていいほど入れたほうが良いです!
詳細ページを見る
![highlight-matching-tag](/media/images/20230313_extensions-highlight-mat.width-870.format-webp.webp)
![20230313_vscode-extensions-09](/media/images/20230313_vscode-extensions-09.width-870.format-webp.webp)
Highlight Matching Tag
HTMLの開始タグと終了タグにアンダーラインを付けてHTMLの構造を見やすくしてくれる拡張機能です。
詳細ページを見る
![extensions-zenkaku](/media/images/20230313_extensions-zenkaku.width-870.format-webp.webp)
![20230313_vscode-extensions-16](/media/images/20230313_vscode-extensions-16.width-870.format-webp.webp)
zenkaku
全角部分を見やすくしてくれる拡張機能です。
詳細ページを見る
![css-peek](/media/images/20230313_extensions-css-peek.width-870.format-webp.webp)
CSS Peek
HTMLタグに使用されているCSSのクラスを簡単に確認できる拡張機能です。
CTRLを押しながらCSSのクラスにカーソルを当てると表示されます。
CTRLを押しながらCSSのクラスをクリックするとCSSのコードにジャンプできます。
詳細ページを見る
![vscode-icons](/media/images/20230313_extensions-vscode-icons.width-870.format-webp.webp)
![20230313_vscode-extensions-14](/media/images/20230313_vscode-extensions-14.width-870.format-webp.webp)
vscode-icons
VSCodeのファイルやフォルダをアイコンで見やすくしてくれる拡張機能です。
詳細ページを見る
![todo-highlight](/media/images/20230313_extensions-todo-highligh.width-870.format-webp.webp)
![20230313_vscode-extensions-15](/media/images/20230313_vscode-extensions-15.width-870.format-webp.webp)
TODO Highlight
TODOコメントに色を付けて見やすくしてくれる拡張機能です。
詳細ページを見る
便利ツール
![js-css-minifier(minify)](/media/images/20230313_extensions-js-css-minifi.width-870.format-webp.webp)
![20230313_vscode-extensions-12](/media/images/20230313_vscode-extensions-12.width-870.format-webp.webp)
![20230313_vscode-extensions-13](/media/images/20230313_vscode-extensions-13.width-870.format-webp.webp)
JS & CSS Minifier (Minify)
JSやCSSファイルをMinify化してくれる拡張機能です。
Minify(ミニファイ)とは、余分な改行や空白を削除して、ファイルサイズを圧縮・軽量化することです!
詳細ページを見る
![20230313_vscode-extensions-14](/media/images/20230313_vscode-extensions-14_D9u.width-870.format-webp.webp)
Live Share
リモートでソースコードを複数人で編集したり、デバッグできる拡張機能です。
チームで開発する時、コードレビューがしやすくてとても重宝しています!
チーム開発する人は是非入れておくことをお勧めします。
詳細ページを見る
最後に
以上、私が愛用しているVSCodeの拡張機能でした。
他にも、もっと便利な拡張機能などあれば教えて頂けると嬉しいです!
拡張機能を上手く使って、開発効率を爆上げしちゃいましょう!