欢迎各位兄弟 发布技术文章
这里的技术是共享的
Visual Studio Code 首先是一个编辑器,它包括高效编辑源代码所需的功能。本主题将带您了解编辑器的基础知识,并帮助您开始使用代码。
在编写代码时能够将手放在键盘上对于提高生产力至关重要。VS Code 有一组丰富的默认键盘快捷键,并允许您自定义它们。
键盘快捷键参考- 通过下载参考表了解最常用和流行的键盘快捷键。
安装 Keymap 扩展- 通过安装 Keymap 扩展,在 VS Code 中使用旧编辑器(例如 Sublime Text、Atom 和 Vim)的键盘快捷键。
自定义键盘快捷键- 更改默认键盘快捷键以适合您的风格。
VS Code 支持多个光标以进行快速的同时编辑。您可以使用Alt+Click添加辅助光标(渲染得更细)。每个光标根据其所在的上下文独立运行。添加更多光标的常用方法是使用Ctrl+Alt+Down或Ctrl+Alt+Up在下方或上方插入光标。
注意:您的显卡驱动程序(例如 NVIDIA)可能会覆盖这些默认快捷方式。
Ctrl+D选择光标处的单词,或当前选择的下一次出现。
提示:您还可以使用Ctrl+Shift+L添加更多光标,这将在当前所选文本的每次出现处添加一个选择。
如果您想更改应用多个光标的修饰键,macOS 上为Cmd +Click,Windows 和 Linux 上为Ctrl+Click,您可以使用editor.multiCursorModifier
设置. 这让来自其他编辑器(例如 Sublime Text 或 Atom)的用户可以继续使用他们熟悉的键盘修饰符。
该设置可以设置为:
ctrlCmd
- 映射到Windows上的Ctrl和macOS上的Cmd。
alt
- 现有的默认Alt。
在“选择”菜单中还有一个菜单项“使用 Ctrl+单击多光标”可快速切换此设置。
在转到定义和打开链接手势也将尊重这个设置和调整,使得它们并不冲突。例如,设置为 时ctrlCmd
,Ctrl/Cmd+Click可以添加多个光标,Alt+Click可以调用打开链接或转到定义。
快速缩小或扩大当前选择。使用Shift+Alt+Left和Shift+Alt+Right触发它。
这是使用Shift+Alt+Right扩展选择的示例:
将光标放在一个角落,然后按住Shift+Alt 的同时拖动到对角:
注意:当使用Ctrl/Cmd作为多光标修饰符时,这会更改为Shift+Ctrl/Cmd。
在 macOS 和 Windows 上也有用于列选择的默认键绑定,但在 Linux 上没有。
钥匙 | 命令 | 命令编号 |
---|---|---|
Ctrl+Shift+Alt+向下 | 列向下选择 | cursorColumnSelectDown |
Ctrl+Shift+Alt+向上 | 列向上选择 | cursorColumnSelectUp |
Ctrl+Shift+Alt+左 | 列选择左 | cursorColumnSelectLeft |
Ctrl+Shift+Alt+向右 | 列右选 | cursorColumnSelectRight |
Ctrl+Shift+Alt+PageDown | 列选择 Page Down | cursorColumnSelectPageDown |
Ctrl+Shift+Alt+PageUp | 列选择向上翻页 | cursorColumnSelectPageUp |
如果需要,您可以编辑您的keybindings.json
以将它们绑定到更熟悉的内容。
用户设置编辑器:列选择控制此功能。进入此模式后,如状态栏中所示,默认情况下鼠标手势和箭头键将创建列选择。也可以通过选择>列选择模式菜单项访问此全局切换。此外,还可以从状态栏中禁用列选择模式。
默认情况下,VS Code 需要一个明确的操作来将您的更改保存到磁盘,Ctrl+S。
但是,它很容易打开Auto Save
,这将在配置的延迟或焦点离开编辑器后保存您的更改。启用此选项后,无需显式保存文件。最简单的打开方法Auto Save
是使用“文件” >“自动保存”切换开关,在延迟后打开和关闭保存。
要对 进行更多控制Auto Save
,请打开用户或工作区设置并找到相关设置:
files.autoSave
: 可以有以下值:
off
- 禁用自动保存。
afterDelay
- 在配置的延迟后保存文件(默认为 1000 毫秒)。
onFocusChange
- 当焦点移出脏文件的编辑器时保存文件。
onWindowChange
- 当焦点移出 VS Code 窗口时保存文件。
files.autoSaveDelay
: 当files.autoSave
配置为 时,以毫秒为单位配置延迟afterDelay
。默认值为 1000 毫秒。
默认情况下,VS Code 会记住您退出时未保存的文件更改。通过文件>退出(macOS 上的代码>退出)关闭应用程序或关闭最后一个窗口时,会触发热退出。
您可以通过设置files.hotExit
为以下值来配置热退出:
"off"
: 禁用热退出。
"onExit"
: 应用程序关闭时会触发热退出,即在 Windows/Linux 上关闭最后一个窗口或workbench.action.quit
触发命令时(来自命令面板、键盘快捷方式或菜单)。所有未打开文件夹的窗口将在下次启动时恢复。
"onExitAndWindowClose"
: 当应用程序关闭时会触发热退出,即当最后一个窗口在 Windows/Linux 上关闭或workbench.action.quit
命令被触发时(从命令面板、键盘快捷方式或菜单),以及任何带有文件夹的窗口无论是否是最后一个窗口都打开。所有未打开文件夹的窗口将在下次启动时恢复。要将文件夹窗口恢复为关机前的状态,请设置window.restoreWindows
为all
.
如果热退出出现问题,所有备份都存储在以下标准安装位置的文件夹中:
视窗 %APPDATA%\Code\Backups
苹果系统 $HOME/Library/Application Support/Code/Backups
Linux $HOME/.config/Code/Backups
VS Code 允许您在当前打开的文件中快速查找和替换文本。按Ctrl+F在编辑器中打开 Find Widget,搜索结果将在编辑器、总览标尺和小地图中突出显示。
如果当前打开的文件中有多个匹配的结果,您可以在查找输入框聚焦时按Enter和Shift+Enter导航到下一个或上一个结果。
当 Find Widget 打开时,它会自动将编辑器中选定的文本填充到查找输入框中。如果选择为空,则光标下的单词将被插入到输入框中。
可以通过设置editor.find.seedSearchStringFromSelection
为关闭此功能false
。
默认情况下,查找操作在编辑器中对整个文件运行。它也可以在选定的文本上运行。您可以通过单击“查找小部件”上的汉堡包图标来打开此功能。
如果您希望它成为 Find Widget 的默认行为,您可以设置editor.find.autoFindInSelection
为always
或multiline
,如果您希望它仅在选择多行内容时在选定文本上运行。
除了使用纯文本查找和替换外,Find Widget 还具有三个高级搜索选项:
相符
匹配整个单词
正则表达式
替换输入框支持大小写保留,您可以通过单击保留大小写 ( AB ) 按钮将其打开。
您可以通过将文本粘贴到查找输入框和替换输入框来搜索多行文本。按Ctrl+Enter
在输入框中插入一个新行。
搜索长文本时,Find Widget 的默认大小可能太小。您可以拖动左窗框放大查找小部件,或双击左窗框将其最大化或将其缩小到默认大小。
VS Code 允许您快速搜索当前打开的文件夹中的所有文件。按Ctrl+Shift+F并输入您的搜索词。搜索结果被分组到包含搜索词的文件中,并指示每个文件中的点击次数及其位置。展开文件以查看该文件中所有匹配项的预览。然后单击其中一个点击以在编辑器中查看它。
提示:我们也支持在搜索框中进行正则表达式搜索。
您可以通过单击右侧搜索框下方的省略号 ( Toggle Search Details )(或按Ctrl+Shift+J)来配置高级搜索选项。这将显示用于配置搜索的其他字段。
在搜索框下方的两个输入框中,您可以输入要在搜索中包含或排除的模式。如果您输入example
,它将匹配example
工作区中命名的每个文件夹和文件。如果您输入./example
,它将匹配example/
工作区顶层的文件夹。使用,
分隔多个模式。路径必须使用正斜杠。您还可以使用 glob 语法:
*
匹配路径段中的一个或多个字符
?
匹配路径段中的一个字符
**
匹配任意数量的路径段,包括无
{}
对条件进行分组(例如{**/*.html,**/*.txt}
匹配所有 HTML 和文本文件)
[]
要声明一个字符范围来匹配(example.[0-9]
匹配上example.0
,example.1
...)
VS Code 默认会排除一些文件夹,以减少您不感兴趣的搜索结果的数量(例如:)node_modules
。打开设置以更改files.exclude
和search.exclude
部分下的这些规则。
请注意,在搜索视图的工作,glob模式,以不同于设置,如files.exclude
和search.exclude
。在设置中,您必须使用**/example
来匹配工作区example
中子文件夹中命名的文件夹folder1/example
。在搜索视图中,**
假定前缀。这些设置中的 glob 模式总是相对于工作区文件夹的路径进行评估。
另请注意要排除的文件框中的“使用排除设置”和“忽略文件”切换按钮。切换决定是否排除被您的文件忽略和/或被您的和设置匹配的文件。.gitignore
files.exclude
search.exclude
提示:在资源管理器中,您可以右键单击文件夹并选择在文件夹中查找以仅在文件夹内进行搜索。
您还可以跨文件搜索和替换。展开搜索小部件以显示替换文本框。
当您在“替换”文本框中键入文本时,您将看到挂起更改的差异显示。您可以从“替换”文本框中替换所有文件、替换一个文件中的所有内容或替换单个更改。
提示:您可以通过使用向下和向上浏览搜索词历史记录来快速重复使用以前的搜索词。
VS Code 支持在编辑器中或全局执行搜索和替换时更改正则表达式匹配组的大小写。这是用改性剂进行\u\U\l\L
,其中\u
和\l
将上/小写一个单个字符,\U
并且\L
将上/小写匹配组的其余部分。
例子:
修饰符也可以堆叠 - 例如,\u\u\u$1
将组的前三个字符大写,或者\l\U$1
将第一个字符小写,其余字符大写。捕获组$n
在替换字符串中被引用,其中n
是捕获组的顺序。
我们将始终提供单词补全,但对于JavaScript、JSON、HTML、CSS、SCSS、Less、C# 和 TypeScript 等丰富的语言,我们提供真正的 IntelliSense 体验。如果语言服务知道可能的补全,则会在您键入时弹出 IntelliSense 建议。您始终可以使用Ctrl+Space手动触发它。默认情况下,Tab或Enter是接受键盘触发器,但您也可以自定义这些键绑定。
提示:建议过滤支持 CamelCase,因此您可以在方法名称中输入大写字母来限制建议。例如,“cra”会很快调出“createApplication”。
提示:可以通过
editor.quickSuggestions
和editor.suggestOnTriggerCharacters
设置来配置 IntelliSense 建议。
JavaScript 和 TypeScript 开发人员可以利用npmjs类型声明(类型)文件存储库来获取常见 JavaScript 库(Node.js、React、Angular)的 IntelliSense。您可以在JavaScript 语言主题和Node.js教程中找到有关使用类型声明文件的很好的解释。
在IntelliSense 文档中了解更多信息。
VS Code 对源代码格式有很好的支持。编辑器有两个显式格式操作:
格式化文档( Shift+Alt+F ) - 格式化整个活动文件。
格式选择( Ctrl+K Ctrl+F ) - 格式化所选文本。
您可以从命令面板( Ctrl+Shift+P ) 或编辑器上下文菜单中调用这些。
VS Code 具有用于 JavaScript、TypeScript、JSON 和 HTML 的默认格式化程序。每种语言都有特定的格式选项(例如,html.format.indentInnerHtml
),您可以在用户或工作区设置中根据自己的喜好进行调整。如果您安装了另一个提供相同语言格式的扩展程序,您还可以禁用默认语言格式化程序。
"html.format.enable": false
除了手动调用代码格式化之外,您还可以根据用户手势(例如键入、保存或粘贴)触发格式化。这些默认情况下是关闭的,但您可以通过以下设置启用这些行为:
editor.formatOnType
- 键入后格式化行。
editor.formatOnSave
- 在保存时格式化文件。
editor.formatOnPaste
- 格式化粘贴的内容。
注意:并非所有格式化程序都支持粘贴时格式化,因此它们必须支持格式化文本选择或范围。
除了默认格式化程序之外,您还可以在 Marketplace 上找到支持其他语言或格式化工具的扩展程序。有一个Formatters
类别,因此您可以轻松搜索和查找格式扩展。在扩展视图搜索框中,输入“formatters”或“category:formatters”以查看 VS Code 中的扩展过滤列表。
您可以使用行号和行首之间的装订线上的折叠图标折叠源代码区域。将鼠标移到装订线上方并单击以折叠和展开区域。使用Shift + 单击折叠图标可折叠或展开区域和其中的所有区域。
您还可以使用以下操作:
折叠 ( Ctrl+Shift+[ ) 折叠光标处最里面的未折叠区域。
展开 ( Ctrl+Shift+] ) 展开光标处的折叠区域。
切换折叠 ( Ctrl+K Ctrl+L ) 折叠或展开光标处的区域。
递归折叠 ( Ctrl+K Ctrl+[ ) 折叠光标处最里面的未折叠区域和该区域内的所有区域。
递归展开 ( Ctrl+K Ctrl+] ) 展开光标处的区域以及该区域内的所有区域。
全部折叠 ( Ctrl+K Ctrl+0 ) 折叠编辑器中的所有区域。
全部展开 ( Ctrl+K Ctrl+J ) 展开编辑器中的所有区域。
折叠层级 X(Ctrl+K Ctrl+2用于层级 2)折叠层级 X 的所有区域,当前光标位置的区域除外。
折叠所有块注释 ( Ctrl+K Ctrl+/ ) 折叠所有以块注释标记开头的区域。
默认情况下,折叠区域基于行的缩进进行评估。当一行的缩进小于一个或多个后续行时,折叠区域开始,当有一行具有相同或更小的缩进时结束。
从 1.22 版本开始,折叠区域也可以根据编辑器配置语言的语法标记计算。以下语言已经提供了语法感知折叠:Markdown、HTML、CSS、LESS、SCSS 和 JSON。
如果您希望为上述一种(或所有)语言切换回基于缩进的折叠,请使用:
"[html]": {
"editor.foldingStrategy": "indentation"
},
区域也可以由每种语言定义的标记来定义。以下语言目前定义了标记:
语 | 起始区域 | 结束区域 |
---|---|---|
蝙蝠 | ::#region 或者 REM #region | ::#endregion 或者 REM #endregion |
C# | #region | #endregion |
C/C++ | #pragma region | #pragma endregion |
CSS/少/SCSS | /*#region*/ | /*#endregion*/ |
咖啡脚本 | #region | #endregion |
F# | //#region 或者 (#_region) | //#endregion 或者 (#_endregion) |
爪哇 | //#region 或者 //<editor-fold> | // #endregion 或者 //</editor-fold> |
降价 | <!-- #region --> | <!-- #endregion --> |
Perl5 | #region 或者 =pod | #endregion 或者 =cut |
PHP | #region | #endregion |
电源外壳 | #region | #endregion |
Python | #region 或者 # region | #endregion 或者 # endregion |
打字稿/JavaScript | //#region | //#endregion |
视觉基础 | #Region | #End Region |
要仅折叠和展开由标记定义的区域,请使用:
折叠标记区域 ( Ctrl+K Ctrl+8 ) 折叠所有标记区域。
展开标记区域 ( Ctrl+K Ctrl+9 ) 展开所有标记区域。
VS Code 可让您控制文本缩进以及是否要使用空格或制表位。默认情况下,VS Code 插入空格并且每个Tab键使用 4 个空格。如果您想使用另一个默认值,您可以修改editor.insertSpaces
和editor.tabSize
设置。
"editor.insertSpaces": true,
"editor.tabSize": 4,
VS Code 会分析您打开的文件并确定文档中使用的缩进。自动检测的缩进会覆盖您的默认缩进设置。检测到的设置显示在状态栏的右侧:
您可以单击状态栏缩进显示以显示带有缩进命令的下拉菜单,允许您更改打开文件的默认设置或在制表位和空格之间进行转换。
注意: VS Code 自动检测会检查 2、4、6 或 8 个空格的缩进。如果您的文件使用不同数量的空格,则可能无法正确检测缩进。例如,如果您的约定是用 3 个空格缩进,您可能需要关闭
editor.detectIndentation
并将制表符大小显式设置为 3。
"editor.detectIndentation": false,
"editor.tabSize": 3,
使用用户设置或工作区设置中的files.encoding
设置全局或按工作区设置文件编码。
您可以在状态栏中查看文件编码。
单击状态栏中的编码按钮以重新打开或使用不同的编码保存活动文件。
然后选择一种编码。
您已经介绍了基本的用户界面 - VS Code 还有很多。请继续阅读以了解:
介绍视频 - 设置和基础知识- 观看有关 VS Code 基础知识的教程。
用户/工作区设置- 了解如何通过用户和工作区设置根据您的喜好配置 VS Code。
代码导航- Peek 和 Goto 定义等。
集成终端- 了解用于从 VS Code 中快速执行命令行任务的集成终端。
IntelliSense - VS Code 带来智能代码完成。
调试- 这是 VS Code 真正闪耀的地方。
是的,展开搜索视图文本框以包含替换文本字段。您可以搜索和替换工作区中的所有文件。请注意,如果您没有在文件夹上打开 VS Code,则搜索将仅在当前打开的文件上运行。
您可以通过editor.wordWrap
设置控制自动换行。默认情况下,editor.wordWrap
isoff
但如果您将其设置为on
,文本将环绕编辑器的视口宽度。
"editor.wordWrap": "on"
您可以使用Alt+Z切换 VS Code 会话的自动换行。
您还可以使用editor.rulers
设置将垂直列标尺添加到编辑器,该设置采用您想要垂直标尺的列字符位置数组。
来自 https://code.visualstudio.com/docs/editor/codebasics