Hello大家好,今天兔妞给大家带来的是一个好物分享——VSCode,这是兔妞经常用的一个软件,为什么介绍它,因为它是最受欢迎的开发环境,它免费!开源!轻量!快速!哈哈,废话不多说,让我们来看看怎样用它提高效率吧~首先介绍一下VSCode的快捷键,然后为大家简单介绍一些前端开发者常用的插件。
❈
VSCode快捷键(Mac版)
1)系统通用:
Command + X 剪切(未选中文本的情况下,剪切光标所在行)
Command + C 复制(未选中文本的情况下,复制光标所在行)
Command + V 粘贴
Shift + tab 缩进
2)VSCode基本功能: Option + Up/Down 向上/下移动行 Option + Shift + Up/Down 向上/下复制行 Command + Shift + K 删除行 Command +(shift)+ Enter (上)下一行插入 Command + Shift + 跳转到匹配的括号 Command + [ 减少缩进 Command + ] 增加缩进 Command + Up/Down 跳转至文件开头/结尾 Command + / 添加、移除行注释 Option + Shift + A 添加、移除块注释 Option + Z 自动换行、取消自动换行
Option + 点击 插入多个光标 Command + Option + Up/Down 向上/下插入光标 Command + U 撤销上一个光标操作 Option + Shift + I 在所选行的行尾插入光标 Command + I 选中当前行 Command + Shift + L 选中所有与当前选中内容相同部分 Alt + Shift + 拖动鼠标 选中代码块 Command + Shift + Option + Up/Down 列选择 向上/下 Command + Shift + Option + Left/Right 列选择 向左/右
3)查找替换 Command + F 查找 Command + Option + F 替换 Command + G 查找下一个 Command + Shift + G 查找上一个 Option + Enter 选中所有匹配项 Command + D 向下选中相同内容 Command + K Command + D 移除前一个向下选中相同内容
这些快捷键总结的并不全,确实最常用的,小伙伴们记住大多数就能提高不少开发效率呢~
❈
❈
前端常用的插件
1)Auto Close Tag:自动闭合HTML/XML标签
2)Auto Rename Tag:自动完成另一侧标签的同步修改
3)Beautify:格式化代码,值得注意的是,beautify插件支持自定义格式化代码规则
4)Bracket Pair Colorizer:给括号加上不同的颜色,便于区分不同的区块,使用者
可以定义不同括号类型和不同颜色
5)Debugger for Chrome:映射vscode上的断点到chrome上,方便调试
6)ESLint:js语法纠错,可以自定义配置,不过配置较为复杂,建议使用网上一些广
泛使用的eslint配置
7)GitLens:方便查看git日志,git重度使用者必备
8)HTML CSS Support:智能提示CSS类名以及id
9)HTML Snippets:智能提示HTML标签,以及标签含义
10)JavaScript(ES6) code snippets:ES6语法智能提示,以及快速输入,不仅仅支
持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间
11)jQuery Code Snippets:jQuery代码智能提示
12)Markdown Preview Enhanced:实时预览markdown,markdown使用者必备
13)markdownlint:markdown语法纠错
14)open in browser:vscode不像IDE一样能够直接在浏览器中打开html,而该插件支
持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,
包括:Firefox,Chrome,Opera,IE以及Safari
15)Path Intellisense:自动提示文件路径,支持各种快速引入文件
16)React/Redux/react-router Snippets:React/Redux/react-router语法智能提示
17)Vetur:Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格
式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开发者必备。
❈