Essential Plugin Installation: Equipping VS Code with Powerful Development Tools

The Importance of Plugins

VS Code's power is largely due to its rich ecosystem of extensions. Plugins not only enhance the editor's functionality but also significantly improve development efficiency, improve code quality, and even change the development experience. For frontend developers, choosing the right combination of plugins is crucial.

Value of Plugins

Functionality Extension: Although VS Code's core functionality is powerful, specific features like language support, debugging tools, and version control can be added through plugins.

Efficiency Improvement: Many plugins provide features like code snippets, auto-completion, and refactoring tools, which can significantly reduce repetitive work.

Code Quality: Plugins for code checking, formatting, and testing help maintain code quality and reduce bugs.

Development Experience: Beautification plugins for themes, icons, and fonts make the development environment more comfortable and personalized.

Installing and Managing Plugins

Plugin Installation Methods

Extension Marketplace Installation:

1. Click the Extensions icon in the sidebar, or use the shortcut Ctrl+Shift+X.
2. Enter the plugin name in the search box.
3. Click the "Install" button.

Command Line Installation:

# Install plugin using command line
code --install-extension ms-vscode.cpptools
code --install-extension ms-python.python

# Batch install (from file)
code --install-extension extension-list.txt

Manual Installation:

1. Download the .vsix file from the VS Code Marketplace or GitHub.
2. Install via command line: code --install-extension path/to/extension.vsix.

Plugin Management Tips

// Recommended plugin list (can be configured in settings)
{
  "recommendations": [
    "ms-vscode.vscode-typescript-next",
    "bradlc.vscode-tailwindcss",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "ms-vscode.vscode-json"
  ]
}

Enable/Disable Plugins:

• Right-click plugin -> Disable/Enable.
• Manage installed plugins on the Extensions page.

Plugin Updates:

• Auto-update: Enable auto-update in settings.
• Manual update: Click the update button on the Extensions page.

Code Editing Enhancement Plugins

Prettier - Code formatter

Plugin Name: esbenp.prettier-vscode

Function: Code formatting tool supporting multiple languages to keep code style consistent.

Installation Configuration:

// settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.configPath": ".prettierrc",
  "prettier.ignorePath": ".prettierignore",
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.tabWidth": 2,
  "prettier.trailingComma": "es5"
}

Configuration File: .prettierrc

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

ESLint

Plugin Name: dbaeumer.vscode-eslint

Function: JavaScript/TypeScript code quality checking tool.

Configuration Example:

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended',
    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint', 'react'],
  rules: {
    'no-unused-vars': 'warn',
    'no-console': 'warn',
    '@typescript-eslint/no-explicit-any': 'warn',
  },
};

VS Code Integration:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ]
}

Auto Rename Tag

Plugin Name: formulahendry.auto-rename-tag

Function: Automatically rename paired HTML/XML tags. When you modify the start tag, the end tag is updated synchronously.

Usage Effect:

<!-- Before modification -->
<div class="container">
  <h1>Hello World</h1>
</div>

<!-- After changing div to section, automatically updated -->
<section class="container">
  <h1>Hello World</h1>
</section>

Bracket Pair Colorizer 2

Plugin Name: CoenraadS.bracket-pair-colorizer-2

Function: Add colors to paired brackets to easily identify code blocks.

Configuration Example:

{
  "bracket-pair-colorizer-2.colors": ["Gold", "Orchid", "LightSkyBlue"],
  "bracket-pair-colorizer-2.showHorizontalScopeLine": true,
  "bracket-pair-colorizer-2.showVerticalScopeLine": true
}

Auto Close Tag

Plugin Name: formulahendry.auto-close-tag

Function: Automatically add closing tags.

Supported Formats:

<!-- Input <div | Automatically generated -->
<div></div>

<!-- Vue Component -->
<my-component></my-component>

<!-- React Component -->
<MyComponent />

Framework and Language Support

Vue Language Features (Volar)

Plugin Name: Vue.volar

Function: Vue 3 + TypeScript language support, providing intelligent suggestions, type checking, refactoring, and other features.

Features:

• Vue 3 Composition API support
• TypeScript type checking
• Template syntax highlighting
• Component auto-import
• Refactoring support

Disable Vetur: You need to disable the Vetur plugin after installing Volar to avoid conflicts.

