vscode学习笔记

Posted 2021-08-04 Apple

学习网站

• [插件学习](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，就可以把这段代码提取为一个单独的函数。