常用插件
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 书签
进行书签标记,快速跳转
koroFileHeader
用于生成文件头部注释和函数注释的插件
然后在setting.json中添加下列代码
"fileheader.customMade": {
"Author": "YZX",
"Date": "Do not edit",
"LastEditors": "YZX",
"LastEditTime": "Do not edit",
"Description": ""
}
拓展插件的使用
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:在整个文件夹中查找内容
解决无法在"只读编辑器打开"