vscode学习笔记

前言

最近vscode编辑器在前端程序员中使用越来越频繁了，既然大家都在用，说明它一定是香的，身为webstorm党，也得赶紧跟进潮流，这是我这几天学习vscode看过的文章和视频，大家把这些文章和视频看完，基本就都差不多了。下面同时总结了适用于我自己的插件和快捷键，供大家参考学习。

学习网站

配置

  • 配置代码片段：设置-用户代码片段，配置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，就可以把这段代码提取为一个单独的函数。

 

posted @ 2021-08-04 22:50  蓓蕾心晴  阅读(353)  评论(0)  编辑  收藏  举报