VSCode Tips, Shortcuts, and Configuration Guide for Frontend Developers

VSCode Shortcuts

The article lists useful macOS shortcuts for text editing, view management, file operations, and settings access, such as shift + command + K to delete a line, command + B to toggle the side bar, and command + P to quickly open files.

Automatic Formatting & Fixing

By adding "editor.formatOnSave": true to settings.json, VSCode can auto‑format code on save using Prettier or the built‑in formatter. To enable automatic lint fixing, include the editor.codeActionsOnSave object with "source.fixAll.eslint": true and "source.fixAll.stylelint": true.

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

Custom Snippets

Users can create language‑specific snippets via File → Preferences → Configure User Snippets , generating a vue.json (or other) file where placeholders like vue expand into predefined code blocks. The article shows two example snippets for Vue SFC files.

Recommended Extensions

koroFileHeader – auto‑generates file and function headers.

GitLens – powerful Git visualization.

Auto Rename Tag – synchronises HTML/XML tag renaming.

outline-map – interactive outline view.

change-case – converts naming styles (camel ↔ Pascal).

Synchronizing VSCode Settings

The guide explains how to sync settings via GitHub or local files, recommending the GitHub method for cloud‑based access.

settings.json

This file stores all VSCode configuration. Example content includes default formatter, format‑on‑save, and code‑action settings.

{
  "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"]
}

.editorconfig

.editorconfig defines consistent coding styles across editors. The article provides a sample file with root declaration, line‑ending, charset, indentation, and other properties, and explains comment syntax and wildcard matching.

# 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

.vscode Directory

The .vscode folder holds workspace‑specific configuration. It may contain settings.json (overriding user settings) and extensions.json (a list of recommended extensions for the project).

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

Overall, the article compiles practical VSCode tips, shortcuts, and configuration examples to help frontend developers improve productivity and maintain consistent code style.