Comprehensive VSCode Configuration Guide for Enhanced Productivity

This article provides a detailed guide to optimizing Visual Studio Code (VSCode) for a smoother and more efficient coding experience, covering installation, essential extensions, and a comprehensive set of JSON settings.

Installation : Use a mirror to download the latest VSCode version (e.g., 1.89.0 ).

Basic setup : Install the Chinese language pack, open settings.json via Ctrl+, , and edit the file.

Smooth typing :

{
    "editor.smoothScrolling": true,
    "editor.cursorBlinking": "expand",
    "editor.cursorSmoothCaretAnimation": "on",
    "workbench.list.smoothScrolling": true
}

Mouse wheel zoom :

{
    "editor.mouseWheelZoom": true
}

Bracket pair colorization :

{
    "editor.guides.bracketPairs": true,
    "editor.bracketPairColorization.enabled": true
}

Intelligent suggestions :

{
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "editor.acceptSuggestionOnEnter": "smart",
    "editor.suggestSelection": "recentlyUsedByPrefix",
    "editor.suggest.insertMode": "replace"
}

Auto‑closing characters :

{
    "editor.autoClosingBrackets": "beforeWhitespace",
    "editor.autoClosingDelete": "always",
    "editor.autoClosingOvertype": "always",
    "editor.autoClosingQuotes": "beforeWhitespace"
}

Indentation :

{
    "editor.detectIndentation": false,
    "editor.tabSize": 4
}

Window style :

{
    "window.dialogStyle": "custom"
}

Word wrap and line height :

{
    "editor.wordWrap": "on",
    "editor.lineHeight": 1.5
}

Compact folder view :

{
    "explorer.compactFolders": true,
    "notebook.compactView": true
}

Remove unnecessary semicolons :

{
    "javascript.format.semicolons": "remove",
    "typescript.format.semicolons": "remove"
}

TypeScript and JavaScript inlay hints :

{
    "typescript.locale": "zh-CN",
    "typescript.inlayHints.enumMemberValues.enabled": true,
    "javascript.inlayHints.enumMemberValues.enabled": true,
    "javascript.inlayHints.functionLikeReturnTypes.enabled": false,
    "javascript.inlayHints.parameterNames.enabled": "none"
}

Vue specific hints :

{
    "vue.inlayHints.missingProps": true,
    "vue.autoInsert.dotValue": true
}

Startup and encoding :

{
    "workbench.startupEditor": "none",
    "files.autoGuessEncoding": true
}

Trim trailing whitespace (optional):

{
    "files.trimTrailingWhitespace": false
}

Search performance tweaks :

{
    "search.followSymlinks": false,
    "search.searchEditor.singleClickBehaviour": "peekDefinition",
    "search.exclude": {
        "**/node_modules": true,
        "**/dist": true,
        "**/.git": true
    }
}

File associations for custom extensions:

{
    "files.associations": {
        "*.wxss": "css",
        "*.wxml": "html",
        "*.svg": "html",
        "*.xml": "html",
        "*.wxs": "javascript",
        "*.cjson": "jsonc",
        "*.json": "jsonc"
    }
}

Copy relative path separator :

{
    "explorer.copyRelativePathSeparator": "/"
}

For project‑specific settings, you can define separate settings.json files and use workspace configurations. The author also provides a full configuration repository at https://gitee.com/cjl2385/dig-for-gold/tree/master/VSCode .