前端之VS Code工具

标签：``   方便   忽略   config   back   配置   let   使用   方法   

一、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 快捷键

自定义快捷键

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"
]
}
```

前端之VS Code工具

标签：``   方便   忽略   config   back   配置   let   使用   方法   

原文地址：https://www.cnblogs.com/dangjf/p/12981768.html