写在前面

　　　在前端开发中，有一个非常好用的工具，Visual Studio Code，简称VS code。

　　　都不用我安利VS code，大家就会乖乖的去用，无数个大言不惭的攻城狮，都被VS code比德芙还丝滑的强大功能所折服。

　　　我是来给大家安利插件的，想做个比较全面的插件集合给大家。网上的我也看过一些，但是都比较零散，时间也久了一些，我结合最近的情况，总结一下

　　　造福大家，才是我想做的。手动比心❤。

正文

一.日常安利　VS code

　VS vode特点：

开源，免费；
自定义配置
集成git
智能提示强大
支持各种文件格式（html/jade/css/less/sass/xml）
调试功能强大
各种方便的快捷键
强大的插件扩展

对前端这么友好，没理由不用。

Visual Studio Code（VScode ）官网　：https://code.visualstudio.com/

Visual Studio Code（VScode ）github地址：https://github.com/Microsoft/vscode

二.怎么安装插件？

点击图中位置

三.插件合集

插件官网：https://marketplace.visualstudio.com/

　　每一个插件名都超链接到官网，注意查看

a.配置类插件：

1.Settings Sync

最好用的插件，没有之一，一台电脑配置好之后，其它的几台电脑都不用配置。新机器登录一下就搞定了。再也不用折腾环境了，

使用GitHub Gist同步多台计算机上的设置，代码段，主题，文件图标，启动，键绑定，工作区和扩展。

2.Debugger for Chrome

从VS Code调试在Google Chrome中运行的JavaScript代码。

用于在Google Chrome浏览器或支持Chrome DevTools协议的其他目标中调试JavaScript代码的VS Code扩展。

3.beautify

格式化代码工具

美化javascript，JSON，CSS，Sass，和HTML在Visual Studio代码。

4.Atuo Rename Tag

修改 html 标签，自动帮你完成头部和尾部闭合标签的同步修改

5.中文（简体）语言包

Chinese (Simplified) Language Pack for Visual Studio Code

将界面转换为中文，对英语不好的人，非常友好。例如我。。。

6.Code Spell Checker

代码拼写检查器

一个与camelCase代码配合良好的基本拼写检查程序。

此拼写检查程序的目标是帮助捕获常见的拼写错误，同时保持误报数量较低。

7.vscode-icons

显示Visual Studio代码的图标，目前该插件已被vscode内部支持："文件" -> "首选项" -> "文件图标主题"

8.guides

显示代码对齐辅助线，很好用

9.Rainbow Brackets

为圆括号，方括号和大括号提供彩虹色。这对于Lisp或Clojure程序员，当然还有JavaScript和其他程序员特别有用。

效果如下：

10.Bracket Pair Colorizer

用于着色匹配括号

11.Indent-Rainbow

用四种不同颜色交替着色文本前面的缩进

12.filesize

在状态栏中显示当前文件大小，点击后还可以看到详细创建、修改时间

13.Import Cost

对引入的计算大小

14.Path Intellisense

可自动填充文件名。

15.WakaTime

从您的编程活动自动生成的度量标准，见解和时间跟踪。

16.GitLens

git日志查看插件

GitLens 增强了 Visual Studio Code 中内置的 Git 功能。例如 commits 搜索，历史记录和和查看代码作者身份，还能通过强大的比较命令获得有价值的见解等等

17..REST Client

REST客户端允许您直接发送HTTP请求并在Visual Studio Code中查看响应。

18.Npm Intellisense

用于在 import 语句中自动填充 npm 模块

require 时的包提示（最新版的vscode已经集成此功能）

19.Azure Storage

VS Code的Azure存储扩展允许您部署静态网站并浏览Azure Blob容器，文件共享，表和队列。按照本教程从VS Code部署Web应用程序到Azure存储。

20.Project Manager

它可以帮助您轻松访问项目，无论它们位于何处。不要再错过那些重要的项目了。您可以定义自己的收藏项目，或选择自动检测VSCode项目，Git，Mercurial和SVN存储库或任何文件夹。

从版本8开始，您就有了专门的项目活动栏！

以下是Project Manager提供的一些功能：

将任何项目保存为收藏夹
自动检测VSCode，GIT中，水银或SVN存放区
在相同或新窗口中打开项目
识别已删除/重命名的项目
一个状态栏标识当前项目
专门的活动栏

21.Language Support for Java(TM) by Red Hatredhat.java

这个插件，这个下载次数，安装就对了。

22.Todo Tree

此扩展可以快速搜索（使用ripgrep）您的工作区以获取TODO和FIXME等注释标记，并在资源管理器窗格的树视图中显示它们。单击树中的TODO将打开文件并将光标放在包含TODO的行上。

找到的TODO也可以在打开的文件中突出显示。

b.VS code 主题集合

1.Night Owl

一个非常适合夜猫子的 VS Code 主题。像是为喜欢深夜编码的人精心设计的。

2.Atom One Dark Theme

一个基于Atom的黑暗主题

3.Dracula Official

官方吸血鬼主题，博主用的就是这款，很漂亮

