JavaScript 开发工具webstrom使用指南

看到网上一篇介绍webstrom的文章,觉得功能确实强大,也知道为什么阿里巴巴的前端传到github上的文件为啥都有一个 .idea 文件,(传说淘宝内部推荐写js用webstrom)

我们可以理解 IDE 就是集成了很多你想要的功能,或者你不想要的功能。换句话说就是装了很多插件的 editor ,所以到目前为止,我还觉得没必要给它装什么插件。

那么接下来开始介绍webstrom的特色功能

WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具

任何一个编辑器都需要保存(ctrl + s),这是所有win平台上编辑类软件的特点,但是webstorm编辑文件右上角是没有那个熟悉的 * 的。
好处:省去了ctrl + s之后,在结合Firefox的vim,基本不动鼠标就可以看到结果页面了。
坏处:没有以前的 * 标识,万一键盘误操作也会被立即存储。
任何一个编辑器只要文件关闭了就没有历史记录了,但是webstorm有。 vcs->Local History -> Show History(快捷键:ALT+~ -〉7)
好处:只要webstorm不关闭,你的文件随时可以返回到之前的操作(这也是为啥在 webstorm 里ctrl+y是删除一行的原因了)。
坏处:webstorm关闭重启后这些历史记录就没有了;还有一个坏处就是由此带来的内存消耗也必然比较大。
任何一个编辑器,除了服务器svn之外,没有本地版本,但是webstorm提供一个本地文件修改历史记录(快捷键:ALT+SHIFT+c)。也可以 Ctrl + E 弹出最近打开的文件。
好处:相当于本地svn。
坏处:内存消耗也必然比较大。
集成了zencoding,html5,ftp,即时编辑(chrome),自动完成,基于Mozilla的JavaScript调试器,JSLint、Less支持、CoffeeScript支持、Node.JS、单元测试、集成git和svn版本控制等特性。
在编写CSS中,会智能的提示各种文件以及图片的路径,就不用再去确认这个文件是否存在了。
其他的特性就介绍了,想了解更多可以去webstrom官网继续寻找。看完了这么介绍以及那么多给力的特性,是不是有种冲动马上试一试这款传说中的前端神器啊?嗯。

首先在官方下载页下载webstrom后,点击安装,然后一直下一步,最后会出现需要注册码界面,因为webstrom是商业的IDE,而天朝的屌丝前端当然没那么钱去买那么昂贵的神器了,不用担心,我们可以用WebStorm的密钥来学习使用这款前端神器。嘿嘿~~~~

安装成功后,肯定会有些不适,就像我一样觉得这配色真的太戳了。还有一些设置也不是我也要的。那么以下我就列出我习惯的设置。

webstorm安装后的一些设置技巧

如何更改主题(字体&配色):
File -> settings -> Editor -> colors&fonts -> scheme name.主题下载地址
如何让webstorm启动的时候不打开工程文件:
File -> Settings->General去掉Reopen last project on startup.
如何完美显示中文:
File -> Settings->Appearance中勾选Override default fonts by (not recommended),设置Name:NSimSun,Size:12
如何显示行号:
File -> Settings->Editor,”Show line numbers”打上勾,就显示行号了
如何代码自动换行:
File -> settings -> Editor “Use Soft Wraps in editor” 打上钩,代码就自动换行了
如何点击光标,显示在本行末尾:
File -> Settings->Editor “Allow placement of caret after end of line”去掉勾就行了。
如何修改快键键:
File -> Settings->Keymap,然后双击要修改快捷的功能会有提示框出来,按提示操作
换成自己熟悉编辑器的快键键:
File ->Settings->Keymap,支持像Visual Studio、Eclipse、NetBeans这样的主流IDE。
javascript类库提示。
File -> settings -> Javascript -> Libraries -> 然后在列表里选择自己经常用到的javascript类库,最后Download and Install就ok了.
在开发js时发现,需要ctrl + return 才能选候选项:
File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion: “Smart” 改为 “Always”
js提示比较迟缓
File -> Code Completion -> Autopopup in 下 1000改为0
git配置:
File -> settings -> Editor -> github,进去改github的账户,如果没有git则不需要.
插件安装:
File ->plugins,然后就选择给力的插件们再安装.(“css-X-fire”插件,用于当使用firebug修改css属性时,编辑器内的css代码也会发生变化。)
以后更新

webstorm使用心得

收藏夹功能:

当工程目录很庞大时,有些子目录很经常打开,但层级又很深,这时候可以把目录添加到收藏夹里面,添加成功后,左侧有个“Favorites”菜单

