VS Code Configuration

Essential plugins, settings, and configuration for Visual Studio Code.

Recommended Plugins

Essential Plugins

From the README configuration:

EditorConfig for VS Code
- Maintains consistent coding styles
- Reads .editorconfig files
- Marketplace
ESLint
- JavaScript/TypeScript linting
- Auto-fix on save
- Marketplace
vscode-icons
- File and folder icons
- Better visual organization
- Marketplace

Additional Recommended Plugins

General Development:

Prettier - Code formatter
GitLens - Enhanced Git integration
Path Intellisense - Autocomplete file paths
Auto Rename Tag - Auto rename paired HTML/XML tags
Bracket Pair Colorizer - Colorize matching brackets

Language Specific:

C# Dev Kit - C# development
Python - Python support
JavaScript (ES6) code snippets - JS snippets
Vetur or Volar - Vue.js support
ESLint - JavaScript/TypeScript linting

Productivity:

Live Share - Real-time collaboration
Remote - SSH - Edit files over SSH
Docker - Docker container management
REST Client - Test APIs directly in VS Code

Themes:

One Dark Pro - Popular dark theme
Material Icon Theme - Alternative icon theme
GitHub Theme - GitHub-style themes

Configuration

settings.json (from README)

Open settings: Ctrl + Shift + P → "Preferences: Open Settings (JSON)"

json

{
    "editor.fontFamily": "'Source Code Pro', Consolas, 'Courier New', monospace",
    "editor.fontSize": 14,
    "window.zoomLevel": 0,
    "workbench.startupEditor": "newUntitledFile",
    "workbench.iconTheme": "vscode-icons",
    "vsicons.presets.foldersAllDefaultIcon": true,
    "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "workbench.colorCustomizations": {
        "tab.activeBorderTop": "#ff0000"
    }
}

Modern settings.json

Updated configuration with modern VS Code features:

json

{
    // Font settings
    "editor.fontFamily": "'Source Code Pro', 'Cascadia Code', Consolas, 'Courier New', monospace",
    "editor.fontSize": 14,
    "editor.fontLigatures": true,

    // Editor behavior
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true,
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.detectIndentation": true,
    "editor.wordWrap": "on",
    "editor.minimap.enabled": true,
    "editor.suggestSelection": "first",
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": true,

    // Code actions
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit",
        "source.organizeImports": "explicit"
    },

    // Workbench
    "workbench.startupEditor": "none",
    "workbench.iconTheme": "vscode-icons",
    "workbench.colorTheme": "One Dark Pro",
    "workbench.editor.enablePreview": false,
    "workbench.colorCustomizations": {
        "tab.activeBorderTop": "#ff0000",
        "editorBracketHighlight.foreground1": "#ffd700",
        "editorBracketHighlight.foreground2": "#da70d6",
        "editorBracketHighlight.foreground3": "#87cefa"
    },

    // Terminal
    "terminal.integrated.fontSize": 13,
    "terminal.integrated.defaultProfile.windows": "PowerShell",
    "terminal.integrated.defaultProfile.linux": "bash",
    "terminal.integrated.defaultProfile.osx": "zsh",

    // Files
    "files.autoSave": "onFocusChange",
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true,
    "files.exclude": {
        "**/.git": true,
        "**/.DS_Store": true,
        "**/node_modules": true,
        "**/.vscode": false
    },

    // Git
    "git.enableSmartCommit": true,
    "git.confirmSync": false,
    "git.autofetch": true,

    // Language specific
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

    // Extensions
    "vsicons.presets.foldersAllDefaultIcon": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
    ]
}

Keyboard Shortcuts

Essential Shortcuts

