Essential VSCode Configuration Tips and Shortcuts for Frontend Development

VSCode Shortcuts

Mac users can leverage a rich set of keyboard shortcuts to reduce mouse usage and speed up coding, such as shift + command + k to delete a line, command + backspace to delete everything before the cursor, and various navigation and selection shortcuts.

shift + command + k          # delete current line
command + backspace          # delete all characters before cursor
command + option + up/down   # multi‑line selection
shift + left/right/up/down   # character selection
option + left/right          # jump to word boundaries
command + up/down            # jump to file top/bottom
option + up/down              # move current line up/down
shift + option + up/down      # duplicate line up/down

Additional view and file management shortcuts include creating new windows, toggling sidebars, and opening the integrated terminal.

command + shift + n   # new window
command + 1/2/3      # focus split pane
command + b          # toggle sidebar
ctrl + ~             # toggle terminal

Automatic Formatting & Lint Fixing

Enable "editor.formatOnSave": true in settings.json to auto‑format on save using Prettier or VSCode's built‑in formatter. To auto‑fix lint errors, add the following to settings.json :

{
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true,
    "source.fixAll.eslint": true
  }
}

Configure the default formatter via the command palette or the UI, and ensure the appropriate formatter (e.g., Prettier) is selected for each language.

Custom Snippets

Define reusable code snippets in VSCode by opening File → Preferences → Configure User Snippets , selecting the scope (global, project, or language), and editing the generated JSON file (e.g., vue.json ). Once defined, typing the snippet prefix (e.g., vue ) at the top level of a file will expand the predefined template.

Recommended Extensions

koroFileHeader – auto‑generates file and function headers.

GitLens – powerful Git visualization.

Auto Rename Tag – synchronously renames paired HTML/XML tags.

outline‑map – interactive outline view.

change‑case – converts naming styles (camel ↔ Pascal, etc.).

Syncing VSCode Settings

VSCode supports syncing settings via GitHub or a local backup. Sign in with GitHub, authorize, and follow the prompts to synchronize extensions, keybindings, and configuration across devices.

settings.json Overview

The settings.json file stores all VSCode configuration. It can exist at three scopes:

Default Settings – global defaults.

User Settings – current user overrides.

Workspace Settings – project‑specific overrides (highest priority).

.editorconfig

.editorconfig defines consistent coding styles across editors. Example content:

# top‑most EditorConfig file
root = true

[*]
end_of_line = lf
insert_final_newline = true

[*.{js,py}]
charset = utf-8

[*.py]
indent_style = space
indent_size = 4

[Makefile]
indent_style = tab

[lib/**.js]
indent_style = space
indent_size = 2

Key properties include indent_style , indent_size , trim_trailing_whitespace , and others. Install the EditorConfig extension for VSCode to apply these rules.

.vscode Directory

The .vscode folder contains project‑specific configuration files:

settings.json – workspace settings that override user defaults.

extensions.json – recommended extensions for the project.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "stylelint.validate": ["css", "less", "scss", "vue"]
}

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "Vue.volar"
  ]
}

These files ensure consistent tooling and formatting across team members.