vs code 使用技巧整理

我不是女神ヾ 2021-11-02 07:36 424阅读 0赞

## 快捷键 ##

*  `Ctrl + Shift + F`：在文件夹中搜索;
 *  `Ctrl + Shift + P`：命令面板;
 *  `Ctrl + Shift + T`：重新打开 关闭的编辑页面;
 *  `Ctrl+Shift+PgUp/PgDown`：将编辑器(当前tab)向左或向右移动
 *  \`Ctrl + \`\`：集成终端;
 *  `Ctrl + ,`：设置界面;
 *  `Ctrl + F2`：批量替换当前文件中所有匹配的文本;
 *  `Ctrl + Alt +向上箭头`：复制光标向上或者向上批量添加内容
 *  `Ctrl + Alt +右箭头`：将选项卡交换到不同的组
 *  `Ctrl + Backspace`：删除上一个单词
 *  `Ctrl + T`：通过匹配文本打开文件
 *  `Ctrl + B`：显示/隐藏侧边栏
 *  `Ctrl + P`： 打开扩展管理器
 *  `Ctrl + Home`&`Ctrl + End`：移至文件的开头/结尾
 *  `Alt + 向下箭头`：向上/向下移动一行
 *  `Shift + Alt + 向下箭头`：重复的行;

其中命令面板常用命令：

*  Show running extensions：正在运行的插件
 *  Startup Performance：启动性能

## windows右击菜单配置 ##

只需要替换vscode本地安装路径，保存为`.reg`文件点击运行即可在右击菜单中添加：

Windows Registry Editor Version 5.00
    
    [HKEY_CLASSES_ROOT\Directory\Background\shell\VSCode]
    @="Open VSCode Here"
    "Icon"="C:\\Program Files\\Microsoft VS Code\\Code.exe"
    
    [HKEY_CLASSES_ROOT\Directory\Background\shell\VSCode\command]
    @="C:\\Program Files\\Microsoft VS Code\\Code.exe."
    
    [HKEY_CLASSES_ROOT\Directory\shell\VSCode]
    @="Open VSCode Here"
    "Icon"="C:\\Program Files\\Microsoft VS Code\\Code.exe"
    
    [HKEY_CLASSES_ROOT\Directory\shell\VSCode\command]
    @="C:\\Program Files\\Microsoft VS Code\\Code.exe %1"

## 字体安装 ##

一般选择等宽字体，比如：

*  Source Code Pro ,需要去github[下载源码][Link 1],找到`SourceCodeVariable-Roman.otf`文件下载安装然后在vscode设置

设置Editor:Font Family 值为：`Source Code Variable, 'Source Code Variable Italic'`

![190809-vscode-font-change.png][]

效果：

![190809-vscode-font-change-pre.png][]

*  Menlo
 *  Consolas ：`Consolas, 'Courier New', monospace`
 *  Monaco
 *  Courier New

## vscode必装插件 ##

### atom one dark theme ###

是atom 的主题风格

### vscode great icons ###

文件图标，效果：

![190809-vscode-great-icons.png][]

### settings sync ###

这个是Visual Studio代码设置同步插件,可以同步你的vs code 配置在任何地方使用，非常方便实用,github 地址[https://github.com/shanalikhan/code-settings-sync][https_github.com_shanalikhan_code-settings-sync]

搜索`settings sync`插件安装成功后,需要做两件事：

1.  在Github上创建 Github Token
2.  创建Github Gist Id

首先进入Github的`setting->Developer settings -> Personal access tokens`页面，点击Generate New Token创建

![190810-vscode-sync-03.png][]

选中gist 保存即可生成Token(务必copy一份关闭后不能查看)：

![190810-vscode-sync-05.png][]

然后点击`github`头像选择`Your gist`菜单(要翻墙访问),进入gist,创建gist file:

![190810-vscode-sync-06-create-gist-file.png][]

创建成功后可以看到：

![190810-vscode-sync-07.png][]

点击`vscode-setting-sync`文件可以在url中获取gist id

![190810-vscode-sync-09-gistid.png][]

> 原先取名vscode-setting-sync,同步插件后自动改成cloudSettings

拿到`token id`和`gist id`后，如果是第一次配置，快捷键`Shift + Alt + D`进入插件的主页，选择Edit conifgration：

![190810-vscode-sync-01.png][]

如果不是第一次`Ctrl+Shift+P`打开命令面板,输入`Sync`选择`Advanced Options`再选择打开设置即可进入：

将`token id`和`gist id`填入以下表单中：

![190810-vscode-sync-10-set-token-gistid.png][]

#### 快捷键操作 ####

*  `Shift + Alt + U` 上传配置
 *  `Shift + Alt + D` 下载配置

下载时可以在vs code的output 窗口看见正在安装插件：

![190810-vscode-sync-08-download.png][]

在github gist上可以看见同步的配置，包括：插件，user setting,快捷键设置等都会上传到gist:

![190810-vscode-sync-11-gist-file.png][]

### view in browser ###

浏览器打开网页，安装完右键可以看到`view in browser`菜单，如需设置默认浏览器可以在设置页面搜素`view in browser` 可以配置默认打开的浏览器

![190809-vscode-view-in-browser.png][]

### prettier ###

格式化，使用标准风格，快捷键 alt+shift +F

### beautify ###

美化vscode代码

### markdownlint ###

书写md文件的预览插件

![190809-vscode-markdownlint.png][]

### html snippets ###

html 快捷生成

### markdown pdf ###

markdown 生成pdf插件

## vscode调试net core ##

## vscode调试vue ##

## 常见问题 ##

### vscode乱码 ###

打开 `文件 --> 首选项 --> 设置 --> 搜索设置`,输入`files`找到选项

修改配置:

"files.autoGuessEncoding": false,

改为:

"files.autoGuessEncoding": true,

## 参考 ##

*  [官网：https://code.visualstudio.com][https_code.visualstudio.com]
 *  [文档：https://code.visualstudio.com/docs][https_code.visualstudio.com_docs]
 *  [源码：https://github.com/Microsoft/vscode][https_github.com_Microsoft_vscode]
 *  [Microsoft Visual Studio Code 中文手册][Microsoft Visual Studio Code]  
    
 *  [2018 vscode 前端最佳配置][2018 vscode]  
    
 *  [赵青青-VS Code 资料][-VS Code]
 *  [使用VS Code开发调试.NET Core 2.0][VS Code_.NET Core 2.0]
 *  [使用VsCode编写和调试.NET Core项目][VsCode_.NET Core]

转载于:https://www.cnblogs.com/ricolee/p/vscode.html

[Link 1]: https://github.com/adobe-fonts/source-code-pro/releases
[190809-vscode-font-change.png]: https://img04.sogoucdn.com/app/a/100520146/ad61dcc7e7116faba7348b1546485266
[190809-vscode-font-change-pre.png]: https://img04.sogoucdn.com/app/a/100520146/7073f3b757594657eda43cce4baed7cb
[190809-vscode-great-icons.png]: https://img02.sogoucdn.com/app/a/100520146/7368703219263c156dab4fa33ac52e9b
[https_github.com_shanalikhan_code-settings-sync]: https://github.com/shanalikhan/code-settings-sync
[190810-vscode-sync-03.png]: https://img02.sogoucdn.com/app/a/100520146/c82e52fcf5d0d033efb37fe6e4869378
[190810-vscode-sync-05.png]: https://img04.sogoucdn.com/app/a/100520146/cd974c920a9dae5e1be27e8c6d327447
[190810-vscode-sync-06-create-gist-file.png]: https://img04.sogoucdn.com/app/a/100520146/c06d6a8be5d419516758302fb4afbf9d
[190810-vscode-sync-07.png]: https://img03.sogoucdn.com/app/a/100520146/bdca23aee19665d783a052b800f607a7
[190810-vscode-sync-09-gistid.png]: https://img03.sogoucdn.com/app/a/100520146/1ed338a09121f1b81a47cdb4b9077b61
[190810-vscode-sync-01.png]: https://img02.sogoucdn.com/app/a/100520146/67ae797cf3a0fb3f9595b3f148412d09
[190810-vscode-sync-10-set-token-gistid.png]: https://img02.sogoucdn.com/app/a/100520146/921114b5691a6f136e69154e12c4aefb
[190810-vscode-sync-08-download.png]: https://img03.sogoucdn.com/app/a/100520146/6970a4dd64e3e2c4f3f765f3b2c4094d
[190810-vscode-sync-11-gist-file.png]: https://img03.sogoucdn.com/app/a/100520146/e7e66d8e16f3d8b59edc05d397b32caf
[190809-vscode-view-in-browser.png]: https://img03.sogoucdn.com/app/a/100520146/3ea3f9d2d8bdee2ea322bae16af750ae
[190809-vscode-markdownlint.png]: https://img01.sogoucdn.com/app/a/100520146/908c1654329c56badaa526e25ce496cc
[https_code.visualstudio.com]: https://code.visualstudio.com
[https_code.visualstudio.com_docs]: https://code.visualstudio.com/docs
[https_github.com_Microsoft_vscode]: https://github.com/Microsoft/vscode
[Microsoft Visual Studio Code]: https://jeasonstudio.gitbooks.io/vscode-cn-doc/content/
[2018 vscode]: https://blog.csdn.net/win7583362/article/details/79315055/
[-VS Code]: http://www.cnblogs.com/zhaoqingqing/p/vscode.html
[VS Code_.NET Core 2.0]: http://www.cnblogs.com/linezero/p/7402913.html
[VsCode_.NET Core]: https://www.cnblogs.com/xuanye/p/6720342.html