前端之VS Code工具

Posted 2020-12-23 dangjf

一、VS Code 的介绍

VS Code 的全称是 Visual Studio Code，是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面，都做的很不错。

VS Code 官网：<https://code.visualstudio.com>

编辑器 与 IDE的区别：

IDE：对代码会有较好的智能提示，同时侧重于工程项目，对项目的开发、调试工作有较好的图像化界面的支持，因此比较笨重。比如 Eclipse 的定位就是 IDE。

编辑器：要相对轻量许多，侧重于文本的编辑。比如 Sublime Text 的定位就是编辑器。再比如 Windows 系统自带的「记事本」就是最简单的编辑器。

需要注意的是，VS Code 的定位虽然是`编辑器`，而非`IDE`，但 VS Code 又比一般的编辑器的功能要丰富许多。可以这样理解：VS Code的体量是介于编辑器和IDE之间。

ps:VS Code 这个客户端软件是用 js 语言开发出来的

 

二、VS Code 快捷键

快捷键	功能	操作类型
Ctrl + Shift + P，F1	显示命令面板	工作区
Ctrl + B	显示/隐藏侧边栏	工作区
Ctrl +	创建多个编辑器	工作区
Ctrl + 1、2	聚焦到第1、第2个编辑器	工作区
ctrl +/-	将工作区放大/缩小（包括代码字体、左侧导航栏）	工作区
Ctrl + J	显示/隐藏控制台	工作区
Ctrl + Shift + N	重新开一个软件的窗口	工作区
Ctrl + Shift + W	关闭软件的当前窗口	工作区
Ctrl + N	新建文件	工作区
Ctrl + W	关闭当前文件	工作区
Ctrl + Pagedown/Pageup	在已经打开的编辑器之间进行切换	跳转操作
Ctrl + Tab	在已经打开的文件之间进行跳转	跳转操作
Ctrl + shift + O	在当前文件的各种方法之间进行跳转	跳转操作
Ctrl + G	跳转到指定行	跳转操作
Ctrl+Shift+	跳转到匹配的括号	跳转操作
Ctrl + 左右方向键	在**单词**之间移动光标	移动光标-常用
Fn + 左右方向键	在**整行**之间移动光标	移动光标-常用
Fn + ←（或 Win + ←）	将光标定位到当前行的最左侧	移动光标-常用
Fn + →（或 Win + →）	将光标定位到当前行的最右侧	移动光标-常用
Ctrl + Home	将光标定位到文章的第一行	移动光标-常用
Ctrl + End	将光标定位到文章的最后一行	移动光标-常用
Ctrl + Alt + 上下键	在连续的多列上，同时出现光标	多光标-常用
Alt + 鼠标点击任意位置	在任意位置，同时出现光标	多光标-常用
Alt + Shift + 鼠标拖动	在选中区域的每一行末尾，出现光标	多光标-常用
Ctrl + Shift + L	在选中文本的所有相同内容处，出现光标	多光标-常用
Ctrl + D（反复）	将全文中相同的词逐一加入选择	多光标-常用
Alt + Shift + I	每一行的末尾都创建一个光标	多光标-常用
Ctrl + Enter	在当前行的下方新增一行，然后跳至该行	编辑-常用
Ctrl+Shift+Enter	在当前行的上方新增一行，然后跳至该行	编辑-常用
Alt + ↑	将代码向上移动	编辑-常用
Alt + ↓	将代码向下移动	编辑-常用
Alt + Shift + ↑	将代码向上复制	编辑-常用
Alt + Shift + ↓	将代码向下复制	编辑-常用
Ctrl + Shift + K	删除整行	删除-常用
Ctrl + Backspace	删除光标之前的一个单词	删除
Ctrl + delete	删除光标之后的一个单词	删除
Ctrl + /	添加单行注释	编程-常用
Alt + shift + F	代码格式化	编程-常用
F2	以重构的方式进行重命名	编程-常用
Ctrl + Shift +F	全局搜索代码	搜索
Ctrl + P	在当前的项目工程里，全局搜索文件	搜索
Ctrl + F	在当前文件中搜索，光标在搜索框里	搜索
F3	在当前文件中搜索，光标仍停留在编辑器里	搜索

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

