目次
拡張機能一覧（汎用系）
Japanese Language Pack for Visual Studio Code
VSCode内の文字を日本語に対応させるための拡張機能です。英語が少しつらいと感じる方は入れてみるといいと思います。
1. コマンド + shift + P でコマンドパレットを開く
2. Configure Display Language と入力
3. ja を選択
indent-rainbow
インデントに色をつけてくれます。
TODO Highlight
デフォルトでは、TODO:とFIXMEしかありませんが、以下のようにすることで新しい文字列を追加したり、色を変えたりできます。
"todohighlight.keywords": [
{
"text": "TODO:",
"backgroundColor": "#ff00ff"
},
{
"text": "HACK:",
"backgroundColor": "blue"
}
]Rainbow CSV
拡張子.csvの中身に配色をしてくれます。とても見やすくなるのでぜひこの際に入れてみてください！
zenkaku
全角の部分をハイライトしてくれます。
1. コマンド + shift + P
2. zenkakuと入力
3. Enable zenkaku を選択
Bracket Pair Colorizer2
見た目は↓のようになります。
以下は僕の設定です。
"bracket-pair-colorizer-2.colors": [
"#ff3366",
"#ff3366",
"#ff3366"
]simple icons
拡張機能一覧（構文解析・補完）
Auto Close Tag + Auto Rename Tag
Auto Complete Tagというパッケージがあるので、これをインストールすれば両方インストールできます。
Auto Close Tag → HTMLの閉じタグを自動化
Auto Rename Tag → 片方のタグを編集する際対応するタグも自動修正
HTMLHint
HTMLHintをインストールすると、HTMLの構文解析を自動で行ってくれます。インストールするだけで機能するので、特に設定は必要ありません。
Bookmarks
下記のように行をブックマークできます。ブックマークするには、
option + command + K でできます。
僕がやっているVSCodeの設定
※随時追加予定。
setting.jsonに記述する設定
{
//タブ下部に配色
"workbench.colorCustomizations": {
"_comment": "タブ",
"tab.activeBorder": "#00FF6A"
},
// 半角スペースを見やすくする
"editor.renderWhitespace": "all",
}言語ごとにインデント設定
1. setting.jsonを開く
2. 以下を参考に記述
{
// デフォルトの設定
"editor.tabSize": 4,
// 言語ごとの設定
"[javascript]": {
"editor.tabSize": 2,
"editor.insertSpaces": true
},
"[python]": {
"editor.tabSize": 4,
"editor.insertSpaces": true
},
"[shellscript]": {
"editor.tabSize": 4,
"editor.insertSpaces": true
}
}上記のように記述することで、タブを押した際のインデント幅を変更したり、設定したりできます。
言語名のところですが、command + shift + Pでコマンドパレットを開き、Preferences: Configure Language Specific Settingsと入力すると言語の名称が一覧で表示されるので参考にします。
例えば、Shell Scriptとあったら、[shellscript]と書きます。
設定前に作成したファイルに関しては、変更が適用される訳ではないので、手動で変更する必要があります。右下の（スペース: 4）みたいに買いてあるところをクリックして変更できます。
詳しくは、公式ドキュメントを参考にしてみてください！
プロジェクトごとにバーに配色する
1. プロジェクトルートに.vscode/ディレクトリを作成
2. .vscode/settings.jsonを作成
3. 以下のように記述
{
"workbench.colorCustomizations": {
"titleBar.activeBackground": "#dcbc06",
"titleBar.activeForeground": "#000000",
"activityBar.background": "#FFD700",
"activityBar.foreground": "#000000"
}
}・Docker
・Vetur
・Python
