Microsoft Visual Studio Code 中文手册:https://code.visualstudio.com/docs
官方快捷键大全:https://code.visualstudio.com/docs/customization/keybindings
第一次使用 VS Code 时你应该知道的一切配置:https://zhuanlan.zhihu.com/p/62913725
VS code 提示 "任务仅可在工作区文件夹上可用":https://blog.csdn.net/a123gsfd/article/details/77337707
VS Code 超详细 Python 配置:https://blog.csdn.net/lemonbit/article/details/118077612
VS Code 的介绍
VS Code 的全称是 Visual Studio Code,是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面,都做得很不错。
微软有两种软件:一种是 VS Code,一种是其他软件。
IDE 与 编辑器的对比
IDE 和编辑器是有区别的:
- IDE(Integrated Development Environment,集成开发环境):对代码有较好的智能提示和相互跳转,同时侧重于工程项目,对项目的开发、调试工作有较好的图像化界面的支持,因此比较笨重。比如 Eclipse 的定位就是 IDE。
- 编辑器:要相对轻量许多,侧重于文本的编辑。比如 Sublime Text 的定位就是编辑器。再比如 Windows 系统自带的「记事本」就是最简单的编辑器。
需要注意的是,VS Code 的定位是编辑器,而非 IDE ,但 VS Code 又比一般的编辑器的功能要丰富许多。可以这样理解:VS Code 的体量是介于编辑器和 IDE 之间。
VS Code 的特点
- VS Code 的使命,是让开发者在编辑器里拥有 IDE 那样的开发体验,比如代码的智能提示、语法检查、图形化的调试工具、插件扩展、版本管理等。
- 跨平台支持 MacOS、Windows 和 Linux 等多个平台。
- VS Code 的源代码以 MIT 协议开源。
- 支持第三方插件,功能强大,生态系统完善。
- VS Code 自带了 JavaScript、TypeScript 和 Node.js 的支持。也就是说,你在书写 JS 和 TS 时,是自带智能提示的。当然,其他的语言,你可以安装相应的扩展包插件,也会有智能提示。
安装完后默认是英文,在插件仓库里面搜索 Chinese (Simplified) 安装,重启ide即可汉化
让 Vscode 自动识别文件编码的方法如下:
- 打开文件 ---> 首选项 ---> 设置 ---> 输入Auto Guess Encoding ---> 然后在方框中打上勾号。
快捷键
Visual Studio Code 常用快捷键:https://lzw.me/a/vscode-visual-studio-code-shortcut.html
VS Code 快捷键(中英文对照版):https://segmentfault.com/a/1190000007688656
如果看不清可以到官网去查阅:https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
Visual Studio Code 的快捷键设置是统一管理的,所以你只需要修改一个文件就可以了。Visual Studio Code 有两个比较重要的文件,
- 一个是 setting.json (基本设置)。【文件】-【首选项】-【设置】
- 另一个是 keybindings.json(配置快捷键文件)。【文件】-【首选项】-【键盘快捷方式】。
按 F1 ---> 上下键 选择 "键盘快捷方式参考",就可以打开网页看到下图:
主命令框
F1 或者 Ctrl + Shift + P:打开命令面板。在打开的输入框内,可以输入任何命令,例如:
- 按一下 Backspace 会进入到 Ctrl+P 模式
- 在 Ctrl+P 下输入 > 可以进入 Ctrl+Shift+P 模式
在 Ctrl+P 窗口下还可以:
- 直接输入文件名,跳转到文件
- ? 列出当前可执行的动作
- ! 显示 Errors或 Warnings,也可以 Ctrl+Shift+M
- : 跳转到行数,也可以 Ctrl+G 直接进入
- @ 跳转到 symbol(搜索变量或者函数),也可以 Ctrl+Shift+O 直接进入
- @ 根据分类跳转 symbol,查找属性或函数,也可以 Ctrl+Shift+O 后输入:进入
- # 根据名字查找 symbol,也可以 Ctrl+T
Ctrl + Shift + P,F1 | 显示命令面板 Show Command Palette |
Ctrl + P | 快速打开 Quick Open |
Ctrl + , | 用户设置 User Settings |
Ctrl + K Ctrl + S | 设置键盘快捷方式 Keyboard Shortcuts |
常用快捷键
同时打开多个窗口(查看多个项目)
- 打开一个新窗口:
Ctrl+Shift+N
- 关闭窗口:
Ctrl+Shift+W
同时打开多个编辑器(查看多个文件)
- 新建文件 Ctrl+N
- 历史打开文件之间切换 Ctrl+Tab,Alt+Left,Alt+Right
- 切出一个新的编辑器(最多3个)Ctrl+\,也可以按住 Ctrl 鼠标点击 Explorer 里的文件名
- 左中右3个编辑器的快捷键 Ctrl+1 Ctrl+2 Ctrl+3
- 3个编辑器之间循环切换 Ctrl+`
- 编辑器换位置,Ctrl+k 然后按 Left 或 Right
格式调整
- 代码行缩进 Ctrl+[ 、 Ctrl+]
- Ctrl+C 、 Ctrl+V 复制或剪切当前行/当前选中内容
- 代码格式化: Shift+Alt+F,或 Ctrl+Shift+P 后输入 format code
- 上下移动一行: Alt+Up 或 Alt+Down
- 向上向下复制一行: Shift+Alt+Up 或 Shift+Alt+Down
- 在当前行下边插入一行 Ctrl+Enter
- 在当前行上方插入一行 Ctrl+Shift+Enter
光标相关
- 移动到行首: Home
- 移动到行尾: End
- 移动到文件结尾: Ctrl+End
- 移动到文件开头: Ctrl+Home
- 移动到定义处: F12
- 定义处的缩略图:只看一眼而不跳转过去 Alt+F12
- 移动到后半个括号: Ctrl+Shift+]
- 选择从光标到行尾: Shift+End
- 选择从行首到光标处: Shift+Home
- 删除光标右侧的所有字: Ctrl+Delete
- 扩展/缩小选取范围: Shift+Alt+Left 和 Shift+Alt+Right
- 多行编辑(列编辑):Alt+Shift+鼠标左键,Ctrl+Alt+Down/Up
- 同时选中所有匹配: Ctrl+Shift+L
- Ctrl+D 下一个匹配的也被选中 (在 sublime 中是删除当前行,后面自定义快键键中,设置与 Ctrl+Shift+K 互换了)
- 回退上一个光标操作: Ctrl+U
重构代码
- 跳转到定义处:F12
- 定义处缩略图:只看一眼而不跳转过去Alt+F12
- 列出所有的引用:Shift+F12
- 同时修改本文件中所有匹配的:Ctrl+F12
- 重命名:比如要修改一个方法名,可以选中后按F2,输入新的名字,回车,会发现所有的文件都修改过了。
- 跳转到下一个Error或Warning:当有多个错误时可以按F8逐个跳转
- 查看 diff: 在explorer里选择文件右键 Set file to compare,然后需要对比的文件上右键选择Compare with 'file_name_you_chose'。
查找替换
- 查找 Ctrl+F
- 查找替换 Ctrl+H
- 整个文件夹中查找 Ctrl+Shift+F
-
匹配符:
* 匹配一个或者多个
? 匹配任意一个
** 匹配任意数量,包括 空
{} 分组条件 (示例: {**/*.html,**/*.txt} matches all html and txt files)
[] 定义匹配排列的字符,[0-9] 表示 "匹配0到9任意一个"
Ctrl + F | 查找 Find |
Ctrl + H | 替换 Replace |
F3 / Shift + F3 | 查找下一个/上一个 Find next/previous |
Alt + Enter | 选择查找匹配的所有出现 Select all occurences of Find match |
Ctrl + D | 将选择添加到下一个查找匹配 Add selection to next Find match |
Ctrl + K Ctrl + D | 将最后一个选择移至下一个查找匹配项 Move last selection to next Find match |
Alt + C / R / W | 切换区分大小写/正则表达式/整个词 Toggle case-sensitive / regex / whole word |
显示相关
- 全屏:
F11
- zoomIn / zoomOut:
Ctrl + =
/Ctrl + -
- 侧边栏显/隐:
Ctrl+B
- 侧边栏4大功能显示:
- 显示资源管理器:
Ctrl+Shift+E
- 显示搜索:
Ctrl+Shift+F
- 显示 Git:
Ctrl+Shift+G
- 显示 Debug :
Ctrl+Shift+D
- 显示资源管理器:
- Show Output:
Ctrl+Shift+U
- 预览 markdown:
Ctrl+Shift+V
其他
- 自动保存:
File -> AutoSave
,或者Ctrl+Shift+P
,输入auto
修改默认快捷键
打开默认键盘快捷方式设置:File -> Preferences -> Keyboard Shortcuts
,或者:Alt+F -> p -> k
修改 keybindings.json
:
// Place your key bindings in this file to overwrite the defaults
[// ctrl+space 被切换输入法快捷键占用{"key": "ctrl+alt+space","command": "editor.action.triggerSuggest","when": "editorTextFocus"},// ctrl+d 删除一行{"key": "ctrl+d","command": "editor.action.deleteLines","when": "editorTextFocus"},// 与删除一行的快捷键互换{"key": "ctrl+shift+k","command": "editor.action.addSelectionToNextFindMatch","when": "editorFocus"},// ctrl+shift+/多行注释{"key":"ctrl+shift+/","command": "editor.action.blockComment","when": "editorTextFocus"},// 定制与 sublime 相同的大小写转换快捷键editor.action.transformToLowercaseeditor.action.transformToUppercase{"key": "ctrl+k ctrl+u","command": "editor.action.transformToUppercase""when": "editorTextFocus"},{"key": "ctrl+k ctrl+l","command": "editor.action.transformToLowercase""when": "editorTextFocus"}
]
自定义设置参考
vscode 自定义配置参考:
{"editor.fontSize": 16,"editor.tabSize": 2,"editor.fontLigatures": true,// 使用等宽字体 Fira Code"editor.fontFamily": "Fira Code, 'Noto Sans CJK SC Medium', Consolas, 'Courier New', monospace",// 关闭右侧的 minimap"editor.minimap.enabled": false,"editor.minimap.renderCharacters": false,"files.associations": {"*.es": "javascript","*.es6": "javascript"},// 控制编辑器是否应呈现空白字符"editor.renderWhitespace": "all",// 启用后,将在保存文件时剪裁尾随空格。"files.trimTrailingWhitespace": true,// File extensions that can be beautified as javascript or JSON."beautify.JSfiles": ["","es","es6","js","json","jsbeautifyrc","jshintrc"],// 关闭 git 自动刷新、fetch、add 操作"git.enableSmartCommit": false,"git.enabled": true,"git.autorefresh": false,"git.autofetch": false,
}
主题及配色方案实时预览
f1 后输入 theme 回车,然后上下键即可预览。
自定义 settings.json
- User settings 是全局设置,任何vs Code打开的项目都会依此配置。
- Workspace settings 是本工作区的设置,会覆盖上边的配置。存储在工作区的 .vocode 文件夹下。
几乎所有设定都在 settings.json 里
Visual Studio Code 功能、插件、设置
功能 Features
VS Code 最重要的功能是它的侧边栏,它集成了在编码和重构时会用到的核心功能,你需要的其他任何功能都可以通过安装扩展来满足。
智能感知 IntelliSense
一个非常有用的语法高亮和自动完成功能,提供了基于变量类型、函数定义和导入模块的自动补全功能。https://code.visualstudio.com/docs/editor/intellisense
调试 Debugging
内置调试器可以通过添加断点和观察器进行调试,以帮助你加快编辑,编译等。
默认情况下,它支持 NodeJS ,并且可以调试任何可以被转换为 JavaScript 的语言(愚人码头注:比如,TypeScript 等),但像 C++ 或 Python 这样的其他运行时则需要安装扩展才能进行调试。
https://code.visualstudio.com/Docs/editor/debugging
内置 Git
VS Code 内置了一个 Git GUI,支持最常用 Git 命令,这使得您可以很容易地看到您在项目中所做的更改。
图标
跟主题及配色方案的修改类似,VS Code 也提供了图标主题的修改功能,如下所示:
需要安装插件:直接搜索 icon,可以选择一个安装比较多的。vscode-icons (侧边栏图标插件):可以更换侧边栏中漂亮的图标。
终端命令行工具 Terminal
VS Code 提供了一个功能齐全的集成终端,可以让你选择终端,并且运行常用命令。
前端开发必备插件
- PostCSS Sorting
- stylelint
- stylefmt
- ESLint
- javascript standard format
- beautify
- Babel ES6/ES7
- Debugger for Chrome
- Add jsdoc comments
- javascript(ES6) code snippets
- vue
- weex
- Reactjs code snippets
- React Native Tools
- Npm Intellisense
- Instant Markdown
- Markdown Shortcuts
- TextTransform
实用的 Visual Studio Code 插件:https://www.cnblogs.com/hjpqwer/p/7636643.html
60 个神级 VS Code 插件:https://www.sohu.com/a/528387273_121124359
推 荐 插 件
- 汉化:安装 Chinese (Simplified) Language Pack for Visual Studio Code 插件,完成后重启 VS Code 即可
- 背景图片:安装 background 插件,完成后重启编辑器
- 注释美化:安装 Better Comments
- 括号上色:安装 Bracket Pair Colorizer 2 插件(相较于 Bracket Pair Colorizer,Bracket Pair Colorizer 2 的性能更优)。配置的话,可以在settings.json中加上这一行:"bracket-pair-colorizer-2.showBracketsInGutter": true,意思是在行号前显示配对的括号,方便定位。
- 缩进高亮:高亮显示文本前面的缩进,交替使用四种不同的颜色。安装插件 indent-rainbow
- SVG 插件:提供语法高亮,自动补全,文档提示,颜色选择,URL 跳转,ID 快速修改,SVG 预览与导出 PNG 等功能。
- git 可视化:安装 Git Graph 插件,使用快捷键Shift + Alt + G打开 Git Graph 页面。
- Git 日志:一个强大的 Git 日志管理工具 GitLens — Git supercharged
- npm 管理:npm 扩展支持运行 package.json 文件中定义的 npm 脚本,并支持根据 package.json 中定义的依赖项验证已安装的模块。
- 代码运行:安装 Code Runner 后,可直接运行当前文件/当前选中的代码。运行结果会展示在“输出”面板中。在 VS Code 中快速运行代码
- open in browser:在浏览器中打开页面文件。
- 绘制流程图:Draw.io Integration 插件将 Draw.io 集成到 VS Code 中。
- Sublime Keymap (Sublime 键盘快捷键):在安装这个插件和重启 VS Code 之后,将在 VS Code 中导入 Sublime Text 的键盘快捷键。可以通过 VS Code 的强大智能感知来使用熟悉的 Sublime Text 键盘快捷键。
- Project Manager (项目管理器插件)
- AutoFileName (文件路径自动补全插件):提供基于你输入的文件路径的自动补全的选项。
- vscode-icons (侧边栏图标插件):可以更换侧边栏中漂亮的图标。
- npm Intellisense (npm 模块导入插件):在 import 导入语句中自动完成npm 模块。
- Document This (JSDoc注释插件):在 TypeScript 和 JavaScript 文件中自动生成详细的 JSDoc 注释。