Tip - Useful VS Code setup

21 Jun 20 ~ 3 min read

Visual Studio Code (VS Code) is by far the most advanced code editor on the market. It has many plugins and settings that will make your coding experience a pleasant one. And the best part... it’s free and works on both Mac and PC (thanks Microsoft!). 

Here a few things you can do to improve your developer experience with VS Code. I’ll be focusing on JavaScript as the primary language throughout, however most of these tips can apply to any programming language. 

{
    "workbench.startupEditor": "newUntitledFile",
    "gitlens.advanced.messages": {
        "suppressShowKeyBindingsNotice": true
    },
    "editor.tabSize": 2,
    "emmet.triggerExpansionOnTab": true,
    "emmet.syntaxProfiles": {
        "javascript": "jsx"
    },
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "vue-html": "html"
    },
    "window.restoreWindows": "all",
    "window.zoomLevel": 1,
    
    "workbench.settings.editor": "json",
    "javascript.updateImportsOnFileMove.enabled": "always",
    "git.autofetch": true,
    "explorer.confirmDragAndDrop": false,
    "atomKeymap.promptV3Features": true,
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "workbench.editor.showTabs": true,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "prettier.singleQuote": true,
    "prettier.trailingComma": "all",
    "typescript.updateImportsOnFileMove.enabled": "always",
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "sync.gist": "8085338d9dd41d9ad9ebf60be4f9b902",
    "[yaml]": {
        "editor.defaultFormatter": "redhat.vscode-yaml"
    },
    "workbench.colorTheme": "Atom One Dark",
}
Written by
Marcel Thomas