TypeScript Importer

Plugin Name: pmneo.tsimporter

Function: Automatically import TypeScript modules.

Usage Example:

// Input Date, auto prompt import
const today = Date; // Automatically add import { Date } from 'typescript';

// React Component Usage
import React from "react";
function App() {
  return <div>Hello</div>; // React auto import
}

CSS Modules

Plugin Name: clinyong.vscode-css-modules

Function: CSS Modules intelligent suggestions.

Usage Effect:

// styles.module.css
.container {
  display: flex;
  padding: 20px;
}

// component.tsx
import styles from './styles.module.css';

const className = styles.; // Auto prompt container

Tailwind CSS IntelliSense

Plugin Name: bradlc.vscode-tailwindcss

Function: Tailwind CSS intelligent suggestions and code completion.

Configuration File: tailwind.config.js

module.exports = {
  content: ["./src/**/*.{html,js,ts,jsx,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Intelligent Suggestions:

<!-- Input cl- auto prompt all padding classes -->
<div class="p-4 m-2 bg-blue-500 text-white">Content</div>

Path Intellisense

Plugin Name: christian-kohler.path-intellisense

Function: File path auto-completion.

Supported Scenarios:

import Component from "./components/"; // Auto prompt files
import styles from "../styles/modules/"; // Path intelligent recognition
const image = require("@/assets/images/"); // Absolute path support

Theme and Beautification Plugins

Material Icon Theme

Plugin Name: PKief.material-icon-theme

Function: Add Material Design style file icons to VS Code.

Configuration Example:

{
  "workbench.iconTheme": "material-icon-theme",
  "material-icon-theme.activeIconPack": "react_redux",
  "material-icon-theme.folders.associations": {
    "components": "component",
    "utils": "utils",
    "hooks": "hooks"
  },
  "material-icon-theme.files.associations": {
    "*.config.js": "tune",
    ".env": "gear"
  }
}

One Dark Pro

Plugin Name: zhuangtongfa.material-theme

Function: Classic port of Atom One Dark theme, supporting multiple color variants.

Theme Variants:

• One Dark Pro
• One Dark Pro Darker
• One Dark Pro Bold
• One Monokai

GitHub Plus Theme

Plugin Name: akamud.vscode-theme-onedark

Function: GitHub style theme, providing multiple color schemes.

Font Switcher

Plugin Name: nicollas.font-switcher

Function: Quickly switch editor fonts.

Recommended Fonts:

{
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6
}

Efficiency Improvement Plugins

GitLens

Plugin Name: eamodio.gitlens

Function: Enhance VS Code's Git capabilities, providing code history, author information, change comparison, etc.

Core Features:

• Inline Git information display
• Code history records
• Author information and commit time
• Branch management and comparison

Configuration Example:

{
  "gitlens.currentLine.enabled": true,
  "gitlens.hovers.currentLine.over": "line",
  "gitlens.hovers.currentLine.enabled": true,
  "gitlins.currentLine.dateFormat": "YYYY-MM-DD HH:mm:ss",
  "gitlens.views.repositories.files.layout": "tree"
}

Live Server

Plugin Name: ritwickdey.LiveServer

Function: Launch a local development server supporting hot reload.

Usage:

1. Right-click HTML file -> "Open with Live Server"
2. Click the "Go Live" button in the status bar
3. Use shortcut Ctrl+Shift+P enter "Live Server: Start"

Configuration Example:

{
  "liveServer.settings.port": 5500,
  "liveServer.settings.root": "/",
  "liveServer.settings.wait": 1000,
  "liveServer.settings.host": "127.0.0.1",
  "liveServer.settings.fullReload": false,
  "liveServer.settings.file": "index.html"
}

Code Runner

Plugin Name: formulahendry.code-runner

Function: Quickly run code snippets, supporting multiple languages.

Supported Languages:

// JavaScript
const message = "Hello, World!";
console.log(message);

// TypeScript
interface User {
  name: string;
  age: number;
}

const user = { name: "Alice", age: 30 };
console.log(user);

Project Manager

Plugin Name: alefragnani.project-manager

Function: Project manager, quickly switch between different projects.

Project Configuration:

{
  "project-manager.git.baseFolders": ["/path/to/your/projects"],
  "project-manager.projectsList": [
    {
      "name": "My React App",
      "rootPath": "/path/to/react-app",
      "settings": {
        "terminal.integrated.cwd": "/path/to/react-app"
      }
    }
  ]
}

Code Quality and Testing

Jest

Plugin Name: Orta.vscode-jest

Function: Jest testing framework integration, providing test running, debugging, coverage, and other features.

Configuration Example:

{
  "jest.autoEnable": true,
  "jest.pathToConfig": "./jest.config.js",
  "jest.pathToJest": "./node_modules/.bin/jest",
  "jest.enableCodeLens": true,
  "jest.showCoverageOnLoad": true
}

Test Example:

// sum.test.js
const sum = require("./sum");

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);
});

