Frontend Knowledge Hub

English

įŽ€äŊ“中文

English

įŽ€äŊ“中文

Appearance

2025-11-27
1682
10.5m

VS Code Setup: Building an Efficient Frontend Development Tool ​

Why Choose VS Code? ​

Visual Studio Code (VS Code) is a free, open-source code editor developed by Microsoft. Since its release in 2015, it has become the most popular frontend development tool. Its success is mainly due to the following reasons:

Lightweight yet Powerful ​

VS Code uses the Electron framework, maintaining a lightweight profile while providing professional IDE features. It starts up quickly, uses few resources, and is suitable for development projects of all sizes.

Powerful Extension Ecosystem ​

VS Code has a rich marketplace of extensions. You can install various extensions to enhance functionality according to your needs. Whether it's code highlighting, intelligent suggestions, or version control, there are corresponding plugins available.

Intelligent Code Editing ​

It has built-in support for languages like JavaScript and TypeScript, providing intelligent code completion, syntax highlighting, and error detection features.

Cross-Platform Support ​

It supports the three major operating systems: Windows, macOS, and Linux. No matter which platform you use, you can get a consistent development experience.

Installation and Initialization ​

Download and Install ​

Visit the VS Code Official Website, and download the version corresponding to your operating system.

Windows User Installation Suggestions:

  • Check "Add to PATH" to facilitate command-line invocation.
  • Check "Add 'Open with Code' action to Windows Explorer file context menu" and "directory context menu".

macOS User Installation Suggestions:

  • Install using Homebrew: brew install --cask visual-studio-code
  • Or download the DMG file and drag it to install.

Linux User Installation Suggestions:

bash
# Ubuntu/Debian
sudo snap install code --classic

# Or use apt
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/

First Launch Configuration ​

When launching VS Code for the first time, the following basic configurations are recommended:

  1. Interface Language Settings

    • If you need a different interface language, search for and install the corresponding "Language Pack for Visual Studio Code".
    • After installation, press Ctrl+Shift+P, type Configure Display Language, and select your preferred language.

  2. Theme Settings

    • Built-in themes: Dark, Light, High Contrast.
    • Extension themes: Search for themes you like in the Extension Marketplace.

  3. Font Settings

    • It is recommended to use monospaced fonts, such as Fira Code, JetBrains Mono, etc.

User Settings Detailed ​

VS Code settings are divided into two levels: User Settings and Workspace Settings. User settings apply globally, while workspace settings apply only to the current project.

Open Settings Interface ​

  • Method 1: Click the gear icon in the lower-left corner -> Settings.
  • Method 2: Use the shortcut Ctrl+, (Windows/Linux) or Cmd+, (macOS).
  • Method 3: Through the Command Palette Ctrl+Shift+P, type "Preferences: Open Settings".

Basic Editor Settings ​

json
// settings.json configuration example
{
  // Editor Basic Settings
  "editor.fontSize": 14,
  "editor.fontFamily": "Fira Code, Consolas, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.lineHeight": 1.6,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": false,

  // Appearance Settings
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  "editor.minimap.enabled": false,
  "editor.renderWhitespace": "boundary",

  // File Settings
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "files.associations": {
    "*.vue": "vue",
    "*.jsx": "javascriptreact",
    "*.tsx": "typescriptreact"
  },

  // Code Formatting
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },

  // Intelligent Suggestions
  "editor.suggestSelection": "first",
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true
  },
  "editor.acceptSuggestionOnCommitCharacter": true,

  // Search Settings
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/*.code-search": true,
    "**/dist": true,
    "**/build": true
  }
}

Keyboard Shortcuts Customization ​

VS Code allows users to customize shortcuts to adapt to personal habits.

json
// keybindings.json example
[
  // Custom Shortcuts
  {
    "key": "ctrl+;",
    "command": "editor.action.commentLine",
    "when": "editorTextFocus && !editorReadonly"
  },
  {
    "key": "ctrl+shift+;",
    "command": "editor.action.blockComment",
    "when": "editorTextFocus && !editorReadonly"
  },
  {
    "key": "alt+up",
    "command": "editor.action.moveLinesUpAction",
    "when": "editorTextFocus && !editorReadonly"
  },
  {
    "key": "alt+down",
    "command": "editor.action.moveLinesDownAction",
    "when": "editorTextFocus && !editorReadonly"
  },
  {
    "key": "ctrl+d",
    "command": "editor.action.addSelectionToNextFindMatch",
    "when": "editorFocus"
  }
]

