需求

  前端开发中我们最常用的一般是webstorm、hbuilder和sublime,因为以前使用过一段时间eclipse所以我对webstorm的感觉比较良好,再加上以前使用hbuilder维护项目的时候其老是不明原因的崩溃和卡死,所幸后来我就把webstorm作为首选的开发工具了。今天一个朋友问我怎么在webstorm中使用git,我这里也攒了一些webstorm的使用小技巧,所幸就写篇记录文章吧。

导读

  读完这篇笔记你可以学到如下知识:

1.了解git和github的区别
2.学习如何使用webstorm中的git

2.1 如果电脑重装后,如何尽快让webstorm投入生产?

2.2 webstorm是不是自带了git?

2.3 刚进公司,给我个项目怎么配合着现有的ide和git去马上投入生产?

3.webstorm在项目开发中的常用快捷键

  老规矩,我这里也可以直接写如何在webstorm中去配置git,但我觉着那没毛线用,不如把基础打牢再去学配置来得好,如果项目中着急用,那就直接跳着看第三部分。

git和github

  很多做开发的朋友还在混淆一些概念,如git和github。git和github不是同一个概念,git是版本控制工具,而github可以简单理解为一个在线的网络资源分享的仓储地。   

当我们使用git的时候,其实我们可以完全不使用github,当一个目录被git托管以后,会在当前目录下生成一个名为.git的隐藏目录,这时我们就可以对目录中的文件进行conmiit等操作,操作日志都会被记录到这个名为git的隐藏目录中,也就是git不需要联网,你的提交修改都会在本地进行记录,恢复也是从本地进行恢复的。但,这时候弊端就来了,若需要多人合作呢?若本地宕机,磁盘数据丢失呢?

  为了更好的解决楼上遇到的问题,github就出现了,通过push命令我们可以很方便的将本地修改的项目源文件以及日志提交到云端去,交由云端进行保存,而这里所谓的云端就是github,所以现如今我们总会把git和github放在一块去说,如图所示。。。

webstorm中git的配置及开发中常见的故障

  学习这个之前,首先要弄清楚一个概念:

我们为什么能直接在命令行键入git push等命令

  有人回答只要安装了相关程序并且在环境变量中配置了就ok,答案肯定是正确的,并且有人已经帮我们做好了这两步操作点我下载 git for window,当我们安装完这个程序以后在我们的pc中就可以使用命令行方式的git了,现在的问题就是怎么把他集成到我们的webstorm中。

  之前我朋友问我怎么在git上使用webstorm,我说你先安装git,然后用webstorm自带的插件用一下就ok,点点鼠标的问题,他说先试试,最后他给我的结论是他反问我,我没安装git啊?我已经把项目拉下来了。我说好吧,解决问题了就成。那现在问题来了,webstorm中到底有没有集成git,答案是否定的,他之所以能直接拉下来是因为在他安装webstorm之前电脑中已经安装过git了,所以他可以直接这么用,我们都知道webstom上点点鼠标的问题,在git bash中都是对应一个个的命令滴。试问在没有git的情况下你点点鼠标能起作用吗?

  如何将你本机的git和webstorm关联呢?正常情况下只要先安装git再使用webstorm就不需要考虑到这个问题,可是有一种情况就会造成webstorm的git无端失效,那就是当系统崩溃或者重装以后,git环境变量丢失,这时候我们需要来到webstorm菜单下的settings设置中来重新配置一下git路径,如图。

  

ok,若你出现了这个故障,你就这样恢复,若没有略过就好。

给你一个github地址,如果导入到webstorm中

  刚进公司,我就知道几个简单的git命令,刚接触这个项目文档么有,肿么办?负责人说,那你就拉下项目先熟悉熟悉吧?嗯,问题怎么配合着webstorm拉?我只会用命令把他拉到本地的文件夹啊,貌似这么做也行,但你下次提交怎么办?多人pusll怎么办?也用命令?你在webstorm中开发完然后再打开相应文件夹去提交?

  解决方法其实比较简单,只要该项目导入的时候是以git方式导入的,那么对这个项目的后续操作就都是git的方式勒,我们就可以直接在该文件的编辑框中点击右键选择git对该文件进行提交,如图所示,届时所有的操作就都移交给了webstorm,开发效率大大提高。。

webstorm中常用的快捷键

  上面提到过,若给你一个没有文档的项目且文件之间的关联紧密繁多你该如何?这时候就需要用到全局搜索,就是定位一个关键字或者关键词出现在哪个文件中,我们使用ctrl+h快捷键。

  如果文件嵌套很深,如index.html这个文件在a目录下的b文件夹下的c文件夹中,你想要马上打开这个文件该怎么办?我们可以按两下shift键,然后打开搜索框搜索相应的文件名就可以。

  如果我们要同时选中多个不同的文字将他改为同一个关键字你该如何做?替换?替换针对的只是选中相同的关键字,此刻我说的是不同,比如选中字母a和字母b将他替换成c,这时候我们可以使用alt+双击关键字的方法。

  如果你想把a替换到b位置,想把c替换到d位置,且是高频热替换,你该怎么做?傻傻的每次去分别复制a和c然后放到b和d的位置吗?明显效率低下,我们可以使用ctrl+shift+v打开剪贴板,有选择性的进行粘贴,如图。

  上一次我是在a文件中查看了200行的代码,现在我在b文件中查看第300行代码,这两处代码有逻辑上的关联,但是我却忘记了上一次我在何处看了代码,怎么回到a文件的200行呢?我们可以使用alt+左方向键

