关于VS Code的学习笔记

工欲善其事必先利其器

关于vscode的学习笔记

1 Command Palette命令面板

命令面板：Ctrl+Shift+P
- 可以快速打开命令面板，命令面板可以执行各种命令
- 面板命令为模糊查询，记住关键词即可
- 常用的命令，有快捷键的优先使用快捷键
  - Minimap：缩略图
快捷键：
- Ctrl+k,Ctrl+M：快捷键的映射，通过安装扩展，可以使用之前熟悉的软件的快捷键
- Ctrl+k,Ctrl+S：在编辑器中查看所有的快捷键
  - 当安装扩展后，可能会发生快捷键冲突，可以在这里查询并更改
- Ctrl+K,Ctrk+R：打开网址
  - 网上搜罗到的有中文对照的快捷键图例，点击下载
常用快捷键
- Ctrl+B：侧边栏的显示与隐藏
- Ctrl+P：将允许您通过键入其他名称导航到任何文件或符号
- Ctrl+Shift+Tab：将循环浏览最后一组打开的文件
- Ctrl+Shift+O：将允许您导航到文件中的特定符号
- Ctrl+G：将允许您导航到文件中的特定行
- Ctrl+`：可以查看程序输出、调试输出、问题输出和终端命令
  - Ctrl+Shift+`：新建终端
- Ctrl+K之后Ctrl+T：开启主题切换，回车确认主题的更改
  - 更多主题：扩展中搜索theme
  - 自定义配置：见视图配置项Settings

2 编辑器视图的控制

编辑器视图，单击文件就可以在编辑器中打开视图，可以同时打开多个文件以不同的方式。
可以对编辑器进行配置，例如：字体，颜色，字号登等
- 命令：>Open Settings (UI) || >Open Settings (JSON)

3 VS Code基本代码编写

小细节：

打开文件单击与双击的区别。单击为浏览状态，单击其他文件的时候会被替换。

3.1 快捷键

最常用的快捷键列表如下

快捷键	意义
Ctrl+P	浏览文件
Ctrl+Shift+F	查找
Ctrl+W	关闭文件
Ctrl+/	注释
Shift+Alt+A	块注释
Shift+Alt+F	格式化文档
Ctrl+K,Ctrl+F	格式化选中
Ctrl+Shift+K	删除行

3.2 选择多行

Alt+click || Ctrl+Alt+按住滑轮上下滑动 ：插入多个光标
Ctrl+D：选择相同的word

4 VS Code扩展市场

VS Code之所以强大，就是因为可以添加扩展，并且扩展丰富，好用

4.1 使用VS Code扩展

浏览扩展
安装扩展
扩展详细
过滤扩展
排序扩展
搜索扩展
管理扩展
- 安装
- 装卸
- 启用
- 禁用
扩展分类
更新扩展

5 VS Code 代码补全(IntelliSense)

VS Code的代码补全功能依赖各种扩展，例如：java、Python、Go、C#等等，IntellSense可以实现代码补全，内容辅助，代码提示等功能

安装所需扩展
输入代码按Tab或者Enter来实现代码补全

6 VS Code 代码导航

6.1 快速文件导航

VS Code可以快速在文件之间进行导航

Ctrl+P：快速打开文件
Ctrl+Tab：已打开的文件中循环切换

6.2 跳转到文件定义处

F12：可以跳转到文件定义的地方，同：Ctrl+Alt+Click
Ctrl+鼠标经过：可以显示帮助信息，告诉我们文件定义的地方在哪里
Ctrl+Shift+O：跳转到Symbol(方法或者变量)，如果文件很大，方法很多的时候可以使用它

6.3 Peek

Shift+F12：Peek可以嵌入在当前页面进行浏览，这样可以很方便，也可以右键点击选择Peek

6.4 括号匹配

Ctrl+Shift+\：如果一个方法内容很多，并且有很多方法，使用该快捷键，可以很容易的判断每一个方法的内容区域

7 VS Code 代码重构

源代码重构可以通过重构代码而不用修改运行时行为来提高项目的质量和可维护性，VS Code支持重构操作，例如：Extract Method和Extract Varlable,以改善编辑器中的代码库

7.1 重构代码

重构代码，根据右键选择的不同内容，有不同的重构选择

选择一个完整的方法，可以重构到新的文件中
选择一个return的输出
- 重构为一个内部的声明变量
- 重构为闭包
- 重构为全局变量
等等....

