Last week I wrote about must-have VS Code extensions for web development. This time, I’m writing about the recommended settings to make sure these extensions and VS Code work correctly.
VS Code is an
excellent tool for writing software, and when you install the right extensions, it can be very powerful. However, if these extensions and VS Code isn’t set up correctly, many of its features or extensions might not work the way you expect them to work.
Below is a list of settings that I use as my base when setting up VS Code for any type of web development. You can also get them from the gist located here:
https://gist.github.com/ricardodsanchez/179f693c8c843abc782e3e40112904aa
The way to get to the setting in VS Code is by typing Ctrl-Shift P and then type “settings”. A settings.json file will open and this is where you can remove all existing settings and paste the settings below.
{
"telemetry.enableTelemetry": false,
"telemetry.enableCrashReporter": false,
"files.autoSave": "afterDelay",
"files.associations": {
"*.md": "markdown"
},
"window.zoomLevel": 0,
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"breadcrumbs.enabled": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.acceptSuggestionOnEnter": "on",
"editor.detectIndentation": false,
"editor.fontFamily": "'Source Code Pro', Menlo, Consolas, Courier, monospace",
"editor.fontSize": 13,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.multiCursorModifier": "ctrlCmd",
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true,
},
"editor.renderWhitespace": "none",
"editor.snippetSuggestions": "top",
"editor.tabSize": 2,
"editor.wordWrap": "on",
"editor.wrappingIndent": "indent",
"extensions.ignoreRecommendations": true,
"extensions.showRecommendationsOnlyOnDemand": true,
"files.exclude": {
"**/._*": true
},
"files.insertFinalNewline": true,
"html.format.endWithNewline": true,
"html.format.extraLiners": "body",
"html.format.indentInnerHtml": true,
"html.format.unformatted": "b,em,i,span,strong,wbr",
"html.format.wrapLineLength": 0,
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.port": 0,
"workbench.colorCustomizations": {
"editorIndentGuide.activeBackground": "#FFA500"
},
"workbench.editor.tabSizing": "shrink",
"workbench.editor.enablePreview": false,
"workbench.editor.enablePreviewFromQuickOpen": false,
"gitlens.advanced.messages": {
"suppressGitDisabledWarning": true
}
}
That’s all for all folks, remember to subscribe and please let me know if you have any comments or questions below.
Ricardo Sanchez 
[…] remember to adjust your VS Code settings to make sure you get the most productivity and the best experience when using VS Code and these […]
LikeLike