
Visual Studio Code おすすめ拡張機能
公開日:2019年09月12日
更新日:2023年05月18日
基本機能の拡張
★ Japanese Language Pack for Visual Studio Code★
メニューの文言などを日本語化する
★ EvilInspector
全角スペースをハイライト表示する
★ IntelliCode
予測変換をAIコード補完して使いやすくする
★ indent-rainbow
インデントを色分けして見やすくする
Code Spell Checker
英単語スペルチェッカー
vscode-input-sequence
連番を簡単に入力する
変更箇所を複数選択後「ctrl」+「alt」+「0」で数値指定
<start> <operator> <step> : <digit>
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要素」なので必要に応じて別の要素名に書き換える
※終了タグが開始タグになってしまう現象が起きる(2022年12月)
HTML End Tag Labels
HTMLの閉じタグ部分に開始タグとの関係性をあらわす文字列を表示する
HTMLHint
HTML記述ミスチェック(軽度)
JavaScript
★ JavaScript (ES6) code snippets
JSコードスニペット追加
PHP
★ PHP Intelephense
PHP開発用拡張パック(コード整形機能もあり)
WordPress
★ WordPress Snippet
WordPressスニペット拡張
Java
Java Extension Pack
Java開発用拡張パック
Debugger for Java
デバッグ用拡張パック
GIT
Git History
GIT履歴を見やすく表示
同じタグのコンテンツ
同じカテゴリーのコンテンツ