VSCode Mac实用快捷键、插件

10次阅读

共计 1674 个字符,预计需要花费 5 分钟才能阅读完成。

背景:
在 Build 2015 大会上,微软除了发布了 Microsoft Edge 浏览器和新的 Windows 10 系统外,最大的惊喜莫过于宣布推出免费跨平台的 Visual Studio Code 编辑器了!随着 2019 年的到来,Stack Overflow 对 2018 年的 IT 生态调查显示:Visual Studio Code 超过 Visual Studio 一跃成为榜首,成为“最受欢迎的开发环境”,没有之一!

Visual Studio 与 Visual Studio Code 区别: Visual Studio 是集成开发环境,只能运行在 windows + mac OS;Visual Studio Code 是一款编辑器,支持跨平台,在所有操作系统运行;
本文档主要分享 VSCode 在 Mac 操作系统,React 技术栈开发的实用快捷键 及 插件;
实用快捷键
1.command + K, command + S 打开快捷键编辑页;
说到 VSCode 不得不提的快捷键指令,可以查看、设置快捷键;
自定义快捷键:如我们写代码时定义常量需要用全大写,快速切换选中变量的大小写的快捷键很实用,个人设置如下:
command + K, command + U 变大写
command + K, command + L 变小写
2.command + P 快速打开文件;
不用点击左侧树形菜单,键盘操作快速找到待编辑文件;
3.command + = 和 command + - 组合来进行缩放;
快捷键调整字体大小,快速切换到自己最舒服的字体尺寸;
4.command + , 打开用户设置;
VSCode 设置包括用户设置(全局),和工作区(当前项目)设置,因为我们开发项目对应的技术栈可能不同,所以推荐使用工作区设置。React 开发推荐工作区设置:
{

// 设置 react render 中 react 标签智能提示, 快速补全 html

“emmet.includeLanguages”: {

“javascript”: “javascriptreact”

},

// 设置 react render 中 html 代码可折叠

“editor.foldingStrategy”: “indentation”

}
5.control + ~ 打开、关闭终端;
React 前端开发,编译脚本、样式等是必不可少的操作,可在当前开发区中快速打开当前项目路径下的终端,输入指令完成前端文件编译。
编辑器内打开终端编译,不用切换窗口可大大提高开发体验:

支持多终端窗口,前后端运行指令同屏显示:

6. 其他;
其他日常编码常用快捷键:
command + shift + N 打开新窗口;
command + N 新建文件;
command + 切出新编辑器(最多三个)
command + W 关闭当前文件
command + S 保存当前文件
command + option + S 保存所有文件
command + F 当前文件查找
command + option + F 当前文件替换
command + D 当前文件查找选中单词下一目标
command + C 复制
command + V 粘贴
command + X 剪切
command + Z 回退
command + shift + Z 前进
command + shift + K 删除当前行代码
option + ↓ 当前行代码下移
option + ↑ 当前行代码上移
shift + option + ↓ 当前行代码整行拷贝到下一行
shift + option + F 格式化代码
强烈推荐的快捷键,特别适用于统一前端小组成员代码风格。
不同的人,写 JS 缩进、空格等不一样,如果小组统一使用 VSCode 后每个人都习惯用该快捷键格式化代码,将更利于代码维护。
前端代码不需插件就能支持 go to defination,鼠标移动至变量名 或 文件名,command + 单击 即可跳转至对应文件:

实用插件
VSCode 的插件非常多,但个人觉得真正实用的插件有:
Auto Close Tag
自动添加 HTML / XML 关闭标签(必备)

Path Intellisense
自动提示文件路径,在 HTML 使用 a 标签的 href 或者 require, import 新文件时能智能提示;

参考链接:vscode: Visual Studio Code 常用快捷键在用 VSCode? 看完这篇文章, 开发效率翻倍!vscode 前端插件推荐

正文完
 0