Edited at

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

全角スペースの色つけ