...重构有风险，忍住欲望，不要试图重构你不理解的代码。

7.2 重命名symbol

F2：可以选择符号，例如变量名，方法函数名等等，进行批量重命名

8 VS Code 代码调试

VS Code的一个关键功能就是其出色的调试支持，VS Code的内置调试器有助于加速编辑，编译和调试循环

8.1 调试扩展

VS Code具有对Node.js运行时的内置调制支持，可以调试JavaScript，TypeScript,TypeScript以及任何转换为JavaScript的语言，要调试其他语言和运行时(包括PHP,Ruby,Go,C#,Python,C++,Powershell等)，需要在VS扩展中查找安装调试器扩展。

如果涉及到其他语言，需安装附加调试器

8.2 添加断点

在编辑器代码区域最左端，点击添加断点

8.3 调试快捷键

快捷键	功能
F5	继续/暂停
F10	跳过
F11	进入
Shift+F11	退出
Ctrl+Shift+F5	重新开始
Shift+F5	停止

9 VS Code 集成终端

在Visual Studio Code中，您可以打开一个集成终端，最初从工作区的根目录开始，这可以非常方便，因为您不必切换窗口或更改现有终端的状态以执行快速命令行任务

9.1 打开终端视图

打开终端：Ctrl+` || view>terminal 菜单 || 命令->Toggle Integrated Terminal
Ctrl+Shift+`：新建终端

9.2 管理多个终端

添加/删除多个终端

9.3 配置终端

终端类型,搜索 terminal 进行配置,具体的指向地址根基实际改变

// Command Prompt
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe"
// PowerShell
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
// Git Bash
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe"
// Bash on Ubuntu (on Windows)
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\bash.exe"

终端样式

terminal.integrated.fontFamily
terminal.integrated.fontSize
terminal.integrated.fontWeight
terminal.integrated.fontWeightBold
terminal.integrated.lineHeight

10 VS Code使用Emmet

Emmet类似于CSS选择器的语法来描述元素在生成的树和元素属性中的位置。

Tab或Enter键触发

10.1 元素

可以直接使用元素的名字来快速生成Html标签
可以编写任何单词并将其转换为标签

10.2 嵌套运算符

嵌套运算符用于在生成的树中定位缩写的元素

>：子元素
- 可以使用>运算符将元素嵌套在彼此内
+：兄弟元素
- 可以使用+运算符将元素放在彼此的附近，在同一级别上
^：向上
- 使用^运算符，可以爬到树的上一个级别
*：乘法
- 使用*运算符，可以定义元素应该输出的次数
（）：分组
- 使用()对复杂缩写中的子树进行分组
[]：定义属性
- 以[id=ab][name=abel]的格式定义属性值
{}：定义内容
- 在元素标签中定义内容
- $：代表累加，也可以运用在属性定义中。

10.3 属性运算符

属性运算符用于修改输出元素的属性

#id_name：给元素添加id属性
.class_name：给元素添加class属性

10.4 CSS缩写

对于CSS语法，Emmet有很多预定义的属性片段。

作用于Style区域中

例如：

m-10--20：margin: -10px -20px;
p20：padding: 20px;
h20：height: 20px;
........

11 Vscode开发JavaScript

11.1 智能跟踪

常见结构
- for
- while
- do while
- if else
- try/catch
- .....
代码提示
自动导入

11.2 文本注释

Ctrl+/：注释
Shift+Alt+A：块注释

11.3 代码重构

提取函数
提取变量

12 VS Code 创建markdown格式文件

12.1 markdown扩展

Markdown All in One
Markdown Shortcuts

13 VS Code 开发TypeScript

TypeScript是JavaScript的类型超集，可以编译为纯JavaScript，它提供了类，模块和接口，可以帮助我们构建健壮的组件

13.1 安装TypeScript编辑器

命令行安装: npm install -g typescript
验证
- tsc --version
- tsc --help

13.2 创建.ts

class Startup {
    public static main(): number {
        console.log('hello world');
        return 0;
    }
}

通过编译，我们可以将.ts文件转换为.js文件

编译 tsc 文件名.ts

13.3 创建ts项目

tsconfig.json配置文件
```
{
    "compilerOptions": {}
}
```
通过任务编译项目
- Ctrl+Shift+B：Run Build Task

1 扩展推荐

按需采纳

HTML Snippets
HTML CSS Support
intelliSense for CSS class names in HTML
HTMLHint
Beautify css/sass/scss/less
stylelint
color plcker