Action	Windows/Linux	macOS
Command Palette	`Ctrl + Shift + P`	`Cmd + Shift + P`
Quick Open File	`Ctrl + P`	`Cmd + P`
Toggle Terminal	Ctrl + `	Cmd + `
Toggle Sidebar	`Ctrl + B`	`Cmd + B`
Split Editor	`Ctrl + \`	`Cmd + \`
Close Editor	`Ctrl + W`	`Cmd + W`
Save	`Ctrl + S`	`Cmd + S`
Save All	`Ctrl + K S`	`Cmd + K S`
Find	`Ctrl + F`	`Cmd + F`
Find in Files	`Ctrl + Shift + F`	`Cmd + Shift + F`
Replace	`Ctrl + H`	`Cmd + H`

Editing Shortcuts

Action	Windows/Linux	macOS
Multi-cursor	`Ctrl + D`	`Cmd + D`
Select All Occurrences	`Ctrl + Shift + L`	`Cmd + Shift + L`
Column Selection	`Shift + Alt + Drag`	`Shift + Option + Drag`
Move Line Up/Down	`Alt + ↑/↓`	`Option + ↑/↓`
Copy Line Up/Down	`Shift + Alt + ↑/↓`	`Shift + Option + ↑/↓`
Delete Line	`Ctrl + Shift + K`	`Cmd + Shift + K`
Comment Line	`Ctrl + /`	`Cmd + /`
Comment Block	`Shift + Alt + A`	`Shift + Option + A`
Format Document	`Shift + Alt + F`	`Shift + Option + F`
Go to Line	`Ctrl + G`	`Cmd + G`

Action	Windows/Linux	macOS
Go to Definition	`F12`	`F12`
Peek Definition	`Alt + F12`	`Option + F12`
Go to Symbol	`Ctrl + Shift + O`	`Cmd + Shift + O`
Go Back	`Alt + ←`	`Ctrl + -`
Go Forward	`Alt + →`	`Ctrl + Shift + -`
Open Next Editor	`Ctrl + Tab`	`Ctrl + Tab`
Zen Mode	`Ctrl + K Z`	`Cmd + K Z`

Custom Keyboard Shortcuts

keybindings.json

Open: Ctrl + Shift + P → "Preferences: Open Keyboard Shortcuts (JSON)"

Duplicate Line (like Visual Studio):

From README tip about making VS Code duplicate like Visual Studio:

json

[
    {
        "key": "ctrl+d",
        "command": "editor.action.copyLinesDownAction",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+d",
        "command": "-editor.action.addSelectionToNextFindMatch",
        "when": "editorFocus"
    }
]

Additional useful shortcuts:

json

[
    {
        "key": "ctrl+shift+d",
        "command": "editor.action.duplicateSelection"
    },
    {
        "key": "ctrl+k ctrl+c",
        "command": "editor.action.addCommentLine",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+k ctrl+u",
        "command": "editor.action.removeCommentLine",
        "when": "editorTextFocus"
    }
]

Workspace Settings

Create .vscode/settings.json in project root for project-specific settings:

json

{
    "editor.tabSize": 2,
    "files.exclude": {
        "**/node_modules": true,
        "**/.git": true,
        "**/dist": true
    },
    "search.exclude": {
        "**/node_modules": true,
        "**/dist": true
    }
}

Code Snippets

Create custom snippets: Ctrl + Shift + P → "Preferences: Configure User Snippets"

JavaScript/TypeScript snippets:

json

{
    "Console Log": {
        "prefix": "cl",
        "body": [
            "console.log('$1:', $1);"
        ],
        "description": "Console log with label"
    },
    "Arrow Function": {
        "prefix": "af",
        "body": [
            "const ${1:functionName} = (${2:params}) => {",
            "\t$0",
            "}"
        ],
        "description": "Arrow function"
    },
    "Async Arrow Function": {
        "prefix": "aaf",
        "body": [
            "const ${1:functionName} = async (${2:params}) => {",
            "\t$0",
            "}"
        ],
        "description": "Async arrow function"
    }
}

EditorConfig

Create .editorconfig in project root:

ini

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
indent_style = space
indent_size = 2

[*.md]
trim_trailing_whitespace = false

[*.py]
indent_size = 4

[Makefile]
indent_style = tab

Opening VS Code from Terminal

macOS (from README)

Open Command Palette: Ctrl + Shift + P
Type: "Shell Command: Install 'code' command in PATH"
Select the command

Then use:

bash

# Open current directory
code .

# Open specific file
code filename.txt

# Open and install extension
code --install-extension esbenp.prettier-vscode

Windows

cmd

:: Already available after installation
code .

Linux

bash

# Usually available after installation
code .

# If not, add to PATH
export PATH="$PATH:/path/to/vscode/bin"

Fonts

Source Code Pro (from README)

Download: Google Fonts - Source Code Pro

Install and configure in settings:

json

{
    "editor.fontFamily": "'Source Code Pro', Consolas, monospace"
}

Other Recommended Fonts

Cascadia Code - Microsoft's coding font with ligatures
Fira Code - Popular font with ligatures
JetBrains Mono - Designed for developers
Hack - Hand-crafted typeface
Inconsolata - Monospace font for code

Tips and Tricks

Multi-Cursor Editing

1. Alt + Click: Add cursor
2. Ctrl + Alt + ↑/↓: Add cursor above/below
3. Ctrl + D: Select next occurrence
4. Ctrl + Shift + L: Select all occurrences

1. Ctrl + P: Quick open file
2. Ctrl + P, type @: Go to symbol
3. Ctrl + P, type :: Go to line
4. Ctrl + P, type #: Search workspace symbols

Zen Mode

Press Ctrl + K Z for distraction-free coding.

Format on Save

json

{
    "editor.formatOnSave": true,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

Auto Save

json

{
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000
}

Troubleshooting

ESLint Not Working

Install ESLint extension
Install ESLint in project: npm install --save-dev eslint

Create .eslintrc.json:

json

{
    "extends": "eslint:recommended",
    "env": {
        "browser": true,
        "node": true,
        "es6": true
    }
}

Reload VS Code

Prettier Conflicts with ESLint

bash

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

Update .eslintrc.json:

json

{
    "extends": ["eslint:recommended", "plugin:prettier/recommended"]
}

Terminal Not Opening

Check settings:

json

{
    "terminal.integrated.defaultProfile.windows": "PowerShell"
}

VS Code Configuration

Recommended Plugins

Essential Plugins

Additional Recommended Plugins

Configuration

settings.json (from README)

Modern settings.json

Keyboard Shortcuts

Essential Shortcuts

Editing Shortcuts

Navigation Shortcuts

Custom Keyboard Shortcuts

keybindings.json

Workspace Settings

Code Snippets

EditorConfig

Opening VS Code from Terminal

macOS (from README)

Windows

Linux

Fonts

Source Code Pro (from README)

Other Recommended Fonts

Tips and Tricks

Multi-Cursor Editing

Quick File Navigation

Zen Mode

Format on Save

Auto Save

Troubleshooting

ESLint Not Working

Prettier Conflicts with ESLint

Terminal Not Opening

See Also

External Resources

VS Code Configuration ​

Recommended Plugins ​

Essential Plugins ​

Additional Recommended Plugins ​

Configuration ​

settings.json (from README) ​

Modern settings.json ​

Keyboard Shortcuts ​

Essential Shortcuts ​

Editing Shortcuts ​

Navigation Shortcuts ​

Custom Keyboard Shortcuts ​

keybindings.json ​

Workspace Settings ​

Code Snippets ​

EditorConfig ​

Opening VS Code from Terminal ​

macOS (from README) ​

Windows ​

Linux ​

Fonts ​

Source Code Pro (from README) ​

Other Recommended Fonts ​

Tips and Tricks ​

Multi-Cursor Editing ​

Quick File Navigation ​

Zen Mode ​

Format on Save ​

Auto Save ​

Troubleshooting ​

ESLint Not Working ​

Prettier Conflicts with ESLint ​

Terminal Not Opening ​

See Also ​

External Resources ​

VS Code Configuration

Recommended Plugins

Essential Plugins

Additional Recommended Plugins

Configuration

settings.json (from README)

Modern settings.json

Keyboard Shortcuts

Essential Shortcuts

Editing Shortcuts

Navigation Shortcuts

Custom Keyboard Shortcuts

keybindings.json

Workspace Settings

Code Snippets

EditorConfig

Opening VS Code from Terminal

macOS (from README)

Windows

Linux

Fonts

Source Code Pro (from README)

Other Recommended Fonts

Tips and Tricks

Multi-Cursor Editing

Quick File Navigation

Zen Mode

Format on Save

Auto Save

Troubleshooting

ESLint Not Working

Prettier Conflicts with ESLint

Terminal Not Opening

See Also

External Resources