有⽤的vscode快捷键⼤全+⾃定义快捷键
VS Code是前端的⼀个⽐较好⽤的代码编辑器,但是我们不能⽼是局限于⿏标操作呀,有时候很不⽅便,所以呢,快捷键⼤全来啦,有的可能会和你们电脑⾃带的快捷键冲突呢,这时候,你⾃⼰设置⼀下就好了呀
⼀、vs code 的常⽤快捷键列表
1、注释:
1、注释
  a) 单⾏注释:[ctrl+k,ctrl+c] 或 ctrl+/
  b) 取消单⾏注释:[ctrl+k,ctrl+u] (按下ctrl不放,再按k + u)
  c) 多⾏注释:[alt+shift+A]
  d) 多⾏注释:/**
移动⾏:alt+up/down
2、
2、移动⾏
隐藏左侧⽬录栏 ctrl + b
3、显⽰/隐藏左侧⽬录栏
4、
复制当前⾏:shift + alt +up/down
4、复制当前⾏
5、删除当前⾏
删除当前⾏:shift + ctrl + k
5、
6、控制台终端显⽰与隐藏
控制台终端显⽰与隐藏:ctrl + ~
6、
插件地址:ctrl + p
7、查⽂件/安装vs code 插件地址
代码格式化:shift + alt +f
8、
8、代码格式化
9、新建⼀个窗⼝: ctrl + shift + n
9、新建⼀个窗⼝
10、⾏增加缩进: ctrl + [
10、⾏增加缩进:
11、⾏减少缩进: ctrl + ]
11、⾏减少缩进:
12、裁剪尾随空格(去掉⼀⾏的末尾那些没⽤的空格
12、裁剪尾随空格(去掉⼀⾏的末尾那些没⽤的空格)) : ctrl + shift + x
缩⼩: ctrl + ( + 或 - )
13、字体放⼤/缩⼩:
14、拆分编辑器 :ctrl + 1/2/3
14、拆分编辑器 :
15、切换窗⼝:  ctrl + shift + left/right
15、切换窗⼝
16、关闭编辑器窗⼝:  ctrl + w
16、关闭编辑器窗⼝
17、关闭所有窗⼝ : ctrl + k + w
17、关闭所有窗⼝ :
18、切换全屏 :F11
18、切换全屏 :
19、⾃动换⾏:  alt + z
19、⾃动换⾏
20、显⽰git:  ctrl + shift + g
21、全局查⽂件:ctrl + p
21、全局查⽂件:
22、显⽰相关插件的命令(如:git log)
22、显⽰相关插件的命令(如:git log):ctrl + shift + p
23、选中⽂字:shift + left / right / up / down
23、选中⽂字
24、折叠代码: ctrl + k + 0-9 (0是完全折叠)
24、折叠代码
25、展开代码
25、展开代码: ctrl + k + j (完全展开代码)
26、删除⾏ : ctrl + shift + k
26、删除⾏
27、快速切换主题:ctrl + k / ctrl + t
27、快速切换主题
28、快速回到顶部 : ctrl + home
28、快速回到顶部
29、快速回到底部 : ctrl + end
29、快速回到底部
30、格式化选定代码 :ctrl + k / ctrl +f
30、格式化选定代码
31、选中代码 :
31、选中代码 : shift + ⿏标左键
32、多⾏同时添加内容(光标) :ctrl + alt + up/down
32、多⾏同时添加内容(光标) :
33、全局替换:ctrl + shift + h
33、全局替换:
34、当前⽂件替换:
34、当前⽂件替换:ctrl + h
35、打开最近打开的⽂件:ctrl + r
35、打开最近打开的⽂件:
36、打开新的命令窗:ctrl + shift + c
36、打开新的命令窗:
37、⾃动⽣成闭合标签:
37、⾃动⽣成闭合标签:VsCode内置了Emmet语法,在后缀为.html/.css中输⼊缩写后按Tab键即会⾃动⽣成相应代码
请注意在VsCode新版本中按Tab不再默认启⽤Emmet展开缩写!需要在⾸选项配置中将iggerExpansionOnTab设置为true值!
E 代表HTML标签。
E#id 代表id属性。E.class 代表class属性。E[attr=foo] 代表某⼀个特定属性。
E{foo} 代表标签包含的内容是foo。
E>N 代表N是E的⼦元素。
E+N 代表N是E的同级元素。
E^N 代表N是E的上级元素。
⼆、vs code 的常⽤插件
1、Auto Rename Tag 修改html标签,⾃动帮你完成尾部闭合标签的同步修改,和webstorm⼀样。
1、Auto Rename Tag
2、Auto Close Tag
2、Auto Close Tag ⾃动闭合HTML标签
4、Beautiful 格式化代码的⼯具
4、Beautiful
5、Dash Dash是MacOS的API⽂档浏览器和代码段管理器
6、Ejs Snippets ejs 代码提⽰
7、ESLint 检查javascript语法错误与提⽰
8、File Navigator 快速查⽂件
8、File Navigator
9、Git History(git log)查看git log
9、Git History(git log)
10、Gulp Snippets 写gulp时⽤到,gulp语法提⽰。
11、HTML CSS Support  在HTML标签上写class智能提⽰当前项⽬所⽀持的样式
12、HTML Snippets 超级好⽤且初级的H5代码⽚段以及提⽰
13、Debug for Chrome让vs code映射chrome的debug功能,静态页⾯都可以⽤vscode来打断点调试、配饰稍微复杂⼀点
13、Debug for Chrome
14、Document this Js的注释模板
15、jQuery Code Snippets jquery提⽰⼯具
16、Html2jade html模板转pug模板
16、Html2jade
17、JS-CSS-HTML Formatter
17、JS-CSS-HTML Formatter 格式化
18、Npm intellisense require 时的包提⽰⼯具
18、Npm intellisense
19、Open in browser 打开默认浏览器
19、Open in browser
20、One Dark Theme ⼀个vs code的主题
20、One Dark Theme
21、Path Intellisense ⾃动路径补全、默认不带这个功能
21、Path Intellisense
22、Project Manager多个项⽬之间快速切换的⼯具
22、Project Manager
23、Pug(Jade) snippets pug语法提⽰
24、React Components 根据⽂件名创建反应组件代码。
25、React Native Tools reactNative⼯具类为React Native项⽬提供了开发环境。
console命令大全
26、Stylelint css/sass代码审查
27、Typings auto installer
27、Typings auto installer 安装vscode 的代码提⽰依赖库,基于typtings的
28、View In Browser 默认浏览器查看HTML⽂件(快捷键Ctrl+F1可以修改)
28、View In Browser
29、Vscode-icons 让vscode资源⽬录加上图标、必备
30、VueHelper Vue2代码段(包括Vue2 api、vue-router2、vuex2)
30、VueHelper
31、Vue 2 Snippets vue必备vue代码提⽰
32、Vue-color vue语法⾼亮主题
32、Vue-color
33、Auto-Open Markdown Preview markdown⽂件⾃动开启预览
34、EverMonkey 印象笔记
35、atom one dark atom的⼀个⾼亮主题(个⼈推荐)
36、GitLens 显⽰每⼀⾏代码是谁写的,⽅便查看代码更改记录沟通
三、常⽤的电脑快捷键
1、ctrl + shift + delete 快速清除浏览器缓存
2、ctrl + alt + delete 快速进⼊任务管理器页⾯
2、ctrl + alt + delete
3、window + L  快速锁定电脑
4、window + d  所有窗⼝最⼩化
5、 window + e  打开我的资源管理器(我的电脑)
6、 window + f  快速打开搜索窗⼝
7、 alt + tab快速查看打开的应⽤与窗⼝
7、 alt + tab
借鉴别⼈的博客的啦。。。。。。
四、这是我在后期使⽤中得到的⼀些⼩快捷,很好⽤哦
每次在代码调试的时候都需要输⼊console.log(),但是每次都要敲好多字
⽂件---⾸选项---⽤户代码⽚段----搜 javaScript ,进⼊JavaScript.json,可以⾃定义好多有⽤的快捷键,下⾯这个例⼦就是打出c然后tab就乐意直接出来console.log(‘’)啦
"Print to console": {
"prefix": "c",
"body": [
"console.log('$1')"
],
"description": "Log output to console"
}

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。