VSCodeの設定

VSCodeで設定している内容

基本設定

// 既定の設定を上書きするには、このファイル内に設定を挿入します
{
    "editor.renderWhitespace": "all",
    "files.associations": { // 拡張子と読み込みタイプの紐づけ
        "*.tpl": "html",
        "*.twig": "html"
    },
    "editor.renderIndentGuides": true,
    "editor.minimap.enabled": true,
    "editor.mouseWheelScrollSensitivity": 5,
    "files.trimTrailingWhitespace": true,
    "php.suggest.basic": false,
    "files.autoGuessEncoding": true,
    "editor.fontSize": 11.5,
    "gitlens.advanced.messages": { // gitlensの設定
        "suppressCommitHasNoPreviousCommitWarning": false,
        "suppressCommitNotFoundWarning": false,
        "suppressFileNotUnderSourceControlWarning": true,
        "suppressGitVersionWarning": false,
        "suppressLineUncommittedWarning": false,
        "suppressNoRepositoryWarning": false,
        "suppressResultsExplorerNotice": true,
        "suppressShowKeyBindingsNotice": true,
        "suppressUpdateNotice": false,
        "suppressWelcomeNotice": true
    },
    "todohighlight.keywords": [ // TODO Highlightの設定
        {
            "text": "TODO",
            "color": "yellow",
            "backgroundColor": "#919191",
        }
    ],
    "gitlens.gitExplorer.files.layout": "auto",
    "window.zoomLevel": 1,
    "gitlens.keymap": "alternate",
    "sync.gist": "***", // Settings Sync の設定
    "sync.lastUpload": "***",
    "sync.autoDownload": false,
    "sync.autoUpload": false,
    "sync.lastDownload": "",
    "sync.forceDownload": false,
    "sync.host": "",
    "sync.pathPrefix": "",
    "sync.quietSync": false,
    "sync.askGistName": false,
    "sync.removeExtensions": true,
    "sync.syncExtensions": true,
    "gitlens.historyExplorer.enabled": true,
    "breadcrumbs.enabled": true,
    "gitlens.views.fileHistory.enabled": true,
    "gitlens.views.lineHistory.enabled": true,
    "workbench.colorTheme": "One Dark Pro",
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "files.exclude": {
        "**/.classpath": true,
        "**/.project": true,
        "**/.settings": true,
        "**/.factorypath": true
    },
    "javascript.updateImportsOnFileMove.enabled": "always",
    "workbench.iconTheme": "vscode-icons"
}

拡張機能

詳細リンクをクリックすると詳細が見れます。

Auto Close Tag

自動でhtmlのタグを閉じたりしてくれる

Auto Rename Tag

htmlの対となるタグを一緒に編集してくれる

Auto File Name

requireのときのファイル名を補完してくれる

Bookmarks

ブックマークの拡張機能

Bracket Pair Colorizer

対となるカッコを色分けしてくれる

Code Runner

コードを実行できる

Code Spell Checker

英語のスペルをチェックしてくれる

code-eol

行末（\n,\r\n,\r）を記号表示してくれる

Color Info

コード内の色情報を表示してくれる

Color Picker

そのまんまColor Picker

Docker

Dockerfileを作るのに便利

Document This

JSDocを自動入力してくれる（デフォでもあるが、こっちの方が細かく出してくれる）

ESLint

コーディング中にESLintを補完してくれる（違反していると教えてくれる）

Git History

git logを見やすく表示してくれる

GitLens — Git supercharged

git周りの便利ツール

Go

Goの補完

HTML CSS Support

名前の通り

HTML Snippets

名前の通り

IntelliSense for CSS class names in HTML

htmlのclassやidの補完

Japanese Language Pack for Visual Studio Code

略

JavaScript (ES6) code snippets

名前の通り

jumpy

vim jump的な

Live Share

画面の共有

One Dark Pro

好きなテーマ

Partial Diff

部分diffができる

PHP Debug

名前の通り

PHP DocBlocker

PHP Doc周りの補完

PHP Intelephense

PHP IntelliSenseより好き

PlantUML

PlantUMLをググって（設計図を書く）

Project Manager

名前の通り

Python

Pythonの補完

Rainbow CSV

CSVを色分け＆SQLが使える

Regex Previewer

正規表現を確認できる

Relative Path

パスの補完

Settings Sync

設定の共有

shunt

複数行を一括で編集したいときによく使う

SQL Server (mssql)

SQLの補完

TODO Highlight

TODOを目立たせる
設定は上記の基本設定に記載

Visual Studio IntelliCode

VSCodeの補完プラグイン

vscode-icons

好きなアイコンテーマ

Whitespace+

スペースの色付け

自分の設定

{
    "mode": "all",
    "autoStart": true,
    "refreshRate": 100,
    "elements":
    [{
        "name": "space",
        "enabled": true,
        "pattern": " {2,}", //2文字以上のスペースは色を付ける
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(58, 70, 101, 0.3)",
                "borderColor": "rgba(58, 70, 101, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(117, 141, 203, 0.3)",
                "borderColor": "rgba(117, 141, 203, 0.4)"
            }
        }
    },{
        "name": "tab",
        "enabled": true,
        "pattern": "\\t",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(170, 53, 53, 0.3)",
                "borderColor": "rgba(170, 53, 53, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(223, 97, 97, 0.3)",
                "borderColor": "rgba(223, 97, 97, 0.4)"
            }
        }
    },{
        "name": "newline",
        "enabled": false,
        "pattern": "\\n",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "borderColor": "rgba(38, 150, 38, 0.3)"
            },
            "dark": {
                "borderColor": "rgba(85, 215, 85, 0.4)"
            }
        }
    },{
        "name": "trailing",
        "enabled": "unlessCursorAtEndOfPattern",
        "pattern": "\\s+$",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(58, 70, 101, 0.3)",
                "borderColor": "rgba(58, 70, 101, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(117, 141, 203, 0.3)",
                "borderColor": "rgba(117, 141, 203, 0.4)"
            }
        }
    }]
}

XML Tools

XMLの補完

YAML

YAMLの補完

zenkaku

全角スペースの色つけ