4.One Dark Pro

Atom标志性的One Dark主题，也是VS Code下载次数最多的主题之一！

5.Bimbo

简约而现代的神奇海洋主题

c.代码提示提示类

1.HTML Snippets

完整的HTML代码提示，包括HTML5

2.HTML CSS Support

在 html 标签上写class 智能提示css样式

3.jQuery Code Snippets

jQuery代码提示

超过130个用于JavaScript代码的jQuery代码片段。

只需键入字母'jq'即可获得所有可用jQuery代码片段的列表。

4.HTMLHint

html代码检测，支持html5

d.语言相关

1.C＃

适用于.NET Core的轻量级开发工具。
伟大的C＃编辑支持，包括语法突出显示，智能感知，转到定义，查找所有引用等。
调试支持.NET Core（CoreCLR）。注意：不支持单声道调试。桌面CLR调试支持有限。
支持Windows，macOS和Linux上的project.json和csproj项目。

2.CodeMetrics

计算TypeScript / JavaScript文件的复杂性。

3.VUE插件

　　vetur 　　语法高亮、智能感知、Emmet、vue提示等

　　VueHelper 　　snippet代码片段

ESLint 　　将ESLint JavaScript集成到VS代码中。代码规范提示

　　prettier 代码规范性插件

4. Java Extension Pack

它是一组流行的扩展，可以帮助在Visual Studio Code中编写，测试和调试Java应用程序。查看VS Code中的Java以开始使用。

Visual Studio Code的插件功能真的是强大到爆裂，还有仕么有意思的插件，欢迎大家在评论区补充；

快捷键（只列出了很小一部分常用快捷键）

通用

Ctrl+Shift+P, F1 打开命令面板
Ctrl+P 快速打开文件
Ctrl+Shift+N 打开新窗口/实例
Ctrl+Shift+W 关闭窗口/实例
Alt+Shift+R 打开所在文件夹

基础编辑

