VSCode 5 招让 0 基础上手:安装必勾 3 项 + 必改 5 设置 + 5 件套插件 + launch.json 4 套模板 + 远程开发三件套。附 launch_chrome/node/python/vue 4 套实战配置,直接复制到 .vscode/launch.json 即可调试。覆盖快捷键速查 + 调试比 console.log 快 10 倍 + 插件不超 8 个的避坑点。
VSCode 5 招让 0 基础上手（1.129.1 实测版）
记事本 / Notepad++ 编辑代码够用，但想做正经项目？VSCode（Visual Studio Code）是微软出品的开源代码编辑器，全球开发者使用率第一。免费、跨平台（Windows / macOS / Linux）、插件生态丰富。0 基础从记事本水平 5 招玩到生产力工具，关键是学会挑版本、配必装插件、用调试替代 console.log。
| ① 安装三勾 | PATH / 文件类型 / 右键菜单 |
| ② 必改 5 设置 | FontSize 14 / TabSize 2 / WordWrap on / AutoSave delay / Dark 主题 |
| ③ 5 件套插件 | 中文 / ESLint / Prettier / LiveServer / GitLens |
| ④ launch.json 4 套 | chrome / node / python / vue(本 zip 配套) |
| ⑤ 远程三件套 | Remote-SSH / Remote-Containers / Remote-WSL |
为什么这件事值得做
全球第一：开发者使用率第一，遇到问题 Google 必有答案
免费开源：个人 / 公司随便用，不花钱不担心版权
插件生态：扩展市场 4 万+ 插件，从前端到 AI 编程全覆盖
调试神器：内置调试器支持 Node / Python / 前端 JS，比 console.log 调试快 10 倍
5 个挑选 / 避坑思路
⚠ 实战场景: 写到一半突然忘了快捷键 → Ctrl+Shift+P 命令面板输入「Format Document」一键格式化;Ctrl+Shift+F 全局搜任何字符串;F12 跳转到定义;Shift+Alt+F 自动整理代码(本 zip 第 7 章快捷键速查全收录)
// VSCode 5 招核心配置示例(settings.json)
/* 招 ② 必改 5 设置 */
{
"editor.fontSize": 14,
"editor.tabSize": 2,
"editor.wordWrap": "on",
"files.autoSave": "afterDelay",
"workbench.colorTheme": "Solarized Dark"
}
/* 招 ④ launch.json 模板 — 4 选 1(本 zip 全提供) */
// launch_node.json
{
"version": "0.2.0",
"configurations": [
{"type": "node", "request": "launch", "name": "Node", "program": "${file}"}
]
}
// launch_chrome.json
{
"version": "0.2.0",
"configurations": [
{"type": "chrome", "request": "launch", "name": "Chrome", "url": "http://localhost:3000"}
]
}第 1 招：版本要选 User Installer：VSCodeSetup-x64.exe 1.129.1（205.8MB）是 User Installer（用户级安装）。不要下 .zip 便携版——便携版更新麻烦、插件设置不持久。装时勾选"添加到 PATH"+"添加到右键菜单"
第 2 招：必改 5 设置：Ctrl + , 打开设置：
- Editor: Font Size = 14
- Editor: Tab Size = 2
- Editor: Word Wrap = on（自动换行）
- Files: Auto Save = afterDelay（自动保存）
- Workbench: Color Theme = Dark+ 或 Solarized Dark
这 5 项不配，VSCode 用起来跟记事本差不多
第 3 招：插件 5 件套起步：
- Chinese (Simplified) Language Pack 中文界面
- ESLint / Prettier JS / TS 代码检查 + 格式化
- Live Server HTML 改一行浏览器自动刷新
- GitLens Git 改动高亮（每行代码谁改的何时改的）
- Path Intellisense 文件路径自动补全
不要装 30 个——5-8 个起步，加一个用顺手再加
第 4 招：Ctrl + Shift + P 是灵魂：命令面板能调出所有功能。常用快捷键：
- Ctrl + P：按文件名搜索
- Ctrl + Shift + F：全局搜索
- F12：跳转到定义
- Alt + F12：查看定义预览
- Shift + Alt + F：格式化代码
学会用命令面板 = 学会 50% VSCode 功能
第 5 招：远程开发 + 容器：安装 Remote - SSH / Remote - Containers / Remote - WSL 三个扩展：
- 服务器运维：连远程服务器，本地编辑体验
- Docker 项目：容器里开发，团队环境一致
- Windows + Linux 双修：WSL 子系统跑 Linux 工具链
适合场景：服务器运维、Docker 项目、跨平台开发
5 个避坑点(踩过就懂)
插件不要一次装 30+ — 启动慢、内存爆;5-8 个起步,需要再加
大项目用工作区(File → Open Folder)而不是单文件,否则 launch.json 路径不对
设置同步:左下角 Accounts → Turn on Settings Sync,换电脑不用重配
升级 VSCode 后个别插件不兼容,看插件市场更新日志,别硬扛
调试比 console.log 快 10 倍 — 学会用 launch.json 设置断点,本 zip 4 套模板直接用
下载包里有什么(7 件套,跟 zip 一一对得上)
| 文件 | 大小 | 用途 |
|---|---|---|
VSCodeSetup-x64.exe | 205MB | VSCode 官方安装包,勾"添加到 PATH"后命令行 code 即可用 |
VSCode_速查手册.pdf | 155KB | 速查手册,8 节覆盖快捷键 + 插件 + 调试 + 远程开发 |
launch_chrome.json | 329B | Chrome 调试模板,前端 JS 必备,复制到 .vscode/launch.json |
launch_node.json | 501B | Node.js 调试模板,后端 Express/Koa 项目直接用 |
launch_python.json | 447B | Python 调试模板,装 Python 扩展后即可 F5 调试 |
launch_vue.json | 381B | Vue 项目调试模板,配 Vite/Webpack dev server |
readme.txt | 2.9KB | 5 招实战指南,从安装 → 设置 → 插件 → 调试 → 远程全流程 |
为什么必须下载:launch_*.json 4 套模板是网上搜不到的,踩坑后总结;VSCodeSetup 装好后勾选项不勾对 = 装个寂寞;readme 比官网更精简,5 步就能上手。
一句话总结：安装包 = 完整 VSCode；PDF = 5 招速查；readme = 5 招实战配置；4 个 launch.json = Node / Python / Chrome / Vue 调试导入即用。光看文章懂思路不会配，光有安装包不会用，7 件套必须一起下。
