Essential VS Code Plugins for Frontend Development

Preface

Personal preference is to use an integrated platform like VS Code for various development tasks; the following sections introduce commonly used extensions.

Theme

Monokai Pro : provides both color themes and file themes, offers multiple color schemes selectable via ctrl+k+t .

Basic Plugins

HTML CSS Support : essential for HTML and CSS syntax highlighting and suggestions.

JavaScript (ES6) code snippets : adds useful JavaScript code snippets beyond the built‑in suggestions.

Vue Plugin Recommendations

Vue Language Features (Volar)

Essential for Vue projects, providing comprehensive syntax highlighting and intelligent code assistance.

Vue Peek

Enables quick navigation to Vue components, saving time in large projects.

Vue VSCode Snippets

Offers a collection of Vue code snippets to accelerate daily development.

React

React uses JSX/TSX which VS Code can recognize natively, so no extra highlighting plugin is required.

Simple React Snippets

Provides numerous React code snippets for rapid file creation.

Typescript React code snippets

Offers TypeScript‑based React snippets.

ES7+ React/Redux/React‑Native snippets

Another comprehensive React snippet extension.

Mini‑Program

Primarily uses Uniapp, so plugins focus on Uniapp support.

uni-helper

Installs a suite of Uniapp‑related extensions, delivering tags, code hints, and highlighting.

Code Formatting

Formatting relies on Prettier and Eslint .

Prettier – Code formatter

Formats code according to the project's prettier configuration; requires settings in settings.json such as:

"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
"[javascript|react]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
"[typescript|react]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
"[scss]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
"[css]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
"[vue]": {"editor.defaultFormatter": "Vue.volar"},
"prettier.configPath": ".prettierrc.js"

Eslint

Performs code linting, focusing on syntax style; works well together with Prettier.

Database

VS Code also offers database visualization plugins comparable to Navicat or DBeaver.

SQL Tools

Supports a wide range of databases, covering most daily development needs.

MongoDB for VS Code

Provides MongoDB support within VS Code.

Redis

Enables Redis interaction similar to SQL Tools.

Other Plugins

Better Comments

Highlights comments with different colors; customizable via settings.json . Example configuration:

"better-comments.tags": [
  {"tag": "!", "color": "#FF2D00", "strikethrough": false, "underline": false, "backgroundColor": "transparent", "bold": false, "italic": false},
  {"tag": "?", "color": "#3498DB", "strikethrough": false, "underline": false, "backgroundColor": "transparent", "bold": false, "italic": false},
  {"tag": "//", "color": "#474747", "strikethrough": true, "underline": false, "backgroundColor": "transparent", "bold": false, "italic": false},
  {"tag": "todo", "color": "#FF8C00", "strikethrough": false, "underline": false, "backgroundColor": "transparent", "bold": false, "italic": false},
  {"tag": "*", "color": "#98C379", "strikethrough": false, "underline": false, "backgroundColor": "transparent", "bold": false, "italic": false}
]

Turbo Console Log

Creates customizable console.log statements via a shortcut.

Console Ninja

Outputs console.log results directly inside VS Code, improving efficiency.

Path Intellisense

Auto‑completes file paths, useful for deep project structures.

Git Tools

Git Graph

GitLens — Git supercharged

Project Manager

Allows saving and quickly reopening projects.

Vite

Provides local server, fast project startup, and built‑in browser preview; replaces Live Server.

vscode-mindmap

Creates quick flowcharts or mind maps via .km or .xmid files.

VSCode Animations

Enhances VS Code UI with smooth animations.

Bookmarks

Marks locations across multiple files for easy navigation.

Configuration Files

{
  "workbench.layoutControl.enabled": false,
  "window.commandCenter": false,
  "window.menuBarVisibility": "compact",
  "security.workspace.trust.untrustedFiles": "open",
  "editor.scrollbar.scrollByPage": true,
  "editor.smoothScrolling": true,
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": true,
  "git.confirmSync": false,
  "editor.fontVariations": false,
  "workbench.startupEditor": "none",
  "editor.acceptSuggestionOnCommitCharacter": false,
  "editor.fontSize": 16,
  "search.followSymlinks": false,
  "search.useIgnoreFiles": false,
  "typescript.tsserver.maxTsServerMemory": 12288,
  "git.autorefresh": false,
  "editor.fontWeight": "bold",
  "editor.codeLensFontFamily": "'Monaspace Radon'",
  "editor.fontFamily": "'Monaspace Radon'",
  "debug.console.fontFamily": "FiraCode Nerd Font",
  "editor.fontLigatures": true,
  "explorer.compactFolders": false,
  "typescript.format.enable": false,
  "editor.formatOnSave": true,
  "extensions.ignoreRecommendations": true,
  "files.autoSave": "afterDelay",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "emmet.includeLanguages": {"javascript": "javascriptreact"},
  "emmet.triggerExpansionOnTab": true,
  "editor.cursorBlinking": "smooth",
  "editor.cursorStyle": "block",
  "editor.cursorSmoothCaretAnimation": "on",
  "workbench.list.smoothScrolling": true,
  "diffEditor.ignoreTrimWhitespace": false,
  "editor.codeActionsOnSave": {"source.fixAll.eslint": "explicit"},
  "eslint.validate": ["javascript","javascriptreact","vue"],
  "files.eol": "\n",
  "eslint.format.enable": true,
  "editor.linkedEditing": true,
  "typescript.disableAutomaticTypeAcquisition": true,
  "files.associations": {"*.json": "jsonc"},
  "window.zoomLevel": -1,
  "px-to-rpx.autoRemovePrefixZero": true,
  "px-to-rpx.baseWidth": 375,
  "px-to-rpx.fixedDigits": 2,
  "javascript.updateImportsOnFileMove.enabled": "never",
  "[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
  "[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
  "[javascript|react]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
  "[typescript|react]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
  "[scss]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
  "[css]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
  "[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
  "[vue]": {"editor.defaultFormatter": "Vue.volar"},
  "prettier.configPath": ".prettierrc.js",
  "update.mode": "default",
  "workbench.tree.enableStickyScroll": true,
  "turboConsoleLog.logMessagePrefix": "👉",
  "terminal.integrated.smoothScrolling": true,
  "[javascriptreact]": {"editor.defaultFormatter": "vscode.typescript-language-features"},
  "editor.inlayHints.fontFamily": "'Monaspace Radon'",
  "animations.Install-Method": "Apc Customize UI++",
  "vite.autoStart": false,
  "apc.imports": ["file:///c:/Users/cathe/.vscode/extensions/brandonkirbyson.vscode-animations-2.0.1/dist/updateHandler.js"],
  "animations.Enabled": true,
  "workbench.iconTheme": "Monokai Pro (Filter Machine) Icons",
  "workbench.colorTheme": "Monokai Pro (Filter Machine)",
  "window.zoomLevel": -1,
  "console-ninja.featureSet": "Community"
}