VSCode配置详细教程

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使用教程

一、关于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：查找文件内选中内容的引用

•