Visual Studio Code Setup Guide: Installation and Essential Plugins
Tech
1
Downloading Visual Studio Code
- Navigate to the official VS Code download page: https://code.visualstudio.com/
- Locate and select the Download button in the top-right section of the interface
- Pick the installer package that aligns with your operating system architecture
Installation Walkthrough
- Launch the downloaded VS Code instlaler executable
- Review and accept the end-user license agreement, then proceed with Next
- Modify the default installation directory if preferred (avoiding system drive restrictions is often recommended), then click Next
- Keep the default start menu folder configuration and select Next
- Enable all optional tasks except for "Create a desktop shortcut" (toggle this based on personal workflow preference), then proceed
- Confirm your setup choices and initiate installation with the Install button
- Wait for the installation process to complete
- Once finished, toggle whether to immediately launch VS Code and click Finish
- On first launch, you can optionally customize basic preferences like theme
Must-Have VS Code Extensions
Simplified Chinese Localization
- Search ID/Name:
ms-ceintl.vscode-language-pack-zh-hans- Access the Extensions panel via the sidebar icon or keyboard shortcut Ctrl+Shift+X (Cmd+Shift+X on macOS)
- Paste the ID/name into the search field
- Install the top matching result
- After installation completes, select "Change Language and Restart" when prompted to apply the localization
Code Spell Checker
- Search ID/Name:
streetsidesoftware.code-spell-checker- Follow the same installation workflow as the language pack
- This extension highlights spelling errors in comments, strings, and variable names
Web Development Tooling
- HTML/CSS Support:
ecmel.vscode-html-css– Enhances intellisense and syntax highlighting for CSS selectors in HTML files - ES6+ JavaScript Snippets:
xabikos.JavaScriptSnippets– Provides quick keyboard shortcuts for writting modern ES6/ES7+ JavaScript code - Emmet Integration Helper:
fabiospampinato.vscode-mithril-emmet– Improves Emmet compatibility for Mithril.js and similar component frameworks - Path Autocompletion:
christian-kohler.path-intellisense– Automatically completes file and folder paths when importing or linking - Vue 3 Code Snippets:
hollowtree.vue-snippets– Offers a comprehensive set of pre-built snippets for Vue 3 composition and options API - Vue Development Helper:
shenjiaolong.vuehelper– Adds Vue-specific navigation and code suggestions - Auto-Close HTML/XML Tags:
formulahendry.auto-close-tag– Automatically generates matching closing tags when you finish an opening tag - Auto-Rename Paired Tags:
formulahendry.auto-rename-tag– Synchronizes renaming of opening and closing HTML/XML tags - Code Formatter:
HookyQR.beautify– Formats JavaScript, JSON, CSS, and HTML with customizable rules - Bracket Pair Visualizer:
CoenraadS.bracket-pair-colorizer– Colors matching opening/closing brackets to improve code readability - Open in Browser:
techer.open-in-browser– Adds a right-click option to open HTML files directly in your default or selected browser - Vue.js Language Server:
octref.vetur– Provides syntax highlighting, linting, formatting, and debugging support for Vue 2 projects - IntelliJ IDEA Keybindings:
k--kato.intellij-idea-keybindings– Maps VS Code shortcuts to match IntelliJ IDEA for developers transitioning between editors
