drafts

VS Codeのおすすめ設定と拡張機能

初回作成:2024/04/04 最終更新:2024/04/04

標準機能の設定

json

{
  "auto-close-tag.disableOnLanguage": ["javascript", "typescript", "markdown"],

  "code-eol.color": "#808080",

  "debug.console.fontFamily": "UDEV Gothic NFLG",
  "debug.internalConsoleOptions": "openOnSessionStart",
  "debug.openDebug": "openOnSessionStart",
  "editor.acceptSuggestionOnCommitCharacter": false,
  "editor.acceptSuggestionOnEnter": "off",
  "editor.bracketPairColorization.enabled": true,
  "editor.copyWithSyntaxHighlighting": false,
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.fontFamily": "UDEV Gothic LG",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.guides.bracketPairs": true,
  "editor.minimap.showSlider": "always",
  "editor.minimap.size": "fit",
  "editor.mouseWheelZoom": true,
  "editor.renderControlCharacters": true,
  "editor.renderLineHighlight": "gutter",
  "editor.renderWhitespace": "all",
  "editor.smoothScrolling": true,
  "editor.stickyScroll.enabled": true,
  "editor.suggestSelection": "first",
  "editor.tabCompletion": "on",
  "editor.unicodeHighlight.allowedCharacters": {
    "›": true
  },
  "editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?、。「」（）【】『』〔〕〈〉≪≫《》｛｝＜＞；：・？＋－＊／＝≒≠＠｜～＆％＄＃”！’　てにをはがのともへでや",
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "explorer.fileNesting.enabled": true,
  "explorer.sortOrderLexicographicOptions": "unicode",

  "files.eol": "\n",

  "git.autofetch": true,
  "git.confirmSync": false,
  "git.enableSmartCommit": true,
  "githubPullRequests.createOnPublishBranch": "never",
  "gitlens.advanced.messages": {
    "suppressFileNotUnderSourceControlWarning": true
  },
  "gitlens.codeLens.authors.enabled": false,
  "gitlens.codeLens.recentChange.enabled": false,
  "gitlens.defaultDateFormat": "YYYY/M/D HH:mm",
  "gitlens.defaultDateStyle": "absolute",

  "hediet.vscode-drawio.resizeImages": null,
  "hediet.vscode-drawio.theme": "atlas",
  "html.format.enable": false,

  "insertnum.formatstr": "%d", // Insert Numbersのデフォルトフォーマット
  "insertnum.start": 1, // Insert Numbersのデフォルト開始番号
  "insertnum.step": 1, // Insert Numbersのデフォルトステップ数

  "liveSassCompile.settings.autoprefix": ["> 0.5%", "not dead"],
  "liveSassCompile.settings.formats": [
    {
      "extensionName": ".css",
      "format": "expanded"
    },
    {
      "extensionName": ".min.css",
      "format": "compressed"
    }
  ],
  "liveSassCompile.settings.generateMap": false,
  "liveSassCompile.settings.showOutputWindowOn": "Debug",
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.donotVerifyTags": true,

  "markdown-preview-enhanced.codeBlockTheme": "monokai.css",
  "markdown-preview-enhanced.frontMatterRenderingOption": "table",
  "markdown-preview-enhanced.previewTheme": "one-dark.css",
  "markdown.extension.toc.updateOnSave": false,
  "markdown.preview.breaks": true,
  "markdown.preview.fontFamily": "Noto Sans JP",
  "markdown.preview.lineHeight": 1.5,
  "markdown.validate.enabled": true,
  "markdownlint.config": {
    "MD024": {
      "siblings_only": true
    },
    "no-inline-html": {
      "allowed_elements": ["a", "br"]
    }
  },
  "material-icon-theme.activeIconPack": "vue",

  "pasteImage.path": "${currentFileDir}/images",
  "php.validate.executablePath": "D:\\xampp\\php\\php.exe",
  "prettier.jsxSingleQuote": true,
  "prettier.singleQuote": true,

  "security.workspace.trust.untrustedFiles": "open",

  "tableformatter.common.explicitFullwidthChars": ["←", "→", "↑", "↓", "⇔", "⇒", "…", "≠", "○", "※"],
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.enableMultiLinePasteWarning": "never",
  "terminal.integrated.env.windows": {
    "PSExecutionPolicyPreference": "RemoteSigned"
  },
  "terminal.integrated.fontFamily": "UDEV Gothic NFLG",
  "terminal.integrated.smoothScrolling": true,

  "workbench.colorCustomizations": {
    "editorStickyScroll.background": "#1c114d",
    "editorStickyScrollHover.background": "#372181"
  },
  "workbench.iconTheme": "material-icon-theme",
  "workbench.layoutControl.enabled": false,
  "workbench.list.smoothScrolling": true,
  "workbench.productIconTheme": "material-product-icons",
  "workbench.startupEditor": "none",
  "workbench.tree.enableStickyScroll": true,
  "workbench.tree.renderIndentGuides": "always",

  "[astro]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": true
  },

  "[bat]": {
    "files.encoding": "shiftjis"
  },

  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": true
  },

  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "editor.wordSeparators": "`~!@#%^&*()-=+[{]}\\|;:'\",.<>/?、。「」（）【】『』〔〕〈〉≪≫《》｛｝＜＞；：・？＋－＊／＝≒≠＠｜～＆％＄＃”！’　てにをはがのともへでや",
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": true
  },

  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": true
  },

  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": true
  },
  "javascript.format.insertSpaceAfterSemicolonInForStatements": false,
  "javascript.preferences.quoteStyle": "single",
  "javascript.referencesCodeLens.enabled": true,
  "javascript.suggest.completeFunctionCalls": true,
  "javascript.updateImportsOnFileMove.enabled": "always",

  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": true
  },

  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": true
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": true
  },
  "typescript.format.insertSpaceAfterSemicolonInForStatements": false,
  "typescript.implementationsCodeLens.enabled": true,
  "typescript.preferences.quoteStyle": "single",
  "typescript.suggest.completeFunctionCalls": true,
  "typescript.updateImportsOnFileMove.enabled": "always",

  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": true
  },
  "vue.splitEditors.icon": true,
  "vue.updateImportsOnFileMove.enabled": true,
  "vue.autoInsert.dotValue": true,

  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": true
  },

  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": true
  },

  "[markdown]": {
    "editor.formatOnPaste": false,
    "editor.formatOnSave": false,
    "editor.minimap.enabled": false,
    "editor.quickSuggestions": {
      "comments": "on",
      "other": "on",
      "strings": "on"
    },
    "editor.tabSize": 2,
    "editor.wordWrap": "off",
    "files.eol": "\r\n",
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": true,
    "editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
  },

  "[xml]": {
    "editor.tabSize": 2
  },

  "[yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286

