Visual Studio Code おすすめ拡張機能

公開日:2019年09月12日更新日:2022年12月08日

その他

VS Code

基本機能の拡張

★ Japanese Language Pack for Visual Studio Code★

メニューの文言などを日本語化する

★ EvilInspector

全角スペースをハイライト表示する

★ IntelliCode

予測変換をAIコード補完して使いやすくする

★ indent-rainbow

インデントを色分けして見やすくする

Code Spell Checker

英単語スペルチェッカー

vscode-input-sequence

連番を簡単に入力する

変更箇所を複数選択後「ctrl」+「alt」+「0」で数値指定

https://marketplace.visualstudio.com/items?itemName=tomoki1207.vscode-input-sequence

TODO Highlight

「TODO:」「FIXME:」をハイライトしてメモを残す

アノテーションコメント

記法	意味
TODO:	作業内容を記述
FIXME:	修正や追加する内容を記述
HACK:	挙動は変えずにきれいなコードに書き直すべき個所 ※リファクタリングが必要な個所
REVIEW:	見直すべき個所を記述
OPTIMIZE:	無駄が多く、処理が遅くなっている箇所
CHANGED:	コードをどのように変更したかを記述
NOTE:	後で見返したときに必要な情報を記述
WARNING:	注意しなければいけない内容を記述
XXX:	危険！動くけどなぜうごくかわからずバグが潜んでいる可能性が高い

設定ファイルにハイライトする文字を追加する場合

{
    "todohighlight.isEnable": true,
    "todohighlight.isCaseSensitive": true,
    "todohighlight.keywords": [
        "DEBUG:",
        "REVIEW:",
        {
            "text": "NOTE:",
            "color": "#ff0000",
            "backgroundColor": "yellow",
            "overviewRulerColor": "grey"
        },
        {
            "text": "HACK:",
            "color": "#000",
            "isWholeLine": false,
        },
        {
            "text": "TODO:",
            "color": "red",
            "border": "1px solid red",
            "borderRadius": "2px", //NOTE: using borderRadius along with `border` or you will see nothing change
            "backgroundColor": "rgba(0,0,0,.2)",
            //other styling properties goes here ... 
        }
    ],
    "todohighlight.keywordsPattern": "TODO:|FIXME:|\\(([^)]+)\\)", 
    "todohighlight.defaultStyle": {
        "color": "red",
        "backgroundColor": "#ffab00",
        "overviewRulerColor": "#ffab00",
        "cursor": "pointer",
        "border": "1px solid #eee",
        "borderRadius": "2px",
        "isWholeLine": true,
        //other styling properties goes here ... 
    },
    "todohighlight.include": [
        "**/*.js",
        "**/*.jsx",
        "**/*.ts",
        "**/*.tsx",
        "**/*.html",
        "**/*.php",
        "**/*.css",
        "**/*.scss"
    ],
    "todohighlight.exclude": [
        "**/node_modules/**",
        "**/bower_components/**",
        "**/dist/**",
        "**/build/**",
        "**/.vscode/**",
        "**/.github/**",
        "**/_output/**",
        "**/*.min.*",
        "**/*.map",
        "**/.next/**"
    ],
    "todohighlight.maxFilesForSearch": 5120,
    "todohighlight.toggleURI": false
}

HTML

★ Auto Rename Tag

開始タグを変更すると終了タグも変更される

★ open in browser

右クリックでブラウザ表示確認

★ htmltagwrap

対象文字列を選択して「Alt」+「W」で、対象文字列を囲むようにタグ付け

初期値が「p要素」なので必要に応じて別の要素名に書き換える

HTML End Tag Labels

HTMLの閉じタグ部分に開始タグとの関係性をあらわす文字列を表示する

HTMLHint

HTML記述ミスチェック（軽度）

JavaScript

★ JavaScript (ES6) code snippets

JSコードスニペット追加

PHP

★ PHP Intelephense

PHP開発用拡張パック（コード整形機能もあり）

phpcsfixer

コード整形「Shift」+「alt」+「f」

ダウンロード：https://github.com/FriendsOfPHP/PHP-CS-Fixer#installation
ダウンロードした「php-cs-fixer.phar」ファイルを任意の位置に配置（ダウンロードしたファイルに「v2」などがついている場合は削除するなりして合わせる）
- 例）C:\Users\ユーザ名\.vscode\php-cs-fixer.phar
拡張機能追加：「PHP CS Fixer」
VSCodeの「設定」をJSON形式で開いて以下を追加

"php-cs-fixer.executablePath": "${extensionPath}\\php-cs-fixer.phar",
"php-cs-fixer.rules": "@PSR2",
"php-cs-fixer.formatHtml": true,
"php-cs-fixer.onsave": true,</span>

※以上でエラーが出る場合はPHP実行環境を環境変数に登録する
　XAMPPの場合は「C:\xamppフォルダのパス\php」を環境変数に登録
　コマンドプロンプトで「php -v」と入力してバージョン番号が表示されればOK