自定义快捷键

1、按住快捷键「Cmd + Shift + P」，弹出命令面板，在命令面板中输入“快捷键”，可以进入快捷键的设置。

2、选择菜单栏「偏好设置 --> 键盘快捷方式」，进入快捷键的设置

3、点击 VS Code 左下角的齿轮按钮

 

三、自定义设置

如果需要修改一些设置项，可以通过「命令面板」来操作，效率会更高。

1、设置字体大小：在命令面板输入“字体”，可以进行字体的设置

2、大小写转换：选中文本后，在命令面板中输入`transfrom`，就可以修改文本的大小写了

3、面包屑（Breadcrumb），设置成功后，我们就可以查看到当前文件的「层级结构」，非常方便。打开 VS Code 的设置项，选择「用户设置 -> 工作台 -> 导航路径」

4、是否显示代码的行号，你可以在设置项里搜索 `editor.lineNumbers`修改设置

5、右侧是否显示代码的缩略图，可以在设置项里搜索 `editor.minimap`进行设置

6、将当前行代码高亮显示（更改光标所在行的背景色）

1）在设置项里搜索`editor.renderLineHighlight`，将选项值设置为`all`或者`line`。

2）在设置项里增加如下内容：

```json
"workbench.colorCustomizations": {
"editor.lineHighlightBackground": "#00000090",
"editor.lineHighlightBorder": "#ffffff30"
}
```

上方代码，第一行代码的意思是：修改光标所在行的背景色（背景色设置为全黑，不透明度 90%）；第二行代码的意思是：修改光标所在行的边框色。

7、改完代码后立即自动保存，可以在设置项里搜索`files.autoSave`

8、保存代码后，是否立即格式化，可以在设置项里搜索`editor.formatOnSave`

9、新建文件后的默认文件类型，可以在设置项里搜索`files.defaultLanguage`，输入html

10、代码格式化：Prettier

我们可以使用 `Prettier`进行代码格式化，会让代码的展示更加美观。步骤如下：

（1）安装插件 `Prettier`。

（2）在项目的根路径下，新建文件`.prettierrc`，并在文件中添加如下内容：

```json
{
"printWidth": 150,
"tabWidth": 4,
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"tslintIntegration": true,
"insertSpaceBeforeFunctionParenthesis": false
}
```

11、文件传输：sftp

如果你需要将本地文件通过 ftp 的形式上传到局域网的服务器，可以安装`sftp`这个插件，很好用。在公司会经常用到。

步骤如下：

（1）安装插件`sftp`。

（2）配置 `sftp.json`文件。 插件安装完成后，输入快捷键「cmd+shift+P」弹出命令面板，然后输入`sftp:config`，回车，当前工程的`.vscode`文件夹下就会自动生成一个`sftp.json`文件，我们需要在这个文件里配置的内容可以是：

- `host`：服务器的 IP 地址

- `username`：用户名

- `privateKeyPath`：存放在本地的已配置好的用于登录工作站的密钥文件（也可以是 ppk 文件）

- `remotePath`：工作站上与本地工程同步的文件夹路径，需要和本地工程文件根目录同名，且在使用 sftp 上传文件之前，要手动在工作站上 mkdir 生成这个根目录

- `ignore`：指定在使用 sftp: sync to remote 的时候忽略的文件及文件夹，注意每一行后面有逗号，最后一行没有逗号

举例如下：(注意，其中的注释需要去掉)

```json
{
"host": "192.168.xxx.xxx", //服务器ip
"port": 22, //端口，sftp模式是22
"username": "", //用户名
"password": "", //密码
"protocol": "sftp", //模式
"agent": null,
"privateKeyPath": null,
"passphrase": null,
"passive": false,
"interactiveAuth": false,
"remotePath": "/root/node/build/", //服务器上的文件地址
"context": "./server/build", //本地的文件地址

"uploadOnSave": true, //监听保存并上传
"syncMode": "update",
"watcher": {
//监听外部文件
"files": false, //外部文件的绝对路径
"autoUpload": false,
"autoDelete": false
},
"ignore": [
//忽略项
"**/.vscode/**",
"**/.git/**",
"**/.DS_Store"
]
}
```