VsCode使用技巧

vscode介绍文章请移步:前端啊!你是时候换一款轻量的强大的漂亮的体验一致的代码编辑器了——Visual Studio Code

前言

vscode是一款跨平台的代码编辑器,她轻量、美观、一致、功能完整,自带完美git支持,非常适合前端同学使用。
下面总结下我对于这个软件的使用技巧,希望对大家有帮助。

快捷键

注意:当下列快捷键不起作用时,请考虑是否是其他软件已经占用了快捷键,如输入法、聊天软件等

vscode内置了emmet,使用tab键可快速编写html/css等,具体请查询emmet语法说明

快捷键备注
Ctrl + N新建文件
Ctrl + S保存文件
Ctrl + F在当前文件内查找
Ctrl + H在当前文件内替换
Ctrl + Shift + F在文件内查找
Ctrl + Shift + H在文件内替换
Ctrl + Tab切换文档
Ctrl + PgUp/PgDn向前/向后切换文档
Ctrl + 1/2/3切换分栏
Ctrl + P转到文件
Ctrl + P转到文件
Ctrl + G转到行,输入行号,转到该行号处
Ctrl + =/-
Ctrl + 鼠标滚轮
缩放编辑器显示比例
Ctrl + F1在浏览器中打开当前正在编辑的html文件,这个功能需要插件支持,安装插件:View In Browser
F12转到定义,可跳转到变量定义处,定义较为复杂时,会找不到
F1打开命令输入框
Shift + Alt + F格式化代码
Ctrl + Alt + Up/Down/Left/Right 按区域选中代码,并编辑
Alt + Up/Down移动光标所在行或者光标选中代码的位置
Alt + Left/Right 前进后退操作历史,这个历史不是编辑历史(Ctrl + Z/Y操作的是编辑历史),它包含如:第一步,光标在12行6列处;第二步,光标在20行10列处;第三步,打开另外一个文件。
Shift + Alt + Up/Down 复制光标所在行至上一行或下一行
Alt + 光标选中光标多选,同时编辑

扩展/插件

vscode支持扩展,官方商店里有很多扩展,网址:https://marketplace.visualstu…
安装方式:点击编辑器左侧的【扩展】按钮,在搜索框中输入你想要安装的插件,点击安装即可。

推荐插件

链接名称备注
查看Path Intellisense在编辑器中输入路径时,自动补全
查看Auto Close Tag自动补全html标签,如输入<a>将自动补全</a>
查看Auto Rename Tag自动重命名html标签,如修改<a><b>,将自动修改结尾标签</a></b>
查看REST Client在编辑器中发送http请求,可直接得到结果,测试接口时很有用处,用法请看插件详情
查看Easy LESS自动编译less文件(文件保存后自动变为为同名.css文件),如果你只是想用less,而又不想配置grunt等工具来使用它时,请使用这个插件,他绝对是更效率的
查看View In BrowserCtrl + F1在浏览器中打开正在编辑的html文件
查看vscode-icons为文件添加炫酷的图标,图标种类很全,包括各种配置文件、常见语言、常见js框架等,你值得拥有;安装后,需要使用管理员权限启动vscode,并打开命令输入框(F1或者Ctrl+Shift+P)执行Icons Enable
查看JS-CSS-HTML-formatter格式化代码
查看vscode-caniusecaniuse 检查HTML特性支持情况
查看vscode-todo检查列举代码中的//TODO:标识

今天就整理这么多吧,后续有新的使用心得还会更新。

    原文作者:SQL
    原文地址: https://segmentfault.com/a/1190000006091018
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