阿牛博客

Visual Studio Code 使用指南、技巧

用了好久的webstorm了,但最近几天公司电脑不懂搞什么鬼连续蓝屏…,而每次蓝屏后牛逼的webstorm都是各种配置失效,然后又考虑到webstorm平时超吃cpu跟内存,于是换上了耳闻已久的vscode…

用了几天后,感觉果然名不虚传,很好用,很像之前用的sublime_text,各种插件各种装,使用可以很轻量,弄好配置后各种功能和webstorm不相上下,而cpu占比、内存的占用方面也比webstore少了近一半多,然后,果断“弃暗投明”了。下面整理了一些使用插件,技巧等,有需要的朋友可以看看。

插件

1. HTML Snippets:增强了zen-coding,增加了H5的自动补全,可以在不输入 < 的情况下提示;
2. beauTIfy:格式化html,css,js ;

2-1:代码格式化化快捷键 shift+alt+f

2-2.关于vscode更新后 格式化代码造成函数括号后的空格被删除,单引号变双引号问题的解决方法,直接在配置里面做如下配置:

3. vscode-icons:一款很火的图标主题;
4. Crane – PHP Intellisense:PHP代码的自动补全插件;
5. jQuery Code Snippets:一款jQuery重度患者的插件(代码自动补全、提示);
6. css-auto-prefix:自动补全css兼容性插件;
7. Local History:文件历史功能插件;
8. Chinese (Simplified) Language:vscode中文包;
9. vetur:vue文件的语法高亮显示,除了支持template模板以外,还支持大多数主流的前端开发脚本和插件,比如Sass和TypeScript,安装此插件才能使用shift+alt+f快捷键格式化vue文件代码;
10. Vue 2 Snippets:Vue2 片段补全工具;

常用功能(快捷键)

1. Emmet:使用 Tab 自动补全HTML标签
2. Markdown Preview:使用 Ctrl + shift + v预览markdown文件
3. shift + alt + up/down:可以向上/下复制选中内容或者当前行(相当于webstorm的ctrl+d)
4. ctrl+d:将选择添加到下一个查找匹配(相当于webstorm的alt+j)
5. ctrl + shift + N: 新建一个窗口
6. ctrl + W(F4): 关闭编辑器
7. Ctrl+i:选中当前行
8. shift+del :删除当前光标行
9. Ctrl+H:查找替换当前文件某些内容,查找替换目录文件某些内容:选中目录后Ctrl+shift+H
10. ctrl+鼠标右键:代码跳转
11. ctrl+f:在本文件内搜索,ctrl+shift+f:全局搜索文件(选中文件目录)
12. 折叠代码:

12-1.ctrl + k ctrl + 0, 先按下 ctrl 和 K,再按下 ctrl 和 0 ; ( 注意这个是零,不是欧 ):折叠所有区域代码的快捷

12-2.ctrl +k ctrl + J, 先按下 ctrl 和 K,再按下 ctrl 和 J :展开所有折叠区域代码

12-3.ctrl+k ctrl+1~7 是缩代码的级别

12-4.Ctrl+K Ctrl+[ 折叠光标处的所有子区域

12-5.Ctrl+K Ctrl+] 展开光标处的所有子区域

13. shift+alt+a:块注释,shift+ / 块注释 (shift+alt+a和截图工具快捷键冲突,然后自己添的)
14. Ctrl+P:跳转到文件
15. Ctrl+shift+o:跳转到符号,可以跳转到文件中的方括号、大括号、方法等。
16. Ctrl+G:跳转到行,可以跳转到指定行。
17. f1或者Ctrl+Shift+P:命令面板
18. Home、End:移动到行首、行尾
19. Ctrl+Home/End:移动到文档的开头和末尾
20. Ctrl+Shift+K:最Geek的删除方式,当前的可以使用ctrl+x剪切
21. Alt+Shift+F:对整个文档进行格式化
22. f1输入traxxx,调整字符的大小写
23. Alt+然后用鼠标右键点,哪里就会出现一个光标
24. Ctrl+P:输入你要打开的文件名,回车打开(快速打开文件)

主题更换

1. 图标主题:Ctrl+shift +p 打开命令面板,输入 icon theme 后回车,选择一个即可。
2. 颜色主题:Ctrl+shift +p 打开命令面板,输入 color theme 后回车,选择一个即可。

异常处理

vscode启动后占用cup100%的解决:
在VScode中文件->选项->置,搜索”search.followSymlinks”:true,然后设置为false

vs Code打开新的文件会覆盖窗口中的,怎么改:
“workbench.editor.enablePreview”: false

php部分插件

vscode中使用php-cs-fixer格式化PHP代码(win10系统)
1. PHP IntelliSense:php语法提示
2. PHP Intelephense:php格式化

给个赞() 踩一下()

温馨提示:本站文章除注明转载外,均为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知 识的误导,同时有更好的阅读体验。

本文链接: http://aniublog.com/archives/632

上一篇: vue项目的各种优化 » 下一篇: h5-用户canvas签名 »