一步步详解VSCode的全面配置指南
简介:
Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js
and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity)
.
一、关于Vscode
1.1 VsCode是个啥
Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js
and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity)
. 支持的拓展常见的包含如下:
image.png
1.2 VSCode的学习网址
VSCode帮助文档链接 怎么找到它,其实也及其的简单,仅仅需要。
image.png
二、How to Use
2.1 调试代码和安装插件
如何开始调试代码,这里以python为例
Step1:首先在商店中搜索python
image.png
Step2: 之后就可以直接在主页面启动调试F5 注意以下页面,其中如果是IDE内部使用如下对应窗口块的进行
image.png
文件和调试块的指示
image.png
三、熟识常用的快捷键
3.1 调试常见的快捷键
F9 打开和停止调试断点 F11 单步调试 F5 启动调试
image.png
调试的具体页面如图所示
image.png
二、使用一波
2.1
Vscode是一个轻量的编译器,所以默认是通过打开文件夹的功能来打开对应的工程。而且下面会列举出最近打开的工程,方便打开用户打开最近打开的工程进行编辑和修改。
image.png
这里默认打一个工程,可以看到如下提示。 苹果电脑Mac如何输入⌘、⌥、⇧、⌃、等特殊字符 反正我是复制的,偷懒一下。 科普一波:
⌘ command键 ⌥ option/alt ⇧ shift按键 ^ 表示的是control键
打开一个工程
2.2 查询未知的快捷键
首先键入⇧ ⌘ P,之后出现如图所示的界面,我们在这里面输入对应关键字“调试”,可以快速搜索你需要使用到快捷键
image.png
2.3 ⇧ ⌘ F 整个工程中查找关键字
作用之后效果,如下图。其实和直接点击左边的放大镜效果是等同的。
image.png
2.4 ⌘ P 快速你需要查看的文件,并且能快速跳转到
image.png
2.5 ^ ` 调取和关闭终端
快速吊起终端,对于我们这种,对于需要应用终端的代码,比如python或者vue-cli以及RN,Flutter都是特别方便。
2.6 大纲的功能
关于git部分的默认支持,如果当前工程存在着改动,那么修改清晰可见。
image.png
打开其中一个Vue文件,其中大纲功能是是个非常赞的功能,这个问题件文件脉络清晰明显
image.png
2.6.1 html树
image.png
2.6.2 less的层序
image.png
2.6.3js部分
可以说唯一小小遗憾是没有按照compute和methods之类的对function进行分类,但是如此的顺序很OK了(这一点不如WebStrom)
image.png
2.7 快速强大的编码功能
能够快速捕捉程序中的问题并突出显示。支持多光标编辑,参数提示以及其他快速编码特性。
image
2.8 IntelliSense功能
根据文档上下文为变量类型、函数定义和导入模块提供代码智能补全功能。
image.png
2.9 代码导航和重构
使用peek和navigate to definition功能可以查阅浏览你的源代码,代码重构变得轻而易举。
image.png
2.10 更多更常见的功能
image.png
2.11 关于后退和前进的意义
在一个文档中我们可以首先在A处进行编辑,如下图增加一个标签
image.png
之后我们在B处开始设置该div的css样式
image.png
此时我们通过^ -
就可以回到A区域 在A区域使用^ ⇧ -
就会回到B取悦 如果联系多次按下回退是能够跨文件的,这个功能也很棒。
image.png
2.12 方便的放大和缩小整个界面的字体
通过 ⌘ + 还有 ⌘ + 很容易的实现整个页面所有字体大小
image.png
image.png
2.13 格式化文件快捷键
⌥ ⇧ F
image.png
2.14 用VSCode的固定窗口模式
使用习惯了WebStorm的人都能很明显的感受到,webStorm打开一个.js都会比如像是下面如图:
webStorm的展示.png
而正常打开一个窗口,单击的时候,通常会替换之前的窗口
image.png
要实现和webStorm一样的方式,其实可以直接在如上箭头所示的标题部分双击即可完成固定的效果。
image.png
注意观察会发现,此时标题字体将变成正体。
三、新建一个html直接采用Chrome来进行调试的实现方案
3.1 首先安装,如下图。方法已经特别具体,再此不再赘述。
image.png
3.2 在自己的html工程目录下面点击f5,或者在左侧选择调试按钮
image
image.png
但是直接打开的chrome将会出现如下错误
image.png
3.3.解决以上问题
首先在弹出来的launch.json中添加以下内容
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "启动 Chrome 并打开 localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceRoot}"
},
{
"name": "Launch index.html (disable sourcemaps)",
"type": "chrome",
"request": "launch",
"sourceMaps": false,
"file": "${workspaceRoot}/index.html"
}
]
}
3.4 然后在调试页面中选择对应的scheme
image.png
,在上方
image
,选择下拉按钮,会有一个添加,选择chrome
四、附录其他
4.1 MAC上F功能按键
由于采用MACPro开发,默认的F1到F12分别将会被系统调节按钮替代,如何将F1到F12设置为默认功能。 Mac上的F键标准功能和按键上的特殊功能之间调换 设置 --》 键盘 --》 勾选将F1、F2
4.2 实现TODO的指示功能
首先安装对应的插件
image.png
其次重启Vscode,就可以看到如图所示的TODO的树形结构
image.png
五、参考链接和书籍
Visual Studio Code中文文档(一)-快速入门 VS Code - Debugger for Chrome调试js
VSCode 快捷键(不定时更新)
VSCode 快捷键
-
Cmd + Shift + P :打开命令面板
-
Cmd + Shift + E :文件资源管理器
-
Cmd + Shift + F :跨文件搜索
-
Ctrl + Shift + G :源代码管理
-
Cmd + Shift + D :启动和调试
-
Cmd + Shift + X :管理扩展
-
Cmd + Shift + M :显示错误和警告
-
Ctrl + ` :切换集成终端
终端中
-
code 文件夹路径/文件名 :在 vscode 中打开该文件夹/文件(新窗口)
-
code r 文件夹路径/文件名:在 vscode 中打开该文件夹/文件(当前窗口)
常用命令:cd 到想要打开的目录,然后 code r .
-
code (-r) -g 文件名:行数(:列数):在 vscode 中打开该文件并定位到某行某列(常用场景是报错后定位错误位置。eg:code -r -g for.js:40:10)
-
code (-r) -d 文件1 文件2:在 vscode 中比较两个文件的不同
image
-
ls | code - :展示当前文件夹下所有文件
image
光标
-
cmd + 方向左/右:将光标移到行首/尾
-
cmd + 方向上/下:将光标移到文件首/尾
-
option + 方向左/右:将光标移到单词首/尾
上述加 shift 为选择
-
cmd + delete:删除该行光标之前的
-
fn + cmd + delete:删除该行光标之后的
-
option + delete:删除该 单词光标之前的
-
fn + option + delete:删除该单词光标之后的
-
cmd + shift + k:删除该行代码
-
cmd + enter:在当前行的下面新建一行
-
cmd + shift + enter:在当前行的上面新建一行
-
option + 方向上/下:将当前行代码上/下移一行
-
option + shift + 方向上/下:将当前行代码向上/下复制一行
-
cmd + / :将当前行注释掉
-
option + shift + f :格式化代码
-
cmd + K cmd + F:将选中的代码格式化
-
命令行搜索:缩进,选择重新缩进行,只把缩进格式化
-
ctrl + t :调换字符位置
-
命令行搜索转换为大写
-
ctrl + j :合并代码行
-
cmd + u:撤销光标移动
批量修改(多光标)
-
cmd + 鼠标点击
-
cmd + option + 方向下 => cmd + 方向右 => 方向左右移动
-
cmd + d
-
选一段 => option + shift + i
文件操作
-
ctrl + tan:切换文件
-
cmd + p :搜索文件
-
cmd + p => cmd + enter :在新窗口打开
-
ctrl + g :跳转到某一行
-
cmd + p => 输入文件名 + 行号:打开某文件跳转到指定行
-
cmd + shift + o:查找文件内的符号
-
cmd + t:在多个文件中查找符号
-
shift + f12:查找文件内选中内容的引用
-
原文地址:https://www.cnblogs.com/Gaimo/p/14700378.html
推荐阅读
-
VSCode搭建TypeScript环境全面解析:简单易懂的指南
-
全面指南:Tomcat 9.0.x 的下载、安装、配置及故障排查
-
全面解析Tomcat的核心部件和server.xml配置:一篇详尽的1万字指南
-
全面指南:包含实例代码的HTML表单标签详解
-
全面手把手教你VSCode的超详配置与使用指南
-
全面手把手教你VSCode的超详配置与使用指南
-
终极Vscode设置指南:最全面的Vscode配置与使用教程
-
VSCode 的 settings.json 配置文件指南"或者"如何操作 VSCode 的 settings.json 设置配置文件
-
VSCode中的配置文件详解
-
全面手把手教你VSCode的超详配置与使用指南