先检查界面和语言设置,确保VS Code显示正常;接着安装ESLint、Prettier、GitLens和括号高亮扩展;然后配置settings.json启用自动格式化、2空格缩进和自动保存;最后通过打开文件夹方式创建项目,避免直接编辑单文件。
第一次打开 vs code,别急着写代码,先花5分钟做几件关键小事,能让你后续开发顺畅很多。
启动后第一件事:检查界面是否“干净”
VS Code 默认是极简界面,没有多余按钮和侧边栏干扰。如果看到一堆图标、弹窗或中文乱码,可能是系统字体或区域设置不匹配。可以按 Ctrl + ,(Windows/Linux)或 Cmd + ,(Mac)快速打开设置,搜索 locale,确认 "locale": "zh-cn" 或 "en-us" 符合你的语言习惯;再搜 font,把 "editor.fontFamily" 设为 "Fira Code", "Consolas", "monospace" 这类等宽字体,对齐和连字更友好。
装对扩展,比学快捷键还重要
刚起步不用贪多,只装这4个基础扩展:
- ESLint:实时检查 JavaScript/TypeScript 语法错误,避免低级 bug
- Prettier:保存时自动格式化代码,缩进、空格、换行全统一
- GitLens:在代码行边显示谁改了哪一行、什么时候改的,协作时超实用
-
Bracket Pair Colorizer(或新版内置的 Highlight Matching Tag):括号/标签配对高亮,少丢一个
}就省半小时调试
初始化你的用户设置(settings.json)
点开设置界面右上角的“打开设置(JSON)”图标({}),粘贴这几行常用配置,不用记,复制就行:
{
"editor.tabSize": 2,
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"files.autoSave": "onFocusChange",
"terminal.integrated.defaultProfile.windows": "PowerShell"
}
这些设置意味着:用 2 空格缩进、保存/粘贴时自动格式化、切出编辑器就自动保存、终端默认启动 PowerShell(Windows 用户更稳)。
创建第一个文件夹项目,别直接开单文件
点击菜单栏 File → Open Folder,新建一个空文件夹(比如 my-first-app),再右键 → New File 创建 index.js。这样 VS Code 才能识别为项目,ESLint、Prettier、Git 等功能才能正常工作。如果只是双击打开一个 .js 文件,很多智能提示和检查会失效。
基本上就这些。不复杂但容易忽略,做完这四步,你已经比很多半途放弃的新手走得更稳了。










