vscode学习笔记
前言
最近vscode编辑器在前端程序员中使用越来越频繁了，既然大家都在用，说明它一定是香的，身为webstorm党，也得赶紧跟进潮流，这是我这几天学习vscode看过的文章和视频，大家把这些文章和视频看完，基本就都差不多了。下面同时总结了适用于我自己的插件和快捷键，供大家参考学习。
学习网站
- [插件学习](https://www.bilibili.com/video/BV1Ww411R7MV?from=search&seid=8142609753744898305)
- [插件学习]（https://www.bilibili.com/video/BV1Dp4y1x7TJ?from=search&seid=14587794723193295964）
- [键盘侠养成-崔效瑞](https://www.bilibili.com/video/BV15v41177FB)
- [键盘侠养成-崔效瑞] (https://juejin.cn/post/6844904099880632328)
- [VScode快捷键(超无敌详细版) ](https://blog.csdn.net/qq_45261963/article/details/108695261)
- [第一次使用VS Code时你应该知道的一切配置：](https://www.cnblogs.com/qianguyihao/p/10732375.html)
- 史上最全vscode配置使用教程 [https://zhuanlan.zhihu.com/p/113222681)
- [vscode 函数没有引入提示_没有用过这些插件，别说你在用vscode！](https://blog.csdn.net/weixin_42338883/article/details/112422715)
- [通过配置 VSCode 来提高生产力](https://zhuanlan.zhihu.com/p/64021066)
配置
- 配置代码片段：设置-用户代码片段，配置html/js/css等快速通过某个指令生成对应的代码片段，$1是占位，代表生成代码后，光标 直接定位到对应位置，每行代码都用双引号括起来，用逗号链接，并转义
- 快速打开扩展安装：command+p,输入ext install
实用插件
- Material Theme:各种主题插件
- Bracket Pair Colorizer：不同对的大括号显示不同颜色
- Indent Rainbow：对不同对的大括号显示不同背景颜色的区分（个人不太喜欢凌乱，没有使用）
- prettier:代码自动格式化，配置保存自动格式化
- chinese：显示中文
- Auto Rename Tag:html标签自动匹配修改
- live server :启动本地http服务，且保存自动刷新页面，底部go live 启动本地浏览器
- Live Sass Compiler:监听scss文件改动并实时编译为css，配合live server更加好用,保存自动更新css文件，底部watch scss启动scss监听
- File Utils：新建文件、文件夹等，命令输入 File: New File， File: New Folder
- JavaScript (ES6) code snippets：ES6语法提示
- ES7 React/Redux/GraphQL/React-Native snippets：各类语法快速生成
- open in browsers：支持右键打开浏览器
- browser preview：vscode内部浏览器打开，免去切换到浏览器的麻烦，安装后在编辑器左侧边栏找到快捷按钮
- guides：显示代码对齐辅助线
- htmlhint：html标签嵌套错误提示
- vscode-icons：文件图标，安装好后点击右下角设置选择文件主题图标
- import-cost：行尾显示导入的包大小(但是安装后不显示，不知道什么原因)
- path intellisense：文件引用路径提示
- carbon-now-sh：把代码生成图片，command+shift+p：搜索carbon
- Project Manager：项目管理，安装好后点击左侧边栏最下边文件夹的图标，可以保存打开的项目到favirate，以后可以在这里直接选择自己已经保存好的项目打开
- GitLens :可以显示每一行代码的作者，提交时间，以及commit信息，在想要知道哪行代码是谁改动的时候非常的实用
- Git History：git log查看
- Settings Sync ：提供了同步个人设置的功能，当我们需要换电脑进行开发时，比如回家用自己的电脑，或者换了新的电脑，该插件可以帮你同步之前做的设置，不需要在每台电脑上都重新设置一次（需要登录）
- Markdown Preview Enhanced ：超级强大的 Markdown 插件
- Document This：输入/**，生成注释（不安装的情况下，默认会有jsdoc的注释生成）
- compareit:文件对比
- minapp：小程序必备
- Local History：本地文件历史记录，召回本地修改
- Regex Previewer：实时预览正则表达式的效果
- Auto Import：有了这个插件，就不需要再手动引入文件了。如果是基于组件的项目，直接输入组件名插件会自动处理 imported
- CSS Peek：在html标签上显示自身包含的css
- Docker：有了这个插件可以在离线情况下创建 Dockerfiles。它还提供了语法高亮、自动补全等功能，按 CMD + SHIFT + P 搜索 Add Docker files
个人配置快捷键
注意：以下快捷键基于vscode默认快捷键的基础上进行了部分修改，有部分按照个人webstorm快捷键使用习惯配置，且为mac按键。
快捷键 作用
编辑器操作：
cmd+J 打开控制台
Cmd + Option + 左右方向键：在已经打开的多个文件之间进行切换
cmd+P 快速打开最近打开的文件
cmd+Shift+P,F1 展示全局命令面板
cmd+Shift+N 打开新的编辑窗口
cmd+Shift+W 关闭编辑器
cmd + shift + =/- 视图放大 / 缩小
enter 重命名
cmd + W 关闭编辑器
cmd + \ 切割编辑窗口
cmd + 1/2/3 切换焦点在不同的切割窗口
cmd + N 新建文件
cmd + O 打开文件
cmd + S 保存文件
cmd + Shift + S 另存为
cmd + shift + C 打开当前文字所在路径下的终端
cmd + B 侧边栏显示隐藏
cmd + Shift + G 打开Git可视管理
cmd + Shift + D 打开DeBug面板
cmd + Shift + X 打开插件市场面板
cmd + Shift + V 预览Markdown文件【编译后】
Ctrl + ` 打开集成终端
Ctrl + Shift + ` 创建一个新终端
CMD + , 打开设置
代码操作：
option + 左右方向键/Ctrl + 左右方向键 在单词之间移动光标
Cmd + 左右方向键/Fn + 左右方向键 在整行之间移动光标
cmd + X 剪切
cmd + D 删除当前行
cmd + C 复制
/** 生成jsdoc的注释
Alt + up/down 移动上下行
cmd + Alt + up/down 上下复制当前行
cmd + Enter 在当前行下插入新的一行
cmd + Shift + Enter 在当前行上插入新的一行
cmd + Shift + \ 匹配花括号的闭合处，跳转
cmd + ] / [ 行缩进
Home(fn+上) 光标跳转行头
End(fn+下) 光标跳转行尾
cmd + 上 跳转页头
cmd + 下 跳转页尾
cmd + - 折叠区域代码
cmd + = 展开区域代码
cmd + alt + - 折叠所有区域代码
cmd + akt + = 展开所有区域代码
cmd + / 添加行注释
Ctrl + shift + / 删除行注释
alt +Ctrl + L 选中变量后生成打印变量值的console.log（需安装插件）
alt + shift + C 注释所有生成的log
alt + shift + U 放开所有注释的log
alt + shift + D 删除所有生成的log
cmd + L 跳转行
cmd + F 查询
cmd + H 替换
cmd + shift + H 所有文件中替换
F3 / Shift + F3 查询上一个/下一个
Alt + Enter 选中所有出现在查询中的
cmd + shift+L 匹配当前选中的词汇或者行，再次选中-可操作
Alt + Click 插入光标-支持多个
cmd + Z 撤销
cmd + Y 回退
Shift + Alt + F 格式化代码
Shift + F12 + Fn 显示所有引用
鼠标三击，选中当前行
cmd+ shift + Y 转换单词为首字母大写
cmd+ shift + I 转为单词为全大写
cmd+ shift + O 转为单词为全小写
fn+shift+F12 选中函数名，查找函数在哪里被引用
重构：
命名重构：选中变量名或函数名，按下Fn+F2,所有用到的地方都会被重命名
方法重构：选中某一段代码，ctrl+shift+R，就可以把这段代码提取为一个单独的函数。