コーディングブログ

Coding Blog

コーダー必見!Visual Studio Code 設定と拡張機能フルまとめ

エディター

最終更新日:2019/11/26

Visual Studio Code、略してVSCodeは拡張性が高いので設定をメモっておきます。
開発者というより、コーダー目線となっています。

Visual Studio Code 設定と拡張機能まとめ

    設定

    設定は左下の歯車アイコンから設定画面へ移動できます。
    ショートカットキーは『Ctrl + ,』です。

    VSCode 設定

    settings.jsonで編集するには

    設定項目の中には、settings.jsonを編集しないといけない項目もあります。

    『設定』⇒ 適当な項目から『settings.jsonで編集』を選択すると表示できます。
    それか、『Ctrl + Shift + P』でコマンドを出現させて、
    settingと打つと『基本設定:設定(JSON)を開く』があるのでこちらから開けます。

    settings.json コマンド 出し方

    Font Size

    フォント サイズ (ピクセル単位) を制御します。

    デフォルトでは大きいので11pxにしました。
    特に下記Font Familyを変更するとより大きく感じます。

    Font Family

    フォント ファミリを制御します。

    日本語が読みやすいフォントに変更します。
    参考:コーディングに最適な日本語対応の等幅フォントSource Han Code JPとは – ICS MEDIA

    Source Han Code JP | 源ノ角ゴシック Code のダウンロード

    下記からダウンロードできます。
    https://github.com/adobe-fonts/source-han-code-jp/releases

    下記の様に設定しました。
    'Source Han Code JP', Consolas, 'Courier New'

    Insert Spaces

    Tab キーを押すとスペースが挿入されます。Editor: Detect Indentation がオンの場合、この設定はファイル コンテンツに基づいて上書きされます。

    常にインデントはタブで行いたいので、無効にします

    Detect Indentation

    ファイルがファイルの内容に基づいて開かれる場合、Editor: Tab Size と Editor: Insert Spaces を自動的に検出するかどうかを制御します。

    自分が入力するインデントも、自動的にそのファイルのインデントに揃います(スペース2のファイルの時は、自分の入力もスペース2になる)が、タブで統一させたい所。
    実際は結構便利な機能だが、新規ファイル作成するとインデントがスペースになっているので、
    無効にします

    Render Whitespace

    エディターで空白文字を表示するかどうかを制御します。

    空白文字が見えないと困るので『all』を選択します。

    Word Wrap

    行の折り返し方法を制御します。

    折り返さないと右に無限に伸びて、横スクロールになります。
    見づらいので『on』を選択します。

    Trim Trailing Whitespace

    有効にすると、ファイルの保存時に末尾の空白をトリミングします。

    不要なタブや、空白を削除できるのでおすすめ!
    有効にします。

    Word Based Suggestions

    ドキュメント内の単語に基づいて入力候補を計算するかどうかを制御します。

    コードヒントに同じファイル内で使われたWord(日本語など)が出てきて邪魔になります。
    無効にします。

    Quick Suggestions

    入力中に候補を自動的に表示するかどうかを制御します。

    自動で表示させたいのでtrueにします。
    settings.jsonに追記します。

    Word Based Suggestions

    ドキュメント内の単語に基づいて入力候補を計算するかどうかを制御します。

    ドキュメント内の単語に基づいて、コードヒントにその単語が出現しますが、邪魔なので
    無効にします。

    Auto Guess Encoding

    有効な場合、ファイルを開くときに文字セット エンコードをエディターが推測します。言語ごとに構成することも可能です

    たまに案件によってeuc-jpやshift-jisなど文字コードが異なる場合もあるので、開くときに自動で切り替えられると便利です。
    しかし、たまにutf-8なのに違う文字コードになったりすることもあります。。
    有効にしておきます。

    Emmet

    Show Suggestions As Snippets

    true の場合、Emmet 候補をスニペットとして表示して Editor: Snippet Suggestions 設定に従ってそれらを並び替えます。

    Emmetの候補もあると便利です。
    有効にします。

    Trigger Expansion On Tab

    有効にすると、TAB キーを押したときに Emmet 省略記法が展開されます。

    tabキーを押したときにEmmetを展開したいので、
    有効にします。

    Variables

    Emmet のスニペットで使用される変数

    Emmetで使用される変数を調整できます。
    settings.jsonで下記のように調整します。
    デフォルトでは<html lang="en">なのを <html lang="ja">に調整します。

    拡張機能

    ACF-Snippet

    カスタムフィールドのプラグイン『Advanced Custom Fields』を使っている方は。
    ACFのスニペットです。
    fieldfield:○○で出力できます。
    ACF-Snippet – Visual Studio Marketplace

    Auto Rename Tag

    HTML要素の開始タグを書き換えると閉じタグも自動で書き換えを同期してくれます。
    Auto Rename Tag – Visual Studio Marketplace

    Bracket Pair Colorizer 2

    PHPやJavaScript、CSSでのブロック(波かっこ)を色分けして表示してくれるので見やすくなります。
    Bracket Pair Colorizer 2 – Visual Studio Marketplace

    Git History

    gitのログをエディター上で表示できます。
    差分を確認するときに便利です。
    Git History – Visual Studio Marketplace

    IntelliSense for CSS class names in HTML

    読み込んでいるcssファイルから使用されているclassを読み取って、classをヒントで出してくれます。
    IntelliSense for CSS class names in HTML – Visual Studio Marketplace

    Highlight Matching Tag

    HTMLの開始タグか、もしくは閉じタグを選択した時に、開始タグと閉じタグをハイライトしてくれます。
    開始タグと閉じタグが、どこにあるか分かりづらい時に非常に便利。
    Highlight Matching Tag – Visual Studio Marketplace

    Japanese Language Pack for Visual Studio Code

    VSCodeを日本語化します。
    Japanese Language Pack for Visual Studio Code – Visual Studio Marketplace

    Live Sass Compiler

    sass(scss)を保存するたびに自動でコンパイルしてくれます。
    VSCodeの下のバーに、『Watch Sass』というボタンが出現するので、それを押下して監視を開始します。
    Live Sass Compiler Watch Sass

    コンパイルの設定

    出力されるパスや、コンパイル時に生成される『.map』を出力しないように設定していきます。
    settings.jsonに下記の様に追記します。

    Live Sass Compiler – Visual Studio Marketplace

    npm

    VSCode内のコマンドラインで、npmインストールなどnpmコマンドを打てるようにしてくれます。
    npm – Visual Studio Marketplace

    Path Autocomplete

    imgタグなどのパスを補完してくれます。

    似たような『Path Intellisense』というのもありますが、こちらの方がコードヒントの出方が使いやすかったです。
    Path Autocomplete – Visual Studio Marketplace

    PHP IntelliSense

    PHPの補完はもちろん、一番嬉しいのは、通常phpファイルではHTMLのインテリセンスが出てこないのですが、
    これを入れることで、phpファイルでのHTMLの補完機能も働きます。
    PHP IntelliSense – Visual Studio Marketplace

    Trailing Spaces

    文末の不要な空白やタブを赤くハイライトしてくれます。
    設定の『files.trimTrailingWhitespace』を有効にしていたら、ハイライトされた所は保存時に削除されます。
    Trailing Spaces – Visual Studio Marketplace

    WordPress Snippets

    WordPressの関数のコードヒントを出してくれます。
    WordPress Snippets – Visual Studio Marketplace

    超類似のWordPress Snippetでも良いでしょうが、
    WordPress Snippetsの方が、最終更新日が新しいので、こちらの方が良いでしょう!

    zenkaku

    全角スペースを見やすくハイライトしてくれます。
    コマンド(Ctrl + Shift + p)で、Enable Zenkakuと入力すると有効になります。
    zenkaku – Visual Studio Marketplace

    配色テーマ

    Summer Night Theme

    個人的に見やすいので使用しています。
    Summer Night Theme – Visual Studio Marketplace