拡張機能

外観・テーマ

Material Icon Theme

Material Product Icons

One Dark+

汎用

Bracket Lens

右括弧の左側にスコープの情報が表示されるようになる。

https://marketplace.visualstudio.com/items?itemName=wraith13.bracket-lens

Better Folding

行の折りたたみをより見やすく・使いやすくする。

https://marketplace.visualstudio.com/items?itemName=MohammadBaqer.better-folding

code-eol

行末に改行コードを表示する。

https://marketplace.visualstudio.com/items?itemName=sohamkamani.code-eol

Draw.io Integration

https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

Error Lens

エラー内容をインラインで表示。

https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens

Prettier

コードフォーマッタ。

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Swagger Viewer

TODO Highlight

vscode-json

vscode-random

Code Spell Checker

スペルチェッカ―。

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

Insert Numbers

Rainbow CSV

vscode-textlint

WEB

Auto Close Tag

閉じタグを自動で補完してくれる。

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Auto Rename Tag

開始タグと閉じタグが連動して名称を変更できる。

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

CSS Peek

https://marketplace.visualstudio.com/items?itemName=sohamkamani.code-eol

ES7+ React/Redux/React-Native snippets

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

VS Codeのおすすめ設定と拡張機能

標準機能の設定 ​

拡張機能 ​

外観・テーマ ​

Material Icon Theme ​

Material Product Icons ​

One Dark+ ​

汎用 ​

Bracket Lens ​

Better Folding ​

code-eol ​

Draw.io Integration ​

Error Lens ​

IntelliCode ​

ESLint ​

json ​

Prettier ​

Swagger Viewer ​

TODO Highlight ​

vscode-json ​

vscode-random ​

Code Spell Checker ​

Insert Numbers ​

Rainbow CSV ​

vscode-textlint ​

WEB ​

Auto Close Tag ​

Auto Rename Tag ​

CSS Peek ​

ES7+ React/Redux/React-Native snippets ​

HTML CSS Support ​

SCSS IntelliSense ​

IntelliSence for CSS class names in HTML ​

Markuplint ​

Stylelint ​

vscode-styled-components ​

Git（GitHub） ​

Git History ​

GitHub Actions ​

GitHub Pull Requests ​

GitLens ​

Gitmoji ​

Markdown ​

Markdown All in One ​

Markdown Preview Enhanced ​

Paste Image ​

Table Formatter ​

markdownlint ​

Mermaid Markdown Syntax Highlighting ​

標準機能の設定

拡張機能

外観・テーマ

Material Icon Theme

Material Product Icons

One Dark+

汎用

Bracket Lens

Better Folding

code-eol

Draw.io Integration

Error Lens

IntelliCode

ESLint

json

Prettier

Swagger Viewer

TODO Highlight

vscode-json

vscode-random

Code Spell Checker

Insert Numbers

Rainbow CSV

vscode-textlint

WEB

Auto Close Tag

Auto Rename Tag

CSS Peek

ES7+ React/Redux/React-Native snippets

HTML CSS Support

SCSS IntelliSense

IntelliSence for CSS class names in HTML

Markuplint

Stylelint

vscode-styled-components

Git（GitHub）

Git History

GitHub Actions

GitHub Pull Requests

GitLens

Gitmoji

Markdown

Markdown All in One

Markdown Preview Enhanced

Paste Image

Table Formatter

markdownlint

Mermaid Markdown Syntax Highlighting