文档教程【免费下载链接】vscode-docsPublic documentation for Visual Studio Code项目地址https://gitcode.com/gh_mirrors/vs/vscode-docs点击查看免费下载本篇指南以 Visual Studio Code下文简称 VS Code官方入门视频《Code editing》为骨架带你走完一条最典型的编码工作流打开文件夹 → 创建文件 → 借助 IntelliSense 编写代码 → 格式化与自动保存 → 在集成终端中运行程序。读完本文你将掌握 VS Code 编辑器的基础操作、常用快捷键、编辑器与终端的协作方式以及 Auto Save、Format Document 等核心设置的具体配置方法能够立即上手完成第一个可运行的 JavaScript 应用。视频内容概述官方入门视频《Code editing》覆盖了从项目打开到程序运行的完整闭环本节视频大纲对应的文档位于 docs/introvideos/codeediting.md。视频演示的主要步骤包括打开一个文件夹FileOpen Folder使用文件资源管理器File Explorer查看文件夹内的文件与子目录ViewExplorer安装 Node.js 运行时用于执行 JavaScript 代码在终端中运行node --version验证 Node.js 安装创建新文件FileNew File编写一个名为app.js的 Hello world 控制台应用体验 IntelliSense 的输入时智能提示使用Format Document命令自动格式化源码开启Auto Save自动保存显示集成终端ViewTerminal拆分终端Split Terminal创建新终端Create New Terminal在集成终端中运行node app.js下面按照这条主线逐一深入讲解并结合仓库文档补充可配置的参数与原理细节。第一步打开文件夹并浏览文件VS Code 以文件夹在官方术语中也称工作区 Workspace为组织单元工作。打开文件夹有两种常见方式菜单路径FileOpen Folder对应命令 IDworkbench.action.files.openFolder默认快捷键CtrlK后按CtrlO在欢迎页或命令面板CtrlShiftP中选择File: Open Folder打开文件夹后左侧的文件资源管理器File Explorer会列出该文件夹下的所有文件与子目录用于浏览和切换文件通过菜单ViewExplorer或快捷键CtrlShiftE聚焦资源管理器命令 IDworkbench.view.explorer在资源管理器中单击文件即可在编辑器标签页中打开在资源管理器中右键文件夹还可以使用Open in Integrated Terminal命令直接在指定文件夹位置打开集成终端详见 docs/terminal/basics.md 的说明。第二步安装并验证 Node.js视频中的示例应用是 JavaScript因此需要 Node.js 运行时。安装与验证步骤如下前往 Node.js 官方网站下载并安装适合你平台的安装包Windows / macOS / Linux 均有对应版本。打开系统终端或命令提示符输入以下命令验证安装node --version如果安装成功终端会输出类似v20.x.x的版本号。这一步确认了node命令已加入系统 PATH后续才可以在 VS Code 集成终端中直接运行 JavaScript 文件。提示VS Code 的集成终端默认以工作区根目录为工作目录启动因此安装好 Node.js 后在集成终端中执行的node命令与外部终端行为一致。关于终端工作目录的配置terminal.integrated.cwd可参考 docs/terminal/basics.md。第三步创建 Hello World 文件创建新文件的方式菜单FileNew File命令 IDworkbench.action.files.newUntitledFile默认快捷键CtrlN或使用命令面板中的File: New File输入文件名app.js并保存然后在编辑器中输入以下代码console.log(Hello world);完成输入后就可以体验 VS Code 编辑器提供的几项核心能力了。第四步IntelliSense 智能提示IntelliSense 是 VS Code 代码编辑体验的核心特性涵盖代码补全、参数信息、快速信息与成员列表等能力详见 docs/editing/intellisense.md。在输入console.时语言服务会自动弹出成员列表你也可以随时手动触发提示触发建议默认快捷键CtrlSpace命令 IDeditor.action.triggerSuggest接受建议默认Tab或Enter查看建议详情toggleSuggestionDetails命令用于展开方法的文档说明IntelliSense 的关键行为说明自动弹出时机由editor.quickSuggestions设置控制默认在普通代码区域开启、注释和字符串区域关闭触发字符如 JavaScript 中的点号.由editor.suggestOnTriggerCharacters控制默认开启。延迟控制editor.quickSuggestionsDelay设置建议弹窗的延迟毫秒数默认 10ms。Tab 补全editor.tabCompletion设置可开启 Tab 键补全取值off默认、on、onlySnippets。建议排序editor.suggestSelection控制预选行为取值first默认、recentlyUsed、recentlyUsedByPrefixeditor.suggest.localityBonus开启后优先显示靠近光标位置的符号。CamelCase 过滤建议列表支持驼峰过滤例如输入cra可以快速定位到createApplication。对于 JavaScript 项目若要获得第三方库的完整 IntelliSense方法、类型提示需要安装对应库的类型声明文件typings可参考 docs/languages/javascript.md 中的 IntelliSense 一节。第五步自动格式化源代码VS Code 内置了 JavaScript、TypeScript、JSON、HTML、CSS 等语言的默认格式化器。视频中演示的Format Document命令会格式化整个当前文件命令 IDeditor.action.formatDocument默认快捷键ShiftAltF菜单Command PaletteCtrlShiftP或编辑器右键菜单均可触发配套的Format Selection命令 IDeditor.action.formatSelection只格式化选中的文本除手动触发外格式化还可以绑定到用户动作默认全部关闭相关设置在 docs/editing/codebasics.md 中有详细说明{ editor.formatOnType: true, editor.formatOnSave: true, editor.formatOnPaste: true }editor.formatOnType输入一行后格式化该行editor.formatOnSave保存文件时格式化editor.formatOnPaste粘贴内容后格式化注意并非所有格式化器都支持按选区格式化因此 formatOnPaste 并非对所有语言都生效如果需要禁用某种语言的默认格式化器例如改用扩展提供的格式化器可以在设置中关闭html.format.enable: false第六步开启 Auto Save 自动保存VS Code 默认需要手动保存CtrlS命令 IDworkbench.action.files.save。开启Auto Save后文件会在设定延迟后或编辑器失焦时自动保存无需再手动按保存键。最快捷的开启方式是菜单FileAuto Save。如果需要对自动保存做更精细的控制在设置中搜索files.autoSave即可详见 docs/editing/codebasics.md 的 Save / Auto Save 一节off关闭自动保存默认afterDelay在配置的延迟后保存默认 1000msonFocusChange焦点离开该编辑器时保存onWindowChange焦点离开 VS Code 窗口时保存延迟由files.autoSaveDelay设置控制单位毫秒默认 1000。还可以按语言定制自动保存行为例如对 LaTeX 文件关闭自动保存[latex]: { files.autoSave: off }补充即使未开启 Auto SaveVS Code 也会通过Hot Exit机制在应用意外退出时备份未保存的更改下次启动可恢复。备份位置在 Windows 为%APPDATA%\Code\Backups、macOS 为$HOME/Library/Application Support/Code/Backups、Linux 为$HOME/.config/Code/Backups。第七步集成终端与多终端管理VS Code 内置了功能完整的集成终端可像独立终端一样执行mkdir、git、node等命令并额外提供链接检测、错误定位、任务集成等编辑器联动能力详见 docs/terminal/basics.md。打开/关闭终端面板菜单ViewTerminal或快捷键Ctrl命令 IDworkbench.action.terminal.toggleTerminal从资源管理器文件夹右键选择Open in Integrated Terminal可基于指定目录打开新终端拆分终端Split Terminal拆分终端可以并排显示多个终端形成一个终端组便于同时观察运行与编译输出命令 IDworkbench.action.terminal.split默认快捷键CtrlShift5也可以悬停终端标签页点击内联的拆分按钮或在终端标签页上右键选择Split终端组内的多个终端可以像编辑器一样排列布局拖拽标签页可调整顺序或将终端移动到其他组。新终端的工作目录取决于terminal.integrated.splitCwd设置Windows 上拆分终端默认继承父终端的起始目录macOS/Linux 上默认继承父终端的当前工作目录。创建新终端命令 IDworkbench.action.terminal.new默认快捷键 CtrlShift或点击终端面板右上角的图标也可以从终端配置文件下拉列表中选择特定 ShellPowerShell、Command Prompt、Git Bash、WSL 等运行应用在集成终端中直接输入并回车node app.js终端将输出Hello world。这是视频演示的完整运行闭环打开文件夹 → 创建文件 → 编写代码 → 运行。第八步推荐下一步学习资源视频结尾推荐了继续深入学习的资源对应仓库文档如下主题仓库文档内容生产力技巧视频docs/introvideos/productivity.md双 Shift 快捷键、多光标、多终端等提效技巧入门视频列表docs/getstarted/introvideos.md全部入门视频的索引基础编辑docs/editing/codebasics.md多光标、列选择、查找替换、代码折叠、缩进等完整编辑器能力代码导航docs/editing/editingevolved.md快速跳转文件、面包屑、转到定义、Peek 预览、重命名符号等Emmet 片段docs/languages/html.md 中 Emmet Snippets 一节HTML/CSS 的快速编码缩写任务Tasksdocs/debugtest/tasks.md在 VS Code 内调用外部工具的自动化任务JavaScript Lintersdocs/languages/javascript.md 中 Linters 一节为 JavaScript 安装代码检查工具代码折叠docs/editing/codebasics.md 中 Folding 一节基于缩进与语法标记的折叠策略提示与技巧docs/editing/getting-started/tips-and-tricks.md社区公认的高效使用技巧常见问题为什么我输入时没有弹出 IntelliSense 建议首先确认当前文件语言模式是否正确右下角状态栏可切换语言模式。如果语言模式无误尝试重启 VS Code——语言服务可能未正常启动。对于 JavaScript 项目缺少类型声明文件typings会导致方法、变量建议缺失需要安装对应的 npm 包。更详细的排查可参考 docs/editing/intellisense.md 的 Troubleshooting 一节。打开终端报错或无法启动怎么办集成终端启动问题有专门的排查指南docs/supporting/troubleshoot-terminal-launch.md。常见诱因包括 PATH 配置异常、Shell 环境变量冲突如 nvm 与 npm 的 prefix 选项冲突以及 GPU 渲染问题可通过terminal.integrated.gpuAcceleration设置为off关闭 GPU 加速来规避。如何在运行前验证 Node.js 是否可用在集成终端中执行node --version。若提示命令不存在说明 Node.js 未安装或未加入 PATH需要在系统层面修复后再重新打开终端VS Code 集成终端会加载登录 Shell 的初始化脚本修改 PATH 后建议重启终端或 VS Code。赞分享文档教程【免费下载链接】vscode-docsPublic documentation for Visual Studio Code项目地址https://gitcode.com/gh_mirrors/vs/vscode-docs点击查看免费下载相关推荐Visual Studio Code 新手入门指南从零开始掌握代码编辑器Visual Studio Code 新手入门指南从零开始掌握代码编辑器 Visual Studio Code简称 VS Code是一款轻量级但功能强大的文档教程Visual Studio Code 入门指南从零开始高效编程Visual Studio Code 入门指南从零开始高效编程 为什么选择 Visual Studio Code Visual Studio Code简称文档教程Visual Studio Code 扩展指南全景从 Hello World 到生产级扩展的 API 使用地图Visual Studio Code 扩展指南全景从 Hello World 到生产级扩展的 API 使用地图 本篇技术指南对应 Visual Studio文档教程上一篇Lottery 抽奖系统基于 XXL-JOB 扫描库表补偿发货单 MQ 消息的可靠性保障实践下一篇为什么用14万条人类动作训练SONICGR00T-WholeBodyControl训练数据筛选与过滤全解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考