结尾

  webstorm的其他快捷键网上一搜一箩筐而且对于大多数人来说甚为常见,大家需要的自行搜索就可以,我们公司后端使用java,碰巧eclipse的快捷键也能映射到webstorm中,为了和后端一统,所以上文中我提到的ctrl+h指代的是eclipse映射过来的快捷键。

映射方式:file->settings->keymap 即可。

转载于:https://www.cnblogs.com/54td/p/5939716.html

常见开发需求之前端利器webstorm中的git和快捷键相关推荐

  1. webstorm中使用git合并分支

    前言: webstorm中是有git的插件的,我们这里说下直接用他的git来合并分支 实现目标: feature/ckcs_v1.2. 0分支的内容合并到pre分支上去 实现步骤: 1 切换到pre分 ...

  2. 【Git】Git分支、与gitee平台对接、Fork、Git工作流、在idea中配置Git、分支实战

    文章目录 一 分支 1 分支原理 2 分支实操 3 版本冲突 (1)冲突产生 (2)合并时冲突 (3)解决合并时冲突 二 与平台对接 1 对接流程 2 实战演练 (1)push (2)clone (3 ...

  3. 在 WebStorm 中开发 uni-app - 用vue2实现手机APP(apk) + 微信小程序项目开发方案

    主要是跟vue2相关的开发环境与框架. 本人选型方案 结合自身知识系统(vue2,webstorm),综上相关框架了解,选择了以下方案: 开发环境:HBuilder X  + Webstorm 框  ...

  4. 干货 | 作为前端,工作中处理过什么复杂的需求,如何解决的?

    (多图预警)聊一聊当下发生的事情吧.疫情期间大家都在享受延长假期的福利,吐槽在家办公的不爽,而我们则从过年开始就一直在战斗,到现在还没有好好休息过. 先说背景,我目前在腾讯IMWeb团队,负责在线教育 ...

  5. webstorm安装eslint插件_在WebStorm中使用ESLint开发Vue项目 | 六阿哥博客

    对于习惯使用 IntelliJ IDEA 的玩家,使用 WebStorm 来编写前端代码比使用 Visual Studio Code 更得劲,于是开始折腾... 我使用的 WebStorm 版本是 2 ...

  6. 开发那些事儿:在Flv.js前端播放器中解析并绘制H.264编码中的SEI信息

    流媒体中的SEI是指补充增强信息(Supplemental Enhancement Information),它提供了向视频码流中加入信息的办法,是H.264/H.265视频压缩标准的特性之一.SEI ...

  7. [.net 面向对象程序设计进阶] (27) 团队开发利器(六)分布式版本控制系统Git——在Visual Studio 2015中使用Git...

    [.net 面向对象程序设计进阶] (26) 团队开发利器(六)分布式版本控制系统Git--在Visual Studio 2015中使用Git 本篇导读: 接上两篇,继续Git之旅 分布式版本控制系统 ...

  8. 在 WebStorm 中开发 uni-app

    代码已上传至github github代码地址:https://github.com/Miofly/mio.git CLI 工程 全局安装 vue-cli 3.x(如已安装请跳过此步骤) npm in ...

  9. 五分钟带你了解前端开发,以及前端开发的发展机会

    前端开发 前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术.框架.解决方案,来实现互联网产品的用户界面交互  .它从网页制作 ...

最新文章

  1. 发际线有救了!这款app可一键AI生发,拯救你的自拍焦虑
  2. 从 LRU Cache 带你看面试的本质
  3. 澳大利亚悉尼大学徐畅教授招收深度学习方向全奖博士生
  4. JAVA删除临时文件
  5. 什么是.hpp文件?
  6. 可靠性不是测试出来的,是设计出来的!
  7. Android 测试支持库 1.0 现已发布!
  8. windows服务autofac注入quartz任务
  9. java写便签_如何编写一个便签程序(用Java语言编写)
  10. 学linux需要关闭防火墙,一起学习linux 关闭防火墙命令
  11. sql server 群集_设计有效SQL Server群集索引
  12. c语言线程池源代码下载,C语言实现线程池(示例代码)
  13. 由蔺相如谈谈某些人的娱乐表演
  14. xcopy和robocopy
  15. python读取excel汉字转成拼音_python实现汉字转拼音和读写excel
  16. 微信、QQ上线国产系统UOS:界面曝光
  17. Framework 修改默认输入法
  18. Linux内核TC工具链路带宽设计--无类队列规定
  19. 单片机电路设计中的10个难点
  20. 安卓微信点击链接自动跳出微信在手机自带的浏览器中下载APK文件(IOS无需上架直接跳转 App Store)

热门文章

  1. 软件打开时间、窗体透明度、背景色---《用delphi开发共享软件》-15.1任务管理器...
  2. Percona5.6自身已支持杀死慢SQL
  3. oracle的connect by语句
  4. 血压测量:很重要的事情!
  5. 大量词云出现的时候IO的负担很大
  6. 在家办公效率最高的组合!
  7. 安卓上为什么不能用system.io.file读取streammingAssets目录下的文件
  8. git 与团队协同开发,避免冲掉别人代码的方法
  9. 走在技术前沿的 iOS 架构实现
  10. 哪些CSS是可以被继承的--简单整理