VS常用插件

VS官网工具下载

常用插件
Chinese (Simplified) Language Pack for Visual Studio Code
Chinese (Simplified) Language Pack for Visual Studio Code是VSCode的中文插件,方便广大国人。

Settings Sync
Settings Sync是VSCode的配置同步插件,你可以将已配置好的VSCode配置环境通过GitHub账号生成唯一编码(Gist ID),你需要自己保存好该编码,当你更换了电脑或者重装了系统后,可根据该Gist ID还原之前的配置。

Auto Close Tag
Auto Close Tag顾名思义,即为自动关闭标签,对于HTML/XML很实用。

Auto Rename Tag
Auto Rename Tag与上一个插件类似,为自动重命名标签,当修改HTML/XML标签时,会自动修改与之对应的开始/结束标签。

Beautify
Beautify为自动格式化代码插件,可以格式化JSON|JS|HTML|CSS|SCSS,比内置格式化好用;但是react工程的jsx文件用beautify插件格式化会乱掉,建议不要用。

Bracket Pair Colorizer
Bracket Pair Colorizer,在代码中有很多括号的情况下,这个插件可以做一个颜色的区分,代码一目了然。

JetBrains-like Keymap
JetBrains-like Keymap为VSCode的按键映射插件,习惯使用jetBrains公司的编辑器

ESLint
ESLint为代码检查工具,必备。

Vetur
Vetur为开发Vue项目所使用的插件,主要功能为语法高亮、智能感知、Emmet等。

Vue.js Extension Pack
开发中需要用到的Extension打包成一个合集,基本上开发的时候下载对应的Extension Package就能较好的支持vue.js

Open in Browser
安装此插件,在浏览器中查看我们的程序运行效果。

Live Server 实时预览
按Ctrl+S保存,修改效果就会实时同步,显示在浏览器

Highlight Matching Tag 高亮显示匹配标签
自动帮我们将选中的匹配标签高亮显示

Vscode-icons VSCode
根据不同的文件类型生成对应的图标

TODO Highlight 高亮
快速定位到需要修改的代码行

Code Spell Checker 单词拼写检查
自动识别单词拼写错误并且给出修改建议

Code Runner 运行选中代码段
直接运行对应语言的代码

Improt Cost 成本提示
提示导入包的体积,方便线上优化

GitLens 查看Git信息
显示当前行最近的commit信息和作者

Bookmarks 书签
进行书签标记,快速跳转

拓展插件的使用
Vscode-element-helper
自动提示element-ui组件库标签

Version Lens 工具包版本信息
package.json中显示你下载安装的npm工具包的版本信息,同时会告诉你当前包的最新版本

WakaTime 计算代码工作量
计算每日的编程代码量

Best Dark Themes Pack
编辑器的颜色主题

常用快捷键
编辑器与窗口管理
Ctrl+Shift+P: 打开命令面板。

Ctrl+Shift+N: 新建窗口。

Ctrl+Shift+W: 关闭窗口。

切分窗口:Ctrl+1/Ctrl+3/Ctrl+3

Ctrl+H:最小化窗口

Ctrl+B:显示/隐藏侧边栏

Ctrl+"+/-":放大/缩小界面

文件操作
Ctrl+N:新建文件

Ctrl+W:关闭文件

Ctrl+Tab:文件切换

格式调整
Ctrl+C/Ctrl+V:复制或剪切当前行/当前选中内容

Alt+Up/Down:向上/下移动一行

Shift+Alt+Up//Down:向上/下复制一行

Ctrl+Delete:删除当前行

Shift+Alt+Left/Right:从光标开始向左/右选择内容

代码编辑
Ctrl+D:选中下一个相同内容

Ctrl+Shift+L:选中所有相同内容

Ctrl+F:查找内容

Ctrl+Shit+F:在整个文件夹中查找内容

解决无法在"只读编辑器打开"
VS常用插件

参考网站