test("throws error when input is not number", () => {
  expect(() => sum("a", "b")).toThrow();
});

SonarLint

Plugin Name: SonarSource.sonarlint-vscode

Function: Code quality analysis, detecting bugs, code smells, and security vulnerabilities in code.

Supported Check Types:

• Possible bugs
• Code duplication
• High complexity
• Security vulnerabilities

Error Lens

Plugin Name: usernamehw.errorlens

Function: Display error and warning messages directly inline in the code.

Display Effect:

const message = "Hello"; // [eslint] Missing semicolon
console.log(message); // [warning] Prefer template literal

Database and Other Tools

SQLite

Plugin Name: alexcvzz.vscode-sqlite

Function: SQLite database management, supporting queries, browsing table structures, etc.

REST Client

Plugin Name: humao.rest-client

Function: Send HTTP requests directly in VS Code to test APIs.

Request Example:

### GET Request Example
GET https://api.example.com/users/1
Accept: application/json

### POST Request Example
POST https://api.example.com/users
Content-Type: application/json

{
  "name": "John Doe",
  "email": "[email protected]"
}

### PUT Request Example
PUT https://api.example.com/users/1
Content-Type: application/json

{
  "name": "Jane Doe",
  "email": "[email protected]"
}

Docker

Plugin Name: ms-azuretools.vscode-docker

Function: Docker container management, supporting building, running, and debugging containers.

Dockerfile Example:

FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

Plugin Configuration Best Practices

Plugin Group Management

Development Environment Configuration:

// .vscode/extensions.json
{
  "recommendations": [
    // Core Editing
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",

    // Frontend Frameworks
    "Vue.volar",
    "bradlc.vscode-tailwindcss",

    // Development Efficiency
    "eamodio.gitlens",
    "ms-vscode.vscode-json",
    "christian-kohler.path-intellisense",

    // Theme Beautification
    "PKief.material-icon-theme",
    "zhuangtongfa.material-theme"
  ]
}

Team Synchronization Configuration:

// settings.json
{
  "extensions.autoUpdate": false,
  "extensions.ignoreRecommendations": false,
  "extensions.showRecommendationsOnlyOnDemand": false
}

Performance Optimization

Plugin Management Suggestions:

• Install only necessary plugins to avoid affecting performance.
• Regularly clean up unused plugins.
• Consider disabling some heavyweight plugins in large projects.
• Use workspace settings to manage project-specific plugins.

Memory Optimization:

{
  "typescript.tsserver.maxTsServerMemory": 4096,
  "typescript.tsserver.experimental.enableProjectDiagnostics": false,
  "typescript.disableAutomaticTypeAcquisition": true
}

Summary

The richness of the VS Code plugin ecosystem is a key reason why it has become the preferred tool for frontend development. Reasonable selection and configuration of plugins can significantly improve development efficiency, improve code quality, and optimize the development experience.

Key Points Review:

• Plugins are the core embodiment of VS Code's powerful functionality.
• Code editing enhancement plugins provide formatting, checking, renaming, and other functions.
• Framework language support plugins ensure intelligent suggestions for modern frontend development.
• Theme beautification plugins make the development environment more comfortable.
• Efficiency improvement plugins reduce repetitive work and increase development speed.
• Code quality testing plugins help maintain code quality.
• Manage plugins reasonably to avoid affecting performance.

The choice of plugins should be based on personal development habits and project needs. Do not blindly install all recommended plugins, but choose the most suitable combination according to the actual situation. A good plugin configuration should make your development more efficient, not a burden.