面包屑导航:

除了左侧的工程页面,可以选择目录之外,在顶部菜单下有一个类似网站面包屑导航一样的目录也可以实现相同功。点击每个目录就会有下拉菜单显示其下的子目录,很实用.

构造器界面:

注释符合格式的话就会出现。如果是js文件则是js类的函数和对象;css文件的话则是这个css文件的概括;html文件的话则是节点的结构图。话说这几个就是为了方便查看代码的结构性.

todo界面:

给代码加todo注释就会出现这个界面

双栏代码界面:

右击代码选项卡上的文件,然后右键 -> spilt vertically(左右两屏)或者spilt horizontally(上下两屏)

本地历史功能:
找回代码的好办法

git使用

webstorm中只集成了git的常用操作,并不能完全替代命令行工具。在界面的右下角可以查看处于哪个git分支。也可以在上面点击切换或者新建分支。

查看当前代码与版本库代码的差异:

右击代码界面任意区域,选择git -> compare with然后选择要比较的版本库。

webstorm的快捷键说明:

Editing编辑相关快捷键

Ctrl + Space:
Basic code completion (the name of any class, method or variable) 基本代码完成(任何类、函数或者变量名称),改为Alt+S
Ctrl + Shift + Enter:
Complete statement 补全当前语句
Ctrl + P:
Parameter info (within method call arguments) 参数信息 包括方法调用参数
Ctrl + mouse over code
Brief Info 简单信息
Ctrl + F1
Show description of error or warning at caret 显示光标所在位置的错误信息或者警告信息
Alt + Insert
Generate code…(Getters, Setters, Constructors)新建一个文件或者生成代码,…构造函数,可以创建类里面任何字段的getter与setter方法
Ctrl + O
Override methods 重载方法
Ctrl + I
Implement methods 实现方法
Ctrl + Alt + T
Surround with…(if, else, try, catch, for, etc)用 * 来围绕选中的代码行,( * 包括 if 、 while 、 try catch 等)
Ctrl + /
Comment/uncomment with line comment 行注释/取消行注释
Ctrl + Shift + /
Comment/uncomment with block comment 块注释/取消块注释
Ctrl + W
Select successively increasing code blocks 选择代码块,一般是增量选择
Ctrl + Shift + W
Decrease current selection to previous state 上个快捷键的回退,减量选择代码
Alt + Q
Context info 上下文信息
Alt + Enter
Show intention actions and quick-fixes 意图行动,快速见效
Ctrl + Alt + L
Reformat code 根据模板格式对代码格式化
Tab/ Shift + Tab
Indent/unindent selected lines 对所选行进行缩排处理/撤销缩排处理
Ctrl + X or Shift + Delete
Cut current line or selected block to clipboard 剪切当前行或所选代码块到剪切板
Ctrl + C or Ctrl + Insert
Copy current line or selected block to chipboard 拷贝当前行或者所选代码块到剪切板
Ctrl + V or Shift + Insert
Paste from clipboard 粘贴剪切板上的内容
Ctrl + Shift + V
Paste from recent buffers 粘贴缓冲器中最新的内容
Ctrl + D
Duplicate current line or selected block 复制当前行或者所选代码块
Ctrl + Y
Delete line at caret 删除光标所在位置行
Ctrl + Shift + J
Smart line join(HTML and JavaScript only)加入智能行 (HTML 和JavaScript)
Ctrl + Enter
Smart line split(HTML and JavaScript only)分离智能行 (HTML 和JavaScript)
Shift + Enter
Start new line 另起一行
Ctrl + Shift + U
Toggle case for word at caret or selected block 光标所在位置大小写转换
Ctrl + Shift + ]/[
Select till code block end/start 选择直到代码块结束/开始
Ctrl + Delete
Delete to word end 删除文字结束
Ctrl + Backspace
Delete to word start 删除文字开始
Ctrl + NumPad+/-
Expand/collapse code block 扩展/缩减代码块
Ctrl + Shift+ NumPad+
Expand all 扩张所有
Ctrl + Shift+ NumPad-
Collapse 缩减所有
Ctrl + F4
Close active editor tab 关闭活跃编辑标签
Search/replace搜索/替代相关快捷键

Ctrl + F
Find 当前文件内快速查找代码
Ctrl + Shift + F
Find in path 指定文件内寻找路径
F3
Find next 查找下一个
Shift + F3
Find previous 查找上一个
Ctrl + R
Replace 当前文件内代码替代
Ctrl + Shift + R
Replace in path 指定文件内代码批量替代
Usage Search搜索相关快捷键

Alt + F7/Ctrl + F7
Find usages/Find usages in file 找到使用/在文件找到使用
Ctrl + Shift + F7
Highlight usages in file文件中精彩使用
Ctrl + Alt + F7
Show usages 显示使用
Running运行

Alt + Shift + F10
Select configuration and run 选择构架,运行
Alt + Shift + F9
Select configuration and debug 选择构架,修补漏洞
Shift + F10
Run 运行
Shift + F9
Debug 修补漏洞
Ctrl + Shift + F10
Run context configuration from editor 从编辑运行内容构架
Ctrl + Shift + X
Run command line 运行命令行
Debugging Debugging相关快捷键

F8
Step over 不进入函数
F7
Step into 单步执行
Shift + F7
Smart step into 智能单步执行
Shift + F8
Step out 跳出
Alt + F9
Run to cursor 运行到光标处
Alt+ F8
Evaluate expression 评估表达
F9
Resume program 重新开始程序
Ctrl + F8
Toggle breakpoint 切换断点
Ctrl + Shift + F8
View breakpoints 查看断点
Navigation 定位相关快捷键

Ctrl + N
Go to class跳转到指定类
Ctrl + Shift + N
Go to file 通过文件名快速查找工程内的文件
Ctrl + Alt +Shift + N
Go to symbol 通过一个字符查找函数位置
Alt + Right/ left
Go to next/ previous editor tab 进入下一个/ 上一个编辑器选项
F12
Go back to previous tool window 进入上一个工具窗口
Esc
Go to editor(from tool window) 从工具窗口进入编辑器
Shift + Esc
Hide active or last active window 隐藏活动窗口
Ctrl + Shift + F4
Close active run/message/find/…tab 关闭活动….标签
Ctrl + G
Go to line 跳转到第几行
Ctrl + E
Recent files popup 弹出最近打开的文件
Ctrl + Alt + Left/Right
Navigate back/forward 导航前进/后退
Ctrl + Shift + Backspace
Navigate to last edit location 向最近编辑定位导航
Alt + F1
Select current file or symbol in any view 查找当前选中的代码或文件在其他界面模块的位置
Ctrl + B or Ctrl + Click
Go to declaration跳转到定义处
Ctrl + Alt + B
Go to implementation(s) 跳转方法实现处
Ctrl + Shift + B
Go to type declaration 跳转方法定义处
Ctrl + Shift + I
Open quick definition lookup 打开定义快速查找
Ctrl + U
Go to super-method/super-class 跳转方法/超阶级
Alt + Up/Down
Go to previous/next method 在方法间快速移动定位
Ctrl + ]/[
Move to code block end/start 跳转到编码块结束/开始
Ctrl + F12
File structure popup 文件结构弹出
Ctrl + H
Type hierarchy 类型层次
Ctrl + Alt + H
Call hierarchy 调用层次结构
F2/ Shift + F2
Next/previous highlighted error 跳转到后一个/前一个错误,高亮错误或警告快速定位,使用这个快捷键可以快捷在出错的语句之间进行跳转。
F4/Ctrl + Enter
Edit source/ View source 编辑源代码/查看源代码
Alt + Home
Show navigation bar 显示导航栏
F11
Toggle bookmark 切换标记
Ctrl + F11
Toggle bookmark with mnemonic 采用记忆切换标记
Ctrl + #[0-9]
Go to numbered bookmark 跳转到带编号的标记
Shift + F11
Show bookmark 显示标记
Refactoring 重构相关快捷键

F5
Copy 拷贝
F6
Move 移动
Alt + Delete
Safe Delete 安全删除
Shift + F6
Rename 重新命名
Ctrl + Alt + N
Inline Variable 嵌入变量
Ctrl + Alt + M
Extract Method( Javascript only) 提取函数
Ctrl + Alt + V
Introduce Variable 引入变量
Ctrl + Alt + F
Introduce Field 引入域
Ctrl + Alt + C
Introduce Constant 引入常量
VCS/Local History 版本控制系统/ 本地历史相关快捷键

Alt + BackQuote( )
‘VCS'quick popup 快速弹出 VCS
Ctrl + K
Commit project to VCS 提交项目至VCS
Ctrl + T
Update project from VCS 从VCS 更新项目
Alt + Shift + C
View recent changes 查看最新改变
General 常用的相关快捷键

Ctrl + Shift +A
Find action 查找并调用编辑器的功能
Alt + #[0-9]
Open corresponding tool window 快速切换打开界面模块
Ctrl + Alt + F11
Toggle full screen mode 切换全屏模式
Ctrl + Shift + F12
Toggle maximizing editor 切换最大化编辑器
Alt + Shift + F
Add to Favorites 将当前文件添至收藏夹
Alt + Shift + I
Inspect current file with current profile 使用当前属性检查当前文件
Ctrl + BackQuote( )
Quick switch current scheme 快速转换现有组合
Ctrl + Alt + S
Open setting dialog 打开设置对话框
Ctrl + Tab
Switch between tabs and tool window 标签和工具窗的转换(与windows快捷键冲突)

小伙伴们是不是已经对这款javascript的开发工具webstrom有所认识了呢,迫不及待的想去试试呢,保证你用了之后就爱不释手。

(0)

相关推荐

  • 最锋利的Visual Studio Web开发工具扩展:Web Essentials使用详解

    首先,从Extension Manager里安装:最新版本是19号发布的2.5版 然后重启你的VS开发环境,就可以使用它提供的方便功能了. Web Essentials对CSS.JavaScript和HTML都提供了很多快捷的功能支持,具体列表如下: CSS 即时预览Live Web Preview 每次修改的时候,都可以使用CTRL+ALT+Enter快捷键或者点击方案右键上的Live Web Preview选项来即时预览你修改的页面,每次修改完 HTML或者相应的CSS, Ctrl+S保存以

  • 十个免费的web前端开发工具详细整理

    十个免费的web前端开发工具 网络技术发展迅速,部分技术难以保持 每年都有新的工具出现,这同时也意味着许多旧的工具倒在了新技术的发展之路上. 前端开发占据了web很大一部分,而且也成为了一种职业路径.如果你将前端开发当做自己的又一新技术或者作为一个可发展事业,你需要为这个工作准备合适的工具. 我将要分享我的十大现代必备的前端开发工具.它们都完全免费而且大多数工具能帮助你建立令人惊叹的网站. 1. Grid Guide 特性: 快速生成栅格 首先我要介绍的是Grid.Guide,一款免费的网页应用

  • Web前端开发工具——bower依赖包管理工具

    Bower 是 twitter 推出的一款包管理工具,基于nodejs的模块化思想,把功能分散到各个模块中,让模块和模块之间存在联系,通过 Bower 来管理模块间的这种联系. 包管理工具一般有以下的功能: a)注册机制:每个包需要确定一个唯一的 ID 使得搜索和下载的时候能够正确匹配,所以包管理工具需要维护注册信息,可以依赖其他平台. b)文件存储:确定文件存放的位置,下载的时候可以找到,当然这个地址在网络上是可访问的. c)上传下载:这是工具的主要功能,能提高包使用的便利性.比如想用 jqu

  • Js+Dhtml:WEB程序员简易开发工具包(预先体验版)

    复制代码 代码如下: <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html;charset=gb2312'> <META name='Gemeratpr' content='网络程序员伴侣(Lshdic)2005_开拓版'> <TITLE>LD5工具</TITLE> <style> *{font-size:12px;font-family:宋体}

  • JavaScript 开发工具webstrom使用指南

    看到网上一篇介绍webstrom的文章,觉得功能确实强大,也知道为什么阿里巴巴的前端传到github上的文件为啥都有一个 .idea 文件,(传说淘宝内部推荐写js用webstrom) 我们可以理解 IDE 就是集成了很多你想要的功能,或者你不想要的功能.换句话说就是装了很多插件的 editor ,所以到目前为止,我还觉得没必要给它装什么插件. 那么接下来开始介绍webstrom的特色功能: WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具 任何一个编辑

  • 分享9个最好用的JavaScript开发工具和代码编辑器

    Web设计和开发是现今越来越流行的职业方向之一.工欲善其事,必先利其器,如果你想在这个领域出类拔萃,那么你就必须具备一些优秀的技能,例如能操作不同的平台.IDE和其他各种各样的工具. 谈到平台和IDE,现在已经不是以前那个掌握一个IDE就能"一招鲜吃遍天"的时代了.激烈的竞争以及蔓延到现在的集成开发环境.基于IDE是用于创建和部署应用程序的强大客户端应用程序,下面我们要分享的就是对于很多网页设计师和开发人员而言,最好的JavaScript 开发工具. 若有不同见解,敬请不吝赐教. 1)

  • 最全的JavaScript开发工具列表 总有一款适合你

    简介 2017年1月,Stack Overflow年度开发者调研一共访问了64000个程序员,发现Java已经连续5年成为最流行的编程语言. 构建 & 自动化 Webpack对Java应用依赖的所有模块进行静态分析,生成依赖图,然后将它们打包成数个静态文件. Grunt以将重复耗时的任务自动化.Grunt的生态系统非常大,有超过6010个插件. Gulp发布于Grunt之后,采用了完全不同的方式,使用Java函数定义任务.它有超过2770个插件,并且提供了更好的控制. Browserify使得开

  • MongoDB开源数据库开发工具dbKoda

    Southbank Software公司最近发布了 dbKoda 0.6.0 ,这是该软件的 首个发布版 .dbKoda是一款开源的 MongoDB 开发工具,采用JavaScript. React 和 Electron 开发.下图显示了dbKoda的用户图形界面,突出特点是提供了一个连接管理器(Connection Manager)和代码编辑器(Code Editor),其中代码编辑器给出了丰富的MongoDB数据操作特性. 连接管理器 连接管理器维护多个数据库连接的配置信息(Profile)

  • [JAVA]十四种Java开发工具点评

    在计算机开发语言的历史中,从来没有哪种语言象Java那样受到如此众多厂商的支持,有如此多的开发工具,Java菜鸟们如初入大观园的刘姥姥,看花了眼,不知该何种选择.的确,这些工具各有所长,都没有绝对完美的,就算是老鸟也很难做出选择.在本文中我简要介绍了常见的十四种Java开发工具的特点,管中窥"器",希望能对大家有所帮助. 1.JDK (Java Development Kit) 2.Java Workshop 3.NetBeans 与Sun Java Studio 5 4.Borlan

  • JavaScript开发规范要求(规范化代码)

    本人在开发工作中就曾与不按规范来开发的同事合作过,与他合作就不能用"愉快"来形容了.现在本人撰写此文的目的除了与大家分享一点点经验外,更多的是希望对未来的合作伙伴能够起到一定的借鉴作用.当然,如果我说的有不科学的地方还希望各路前辈多多指教.下面分条目列出各种规范要求,这些要求都是针对同事编码毛病提出来的,好些行业约定的其它规范可能不会再提及. 1.保证代码压缩后不出错 对于大型的JavaScript项目,一般会在产品发布时对项目包含的所有JavaScript文件进行压缩处理,比如可以利

  • Visual Studio 2010 前端开发工具/扩展/插件推荐

    怎么样让Visual Studio更好地编写HTML5, CSS3, JavaScript, jQuery,换句话说就是如何更好地做前端开发.Visual Studio 2010不管是旗舰版还是免费版都没有对前端开发方面做充分的优化.不要希望VS默认安装这些东西,我们有很多VS的扩展可是使用. 这里列出的大多数扩展都可以使用Extension Manager (Tools > Extension Manager)来安装,你可以通过Visual Studio Gallery网站下载这些扩展. We

  • 再推荐十款免费的php开发工具

    下面介绍10个免费.强大的PHP编辑器/开发工具.这些编辑器拥有调试器.增量执行PHP脚本.查看每一行的所有变量值等功能. 1) Notepad ++ Notepad++是一款非常有特色的编辑器,是开源软件,可以免费使用.支持的语言: C, C++, Java , C#, XML, HTML, PHP, Javascript!  功能有: 1. Notepad内置支持多达 27 种语法高亮度显示(囊括各种常见的源代码.脚本,值得一提的是,完美支持.nfo 文件查看),也支持自定义语言: 2. N

  • php开发工具有哪五款

    由于最近小编要自学php,所以整理了一些常用的php开发工具,给大家分享一下: 1.EditPlus     EditPlus是一套功能强大,可取代记事本的文字编辑器,拥有无限制的Undo/Redo.英文拼字检查.自动换行.列数标记.搜寻取代.同时编辑多文件.全屏幕浏览功能.对于很多php程序来说,EditPlus 非常简单好用.同时EditPlus也是一款好用的HTML编辑器,除了可以颜色标记HTML Tag (同时支持C/C++.Perl.Java)外,还内建完整的HTML和CSS1指令功能

  • 初学java常用开发工具介绍

    Java的应用越来越广泛,学习Java的人也越来越多.学过程序设计的人知道,使用Basic进行程序设计,可以使用QBasic.Visual Basic等开发工具:使用C语言进行程序设计,可以使用Turbo C.Visual C++.C++ Builder等开发工具.这些开发工具集成了编辑器和编译器,是集成开发工具,很方便使用.学习Java程序设计,同样需要方便易用的开发工具.Java的开发工具很多,而且各有优缺点,初学者往往不知道有哪些常用的开发工具,或者由于面临的选择比较多而产生困惑.本文对初

随机推荐