Visual Studio Code おすすめ拡張機能

公開日:2019年09月12日更新日:2023年05月18日

その他

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
}