Ctrl+X 剪切当前行
Ctrl+C 复制当前行
Alt+ ↑ / ↓ 向上/向下移动当前行
Shift+Alt + ↓ / ↑ 向上/向下复制当前行
Ctrl+Shift+K 删除当前行
Ctrl+Enter 在当前行以下插入
Ctrl+Shift+Enter 在当前行以上插入
Ctrl+Shift+\ 跳转到匹配的括号
Ctrl+] / [ 缩进/取消缩进
Home 转到行首
End 转到行尾
Ctrl+Home 转到页首
Ctrl+End 转到页尾
Ctrl+↑ / ↓ 向上/向下滚动
Alt+PgUp / PgDown 向上/向下翻页
Ctrl+Shift+[ 折叠当前代码块
Ctrl+Shift+] 展开当前代码块
Ctrl+K Ctrl+[ 折叠所有子代码块
Ctrl+K Ctrl+] 展开所有子代码块
Ctrl+K Ctrl+0 折叠所有代码块
Ctrl+K Ctrl+J 展开所有代码块
Ctrl+/ 添加/删除行注释
Shift+Alt+A 添加/删除块注释

导航

Ctrl+T 显示所有符号
Ctrl+G 跳转到行
Ctrl+P 跳转到文件
Ctrl+Shift+O 跳转到符号
Ctrl+Shift+M 显示问题面板
F8 跳转到下一个问题或警告
Shift+F8 跳转到前一个问题或警告
Ctrl+Shift+Tab 显示编辑器文件历史
Alt+ ← / → 向后/向前查看文件
Ctrl+M 开启/关闭 Tab 移动焦点

搜索和替换

Ctrl+F 查找
Ctrl+H 替换
F3 / Shift+F3 查找下一个/前一个
Alt+Enter 选择所有匹配项
Ctrl+D 选择下一个匹配项
Ctrl+K Ctrl+D 跳过当前选择项
Alt+C / R / W 切换大小写敏感/正则表达式/全词

多光标与选择

Alt+Click 插入光标
Ctrl+Alt+ ↑ / ↓ 向上/向下插入光标
Ctrl+U 撤销上一个光标
Shift+Alt+i 在选中行的行尾插入光标
Ctrl+i 选择当前行
Ctrl+Shift+L 选择当前选中项的所有匹配项
Ctrl+F2 选择当前单词的所有匹配项
Shift+Alt+→ 扩展选择
Shift+Alt+← 缩小选择
Shift+Alt + (drag mouse) 列（框）选择
Ctrl+Shift+Alt + (arrow key) 列（框）选择
Ctrl+Shift+Alt +PgUp/PgDown 向上页/下页列（框）选择

富语言编辑

Ctrl+Space 打开建议
Ctrl+Shift+Space 打开参数提示
Tab Emmet 展开缩写
Shift+Alt+F 格式化文档
Ctrl+K Ctrl+F 格式化选择区域
F12 跳转到定义
Alt+F12 打开窗口显示定义
Ctrl+K F12 打开侧边栏显示定义
Ctrl+. 快速解决
Shift+F12 显示引用
F2 重命名符号
Ctrl+Shift+ . / , 替换为下一个/上一个值
Ctrl+K Ctrl+X 删除行尾空格
Ctrl+K M 更改文本语言

编辑管理

Ctrl+F4, Ctrl+W 关闭编辑的文件
Ctrl+K F 关闭文件夹
Ctrl+\ 拆分编辑器窗口
Ctrl+ 1 / 2 / 3 切换到第一、第二或第三个窗口
Ctrl+K Ctrl+ ←/→ 切换到上一个/下一个窗口
Ctrl+Shift+PgUp /PgDown 向左/向右移动编辑的文件
Ctrl+K ← / → 向左/向右移动编辑窗口

修改默认快捷键

打开默认键盘快捷方式设置：
File -> Preferences -> Keyboard Shortcuts，或者：Alt+F -> p -> k

修改 keybindings.json：

// Place your key bindings in this file to overwrite the defaults
[// ctrl+d 删除一行{"key": "ctrl+d","command": "editor.action.deleteLines","when": "editorTextFocus"},// ctrl+shift+/多行注释{"key":"ctrl+shift+/","command": "editor.action.blockComment","when": "editorTextFocus"},// 定制与 sublime 相同的大小写转换快捷键{"key": "ctrl+shift+u","command": "editor.action.transformToUppercase","when": "editorTextFocus"},{"key": "ctrl+shift+l","command": "editor.action.transformToLowercase","when": "editorTextFocus"}
]

Visual Studio Code（VS code）简单使用入门以及常用快捷键相关推荐

独家对话微软顶级代码女神潘正磊：Visual Studio 与 VS Code 的未来走向 | 人物志...
题图.作者 | 唐小引出品 | CSDN(ID:CSDNnews) Visual Studio 到今天,已经有 22 年的光景,因为它强大的功能和支持几乎大部分语言的开发.丰富的扩展插件等,中国开发 ...
独家对话微软顶级代码女神潘正磊：Visual Studio 与 VS Code 的未来走向 | 人物志
题图.作者 | 唐小引出品 | CSDN(ID:CSDNnews) Visual Studio 到今天,已经有 22 年的光景,因为它强大的功能和支持几乎大部分语言的开发.丰富的扩展插件等,中国开发 ...
Visual Studio和VS Code的区别
1.Visual Studio简介: 是一个集成开发环境--IDE,安装完成后就能直接用,编译工具,调试工具,各个语言的开发工具,都是已经配置好的,开箱即用.适用于macOS/Windows 2.VS ...
Visual Studio和VS Code自定义文件扩展名映射
Visual Studio和VS Code自定义文件扩展名映射自定义文件扩展名映射可以让Visual Studio和VS Code将一种扩展名识别为另一种扩展名,以便增加对原扩展名文件的语法高亮和智 ...
LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理
LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭建方法的简单整理目录 LVGL 之 windows 上 lvgl 模拟器基于 Visual Studio 搭 ...
Visual Studio Code快速删除空行及几个常用快捷键总结
在使用notepad++工具的时候,很多情况下我们会遇到批量替换空行的操作,之前的操作方法是快捷键Crtl+h调出窗口选择替换栏,在查找目标栏中输入\r\n\r\n,替换为栏中输入\r\n并选择全部 ...
visual studio和vs code 哪个好用，适用于哪个阶段
Visual Studio 和 Visual Studio Code 都是很不错的开发工具,但它们的适用范围不同. Visual Studio 是一个功能强大的集成开发环境 (IDE),拥有强大的代码 ...
LINQ to SQL 在 Visual Studio 2008 中的简单应用
在.Net Framework 3.5 中,最激动人心的就是增加了LINQ功能,LINQ在数据集成的基础上提供了新的轻型方式.有了LINQ,我们创建的查询现在就编程了.Net 框架的一个成员,在对要操 ...
初识C++与Visual Studio（3）——解决方案资源管理器及常用项目属性介绍
一.解决方案资源管理器使用方法解决方案资源管理器是陪伴你C++项目一辈子的东西,要是不小心隐藏了,可以在"视图"里面的"解决方案管理器"找到: 我一般喜欢将& ...
Visual Studio 2005/2008/2010 简单更换配色主题（转自：http://apit.blogbus.com/logs/84846293.html）
其实原来也没有什么简单的办法直到出现了这个站点, studiostyles 这个站点以导出的设置形式来提供支持 VS 2005/2008/2010的配色方案,并且有一个非常方便的工具用来制作自己的配色 ...

Visual Studio Code（VS code）简单使用入门以及常用快捷键

写在前面

一.日常安利　VS code

快捷键（只列出了很小一部分常用快捷键）

修改默认快捷键

Visual Studio Code（VS code）简单使用入门以及常用快捷键相关推荐

最新文章

热门文章

Visual Studio Code（VS code）简单使用入门以及常用快捷键

写在前面

一.日常安利 VS code

快捷键（只列出了很小一部分常用快捷键）

修改默认快捷键

Visual Studio Code（VS code）简单使用入门以及常用快捷键相关推荐

最新文章

热门文章

一.日常安利　VS code