Workspace and Project Management ​

File Explorer Configuration ​

The File Explorer is one of the core components of VS Code. Reasonable configuration can improve project management efficiency:

json
{
  // File Explorer Settings
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "explorer.openEditors.visible": 10,
  "explorer.sortOrder": "default",
  "explorer.compactFolders": false,

  // File and Folder Exclusion
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true,
    "**/build": true,
    "**/coverage": true
  },

  // Files Excluded from Search
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/*.code-search": true
  }
}

Workspace Configuration ​

Workspace configuration allows you to customize settings for specific projects by creating a .vscode/settings.json file:

json
// .vscode/settings.json
{
  // Project Specific Settings
  "editor.tabSize": 4,
  "editor.insertSpaces": true,

  // TypeScript Specific Settings
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.updateImportsOnFileMove.enabled": "always",

  // ESLint Settings
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ],

  // Prettier Settings
  "prettier.singleQuote": true,
  "prettier.trailingComma": "es5",
  "prettier.tabWidth": 2,
  "prettier.semi": false,

  // Vue Specific Settings
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Task Configuration ​

VS Code's task system can automate common development tasks:

json
// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Start Development Server",
      "type": "npm",
      "script": "serve",
      "problemMatcher": [],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    },
    {
      "label": "Build for Production",
      "type": "npm",
      "script": "build",
      "problemMatcher": []
    },
    {
      "label": "Run Tests",
      "type": "npm",
      "script": "test",
      "problemMatcher": []
    },
    {
      "label": "Lint Code",
      "type": "shell",
      "command": "npm",
      "args": ["run", "lint"],
      "group": "build"
    }
  ]
}

Debugging Environment Configuration ​

JavaScript/Node.js Debugging ​

VS Code has powerful built-in debugging features for debugging frontend JavaScript and Node.js code:

json
// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome against localhost",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Attach to Chrome",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Debug Node.js",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/index.js",
      "console": "integratedTerminal",
      "restart": true,
      "runtimeExecutable": "nodemon"
    },
    {
      "name": "Debug Jest Tests",
      "type": "node",
      "request": "launch",
      "env": {
        "NODE_ENV": "test"
      },
      "runtimeArgs": [
        "--inspect-brk",
        "${workspaceFolder}/node_modules/.bin/jest",
        "--runInBand"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

Browser Debugging ​

Configure Chrome debugging to debug frontend code directly in VS Code:

javascript
// Add debugger statement or breakpoint in code
function calculateTotal(items) {
  debugger; // VS Code will pause here
  return items.reduce((sum, item) => sum + item.price, 0);
}

// Or use console.log for debugging
console.log("Debug: Items array:", items);
console.log("Debug: Total calculated:", calculateTotal(items));

Advanced Features and Tips ​

Multi-cursor Editing ​

VS Code supports multi-cursor editing, allowing you to edit multiple locations simultaneously:

  • Ctrl+Alt+Up/Down: Add cursor above/below
  • Alt+Click: Add cursor at clicked position
  • Ctrl+Shift+L: Select all occurrences of current selection
javascript
// Multi-cursor editing example
// Original code:
const firstName = "";
const lastName = "";
const email = "";

// Use multi-cursor to add content inside quotes at three locations simultaneously
const firstName = "John";
const lastName = "Doe";
const email = "[email protected]";

Snippets ​

Create custom code snippets to improve coding efficiency:

json
// .vscode/custom.code-snippets
{
  "Console Log": {
    "prefix": "clog",
    "body": ["console.log('$1: ', $1);"],
    "description": "Console log with variable name"
  },
  "React Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "function ${1:ComponentName}() {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  );",
      "}",
      "",
      "export default ${1:ComponentName};"
    ],
    "description": "React Functional Component"
  },
  "Vue Component": {
    "prefix": "vcomp",
    "body": [
      "<template>",
      "  <div>",
      "    $1",
      "  </div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  name: '${2:ComponentName}',",
      "  data() {",
      "    return {",
      "      $0",
      "    };",
      "  },",
      "};",
      "</script>",
      "",
      "<style scoped>",
      "</style>"
    ],
    "description": "Vue Single File Component"
  }
}

Integrated Terminal Configuration ​

VS Code integrates a powerful terminal:

json
{
  // Terminal Settings
  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "terminal.integrated.shell.osx": "/bin/zsh",
  "terminal.integrated.shell.linux": "/bin/bash",
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.fontFamily": "Fira Code, Consolas, 'Courier New', monospace",
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.enableBell": false
}

Git Integration Configuration ​

VS Code has built-in Git support for convenient version control:

json
{
  // Git Settings
  "git.enableSmartCommit": true,
  "git.autofetch": true,
  "git.confirmSync": false,
  "git.postCommitCommand": "none",
  "git.showInlineOpenFileAction": false,
  "git.suggestSmartCommit": false,
  "gitlens.advanced.messages": {
    "suppressCommitHasNoPreviousCommitWarning": false,
    "suppressCommitNotFoundWarning": false,
    "suppressFileNotUnderSourceControlWarning": false,
    "suppressGitVersionWarning": false,
    "suppressLineUncommittedWarning": false,
    "suppressNoRepositoryWarning": false,
    "suppressResultsExplorerNotice": false,
    "suppressShowKeyBindingsNotice": true,
    "suppressUpdateNotice": false,
    "suppressWelcomeNotice": true
  }
}

Performance Optimization Configuration ​

Improve Startup Speed ​

json
{
  // Performance Optimization Settings
  "editor.wordBasedSuggestions": false,
  "editor.semanticHighlighting.enabled": false,
  "editor.quickSuggestions.delay": 10,
  "extensions.autoUpdate": false,
  "workbench.startupEditor": "none",
  "workbench.enableExperiments": false,
  "telemetry.enableTelemetry": false,
  "search.followSymlinks": false,
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/**": true,
    "**/tmp/**": true,
    "**/bower_components/**": true,
    "**/dist/**": true
  }
}

Memory Optimization ​

For large projects, you can reduce memory usage with the following settings:

json
{
  // Memory Optimization
  "typescript.suggest.autoImports": false,
  "typescript.updateImportsOnFileMove.enabled": "off",
  "breadcrumbs.enabled": false,
  "editor.minimap.renderCharacters": false,
  "editor.glyphMargin": false,
  "editor.folding": false,
  "editor.lineNumbers": "on",
  "workbench.editor.enablePreview": false
}

Common Shortcuts Summary ​

Editing Operations ​

  • Ctrl+C/V/X: Copy/Paste/Cut
  • Ctrl+Z/Y: Undo/Redo
  • Ctrl+F: Find
  • Ctrl+H: Replace
  • Ctrl+D: Select next occurrence
  • Alt+Up/Down: Move line
  • Shift+Alt+Up/Down: Copy line
  • Ctrl+/: Toggle comment
  • Ctrl+Shift+K: Delete line
  • Ctrl+P: Quick Open File
  • Ctrl+G: Go to Line
  • Ctrl+Shift+O: Go to Symbol
  • F12: Go to Definition
  • Shift+F12: Find All References
  • Ctrl+Tab: Switch Editor Tabs
  • Ctrl+1/2/3: Switch to 1st/2nd/3rd Editor Group

Interface Operations ​

  • Ctrl+B: Toggle Sidebar
  • Ctrl+J: Toggle Integrated Terminal
  • Ctrl+Shift+E: Show Explorer
  • Ctrl+Shift+F: Show Search
  • Ctrl+Shift+X: Show Extensions
  • Ctrl+Shift+D: Show Debug
  • Ctrl+Shift+M: Show Problems Panel

Summary ​

As the preferred tool for modern frontend development, VS Code can significantly improve development efficiency through reasonable configuration. Configuring VS Code is not just for aesthetics, but to create a development environment that fits personal habits and improves productivity.

Key Points Review:

  • VS Code is a lightweight yet powerful free code editor.
  • Reasonable user settings can significantly improve coding efficiency.
  • Custom shortcuts and snippets are key to improving efficiency.
  • Workspace configuration makes project settings more flexible.
  • Built-in debugging features make code debugging more convenient.
  • Performance optimization configuration can improve the development experience of large projects.
  • Mastering common shortcuts is a basic skill for using VS Code.

A good development environment configuration is the foundation of efficient development. Spending time configuring a VS Code environment that suits you is an investment that will pay off in your daily development. As your skills improve, these configurations will continue to be optimized and perfected.