背景:

在 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 前端插件推荐

vscode中自动换行快捷键_VSCode Mac实用快捷键、插件相关推荐

  1. VSCode中一款超级强大的Markdown插件(可修改Markdown预览主题)--MPE

    最近从github上clone了一份学习资料,资料里面很多markdown格式的文档,为了阅读方便,一开始我用sublime导入了这些文档,但我没找到预览功能,网上查到了几个markdown相关的插件 ...

  2. Eclipse 前进一步 快捷键 (eclipse实用快捷键)

    我们在使用eclipse经常会用到后退一步快捷键  Ctrl+Z ,但是很容易就后退过头了,这个时候我们要前进一步. 我在网上搜了一很久也没找到,最后还是问我同事才解决的. 快捷键:Ctrl+ Y 前 ...

  3. vscode中好用的git相关的插件

    git graph可视化各分支的演进情况 gitLens 用来对比两次相邻的commit之间的差别 Git history 如果说gitLens有个缺点就是不好比较不相邻的commit,那么git h ...

  4. mac全选文字的快捷键_最全Mac系统快捷键一览

    苹果Mac系统常用快捷键有很多,但是很多童鞋对于这些mac快捷键都不是很熟悉,今天小编为大家整理了一份Mac系统常用快捷键大全,大家快收藏起来吧!平时在使用mac系统的时候可以提高不少工作效率哦! M ...

  5. mac系统快捷键大全详细介绍

    对于使用苹果电脑的操作系统的新人来说,快捷键是个很麻烦的问题,要一个个的找到快捷键也不是很容易的问题,今天这篇文章就解决了到处找快捷键的麻烦. Mac中主要有四个修饰键,分别是Command,Cont ...

  6. Mac系统快捷键一览

    Mac中主要有四个修饰键,分别是Command,Control,Option和Shift. 这四个键分别有自己的图案,他们经常出现在Mac应用程序中的菜单栏里,方便你随时学习新的快捷键. MAC 键盘 ...

  7. vscode c++插件 下载_vscode安装教程及插件推荐

    Dawn1分钟前 这本篇文章将为大家介绍前端常用编辑软件vscode的安装,与vscode一些好用插件的推荐 首先我给大家介绍一下vscode对比其他编译软件的有着什么优越之处. 第一,vscode它 ...

  8. lldb 调试php,linux系统下如何在vscode中调试C++代码

    本篇博客以一个简单的hello world程序,介绍在vscode中调试C++代码的配置过程. 1. 安装编译器 vscode是一个轻量的代码编辑器,并不具备代码编译功能,代码编译需要交给编译器完成. ...

  9. vscode 怎么让光标一下子跳到行尾部_动图演示23个常用 VsCode 快捷键(Window Mac)...

    作者:Andreas 译者:前端小智 尽管我们经常使用 VS Code中的许多快捷方式,但是我们有可能会忘记它们.这里用可视化制作了一些GIF,以便更好地记住它们,希望对你有所帮助. VSCode中的 ...

  10. Mac下编程的实用快捷键

    Mac的基本常用快捷方式: Command + , 打开偏好设置 Command + shift+3/4 全屏/部分截图快捷键 Command + shift+4 + space 桌面截图快捷键 Co ...

最新文章

  1. 鱼眼镜头标定基本原理及实现
  2. python笔记基础-python基础学习笔记(一)
  3. 这个结构体排序开始没有想到!!
  4. Spring boot maven 搭建框架
  5. angular input使用输入框filter格式化日期
  6. 为什么预估执行计划与真实执行计划会有差异?
  7. kubernetes之CI/CD工具jenkins第二篇,helm的使用
  8. raid -- 分区-- 格式化 --挂载
  9. CSDN《程序员》杂志创始人蒋涛-推荐《程序员职场第一课》
  10. 读完《Effective Java》后我淦了 50 条开发技巧
  11. 拓端tecdat|R语言广义相加(加性)模型(GAMs)与光滑函数可视化
  12. 我的2016(16行走,17前行)
  13. [置顶] 我也来学习nodejs 没有就自己来 色色实现迷你 MVC
  14. 广义线性模型和广义加法模型_广义线性模型代码
  15. 40163 php,微信支付授权获取 openId {quot;errcodequot;:40163,quot;errmsgquot;:quot;code been used, hints:...
  16. python 爬取中国裁判文书网 + 破解字体 JS 加密
  17. WORD2013使用技巧——调整序号中制表位的大小
  18. 三极管参数应用大全(转载)
  19. 数据分析在网络营销中的意义有哪些
  20. VC MFC C++ MQTT VC编译MQTT VC调用MQTT dll eclipse-paho-mqtt

热门文章

  1. 荣耀热键驱动无法安装
  2. python利用tcp搭建小的聊天室带文件传输
  3. mysql中将数字转化成汉字 基础
  4. Firebug教你玩转网页小把戏!
  5. AutoVue 21.0.1新版本特性:支持在没有Applets的浏览器中运行
  6. Metron基础概念
  7. P1488 肥猫的游戏 题解
  8. 【ZZULIOJ】1000: 从今天开始入坑C语言
  9. 谢烟客---------Linux之总结Linux基础
  10. golang的垃圾回收算法之二基本流程代码分析