首页 > 其他分享> 文章详细

vscode学习笔记

2021-08-04 23:02:53 阅读：164 来源： 互联网

标签：插件 vscode Shift 代码 cmd 笔记学习 https shift

学习网站

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

标签：插件,vscode,Shift,代码,cmd,笔记,学习,https,shift
来源： https://www.cnblogs.com/beileixinqing/p/15101187.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vscode学习笔记

学习网站

配置

实用插件

个人配置快捷键