ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

VS Code 编写 TypeScript 常用快捷键与配置指南

2026/10/1 10:04:28 拓冰建站 浏览量
VS Code 编写 TypeScript 常用快捷键与配置指南 1. 引言本文将系统梳理 VS Code 编写 TypeScript 时的高频快捷键与核心配置帮助你从「能写」进阶到「写得快、写得稳」。https://zhuanlan.zhihu.com/p/2020589087019544686https://blog.csdn.net/qq_35107975/article/details/1628938352. 高频快捷键速查2.1 编辑与导航快速定位当前文件CtrlShiftP—Reveal Active File in Explorer快捷键功能说明Alt ←回到上一光标ShiftAltF格式化CtrlP快速查找文件Ctrl Space触发智能提示补全Ctrl Shift Space参数提示F12跳转到定义Alt F12快速预览定义PeekShift F12查找所有引用Ctrl Shift O跳转到文件中的符号函数/类/接口Ctrl T全局搜索符号Ctrl P快速打开文件2.2 重构与代码操作快捷键功能说明Ctrl .快速修复 / 代码操作重命名、提取等F2重命名符号自动同步所有引用Ctrl Shift R重构菜单VS Code 1.75Alt Shift F格式化文档Ctrl K Ctrl F格式化选中代码2.3 多光标与选择快捷键功能说明Alt Click添加多个光标Ctrl Alt ↑/↓向上/向下添加光标Ctrl D选中下一个相同词Ctrl Shift L选中所有相同词Alt Shift 拖动列选择模式2.4 终端与调试快捷键功能说明Ctrl 打开/关闭集成终端Ctrl Shift 5拆分终端F5启动调试F9切换断点F10单步跳过F11单步进入3. 必备基础配置3.1 编辑器基础设置打开设置Ctrl ,在settings.json中加入以下推荐配置{editor.formatOnSave:true,editor.codeActionsOnSave:{source.fixAll.eslint:explicit,source.organizeImports:explicit},editor.suggestSelection:first,editor.tabSize:2,editor.detectIndentation:false,typescript.updateImportsOnFileMove.enabled:always,typescript.suggest.autoImports:true,typescript.preferences.quoteStyle:single,typescript.preferences.importModuleSpecifier:relative}3.2 配置说明editor.formatOnSave保存时自动格式化配合 Prettier 使用效果最佳。source.organizeImports保存时自动整理 import 顺序删除未使用的导入。typescript.updateImportsOnFileMove.enabled移动/重命名文件时自动更新相对路径引用。typescript.preferences.quoteStyle统一引号风格避免团队代码风格不一致。4. 推荐扩展插件4.1 必装扩展扩展名作用ESLintTS/JS 代码规范检查与自动修复Prettier - Code formatter统一代码格式化风格Error Lens行内实时显示错误与警告GitLens增强 Git 信息展示与操作4.2 提升效率扩展扩展名作用Path Intellisense文件路径自动补全npm Intellisenseimport 时自动补全 npm 包名TypeScript Hero增强 import 管理与组织Code Spell Checker拼写检查避免变量名拼写错误5. 调试配置5.1 创建 launch.json点击左侧「运行与调试」图标选择Node.js环境VS Code 会自动生成.vscode/launch.json{version:0.2.0,configurations:[{type:node,request:launch,name:调试当前 TS 文件,program:${file},preLaunchTask:tsc: build - tsconfig.json,outFiles:[${workspaceFolder}/dist/**/*.js]}]}5.2 tsconfig.json 推荐配置{compilerOptions:{target:ES2020,module:commonjs,strict:true,esModuleInterop:true,skipLibCheck:true,forceConsistentCasingInFileNames:true,outDir:./dist,rootDir:./src,sourceMap:true},include:[src/**/*],exclude:[node_modules,dist]}6. 实用技巧6.1 快速生成接口类型在对象字面量上按Ctrl .选择「从对象字面量推断类型」可快速生成对应的 interfaceconstuser{name:张三,age:25};// 选中 user 后按 Ctrl .选择提取类型interfaceUser{name:string;age:number;}6.2 自动导入输入符号名后按Ctrl SpaceVS Code 会自动提示从哪个模块导入回车即可自动添加 import 语句。6.3 快速修复常见错误当类型报错时光标悬停在红色波浪线上按Ctrl .可快速应用修复建议例如添加缺失的属性将类型改为any不推荐但应急可用生成缺失的函数实现7. 总结VS Code 对 TypeScript 的支持开箱即用配合合理的快捷键习惯与配置能显著提升编码效率。建议从以下三步开始优化先掌握F12、Ctrl .、F2三个核心快捷键。配置formatOnSave与organizeImports让保存即整洁。安装 ESLint Prettier统一团队代码风格。随着使用深入再逐步探索多光标、调试、重构等进阶能力让 VS Code 真正成为你的 TS 开发利器。