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
全角スペースの色つけ