WebStorm使用技巧

原文:WebStorm使用技巧

WebStorm是一个捷克公司开发的,功能虽然很强大,但UI貌似一直不是东欧人的强项。WebStorm默认的编辑器颜色搭配不算讲究,我看习惯了VS2012的Dark Theme,再看这个顿觉由奢入俭难,非得改改颜色才行。

 

新建Scheme + 修改字体

ctrl+alt+s打开Settings界面,Editor > Colors&Fonts > Font。

Default scheme是亮色调,但我想定制一套暗背景的环境,所以在右侧Scheme name下拉框中选择Monokai,以此作为修改的基础,然后点击Save as,给自己新建的Scheme起个名字吧,如下图:

这里面可以设置字体(我一般选择Consolas),字体大小,行间距。

 

自定义语法高亮

用ctrl+alt+s打开Settings界面,Editor > Colors&Fonts。

不同语言有各自的语法高亮规则,但有一部分是通用的(General),我们首先来设置General,然后再根据需要设置不同语言的语法高亮。

General的设置

普通文本:default text

折叠文本: Folded text

光标: Caret

光标所在行: Caret row

行号: Line number

TODO: TODO default

光标下变量高亮:Search result

搜索结果:Text search result

匹配的括号:Matched brace

不匹配的括号:Unmatched brace

未使用的符号:Unused symbol

左边空隙(行号,断点):Gutter background

选中的文本背景色:Selection background

选中的文本前景色:Selection foreground

 

区分语言的设置

举例来说,如果要更改Javascript的语法高亮,就在上图中选择Javascript,然后再进行详细设置。具体设置项就不赘述了。

 

显示行号 + 自动换行

如果用Vim编程,行号是非常必要的辅助。WebStorm默认是不显示行号的,没关系,显示行号非常的容易。

只要在代码左侧的gutter区域点右键,就会出现下图的菜单:勾选上Show Line Numbers即可。

另外,勾选上图中的Use Soft Wraps就启用了WebStorm的自动换行的功能,即过长的代码行不会超出屏幕,不会出现横向的滚动条。

值得一提的是,标准的Vim,jk是移到上一行下一行,如果代码自动换行了,被分割成的两行虽然看起来是两行,但其实是一个逻辑行,这时候用jk是上移下移一个逻辑行。这种情况下,如果要从同一逻辑行的“第一行”移动到“第二行”,需要按gj,即先按g再按方向。虽然Vim提供了这个方法,但还是经常按错。

好消息是,启用了Use Soft Wraps的WebStorm不需要这样,直接按j就可以从同一逻辑行的“第一行”移动到“第二行”。

 

导入导出设置

File > Export Settings导出用户设置。如下图,你可以选择要导出哪些类型的设置,也可以选择导出到哪个目录下。

导出后的配置以jar包的形式存在,导入也同样简单,File > Import Settings,选择jar包导入成功后,重启WebStorm就大功告成了。

以下是我自定义的IDE配置,注意下载后需先解压缩成jar包

http://files.cnblogs.com/dc10101/WebStormSettings.zip

时间: 2024-10-30 22:26:00

WebStorm使用技巧的相关文章

WebStorm 常用功能的使用技巧分享

WebStorm 是 JetBrain 公司开发的一款 JavaScript IDE,使用非常方便,可以使编写代码过程更加流畅. 本文在这里分享一些常用功能的使用技巧,希望能帮助大家更好的使用这款强大的 JavaScript 开发工具.   代码编辑 代码跳转: Ctrl + 左键 或者 Ctrl + B,可以跳转到函数或者变量的声明位置 调用位置: Alt + F7,查找调用者 自动补全: 最好是修改一下响应时间,Settings->Editors->General->Code Com

使用Vue.js创建一个时间跟踪的单页应用_javascript技巧

Vue.js很简单.正因为如此简单,人们常常认为其适合于小项目.虽然真正的Vue.js核心知识只是一个视图层库,实际上有一组工具,将使您能够使用Vue.js构建完整的大规模SPA(单页应用程序). SPA应用可以在不完全重新加载网页,产生一个更流畅的用户体验到的用户交互响应.还有好的副作用,SPA还鼓励后端专注于展示数据端点,这使得整体架构更加分离,并且对于其他类型的客户端可能是可重用的. 从开发人员的角度来看,SPA和传统的后端呈现应用程序之间的主要区别是,我们必须将客户端视为具有自己架构的应

require.js+vue开发微信上传图片组件_javascript技巧

由于项目是thinkPHP做后端框架,一直以来都是多页面的后端路由,想使用火热的webpack有点无从下手(原谅我太菜,而且推广vue只有我一个人--),没办法,想把vue用起来,唯有在原来的基础上改进.使用webpack的巨大好处就是可以使用 .vue 这样的单文件来写vue组件,这样每一个组件就是一个 .vue 文件,哪里用上这个组件就引入进来,维护起来确实很爽.然而一直以来项目用的都是require.js,那又想以这样的形式来组织vue组件,还要加上vue-router和vue-resou

你知道setTimeout是如何运行的吗?_javascript技巧

大家看下如下代码,猜猜执行结果: var start = new Date; setTimeout(function(){ console.log('时间流逝了:'+(new Date - start)+'毫秒'); }, 200); while (new Date - start < 1000) {} console.log(1); function doSoming(){ setTimeout(function(){ console.log('时间又流逝了:'+(new Date - sta

JavaScript 开发工具webstrom使用指南_javascript技巧

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

快速增强路由器安全的十个小技巧

  路由器操作系统同网络操作系统一样容易受到黑客的攻击.大多数中小企业没有雇佣路由器工程师,也没有把这项功能当成一件必须要做的事情外包出去.因此,网络管理员和经理人既不十分了解也没有时间去保证路由器的安全.下面是保证路由器安全的十个基本的技巧. 1.更新你的路由器操作系统:就像网络操作系统一样,路由器操作系统也需要更新,以便纠正编程错误.软件瑕疵和缓存溢出的问题.要经常向你的路由器厂商查询当前的更新和操作系统的版本. 2.修改默认的口令:据卡内基梅隆大学的计算机应急反应小组称,80%的安全事件都

开好网络视频会议的技巧

网络视频会议已经在众多企业里运用起来了,然而在一个通讯咨询公司对网络视频会议使用情况的调查中显示,尽管高达67%的受访高级经理称,未来预计将举行更多的视频会议,但也有62%的人称,他们对自己是否具备充分利用这种会议的技巧感到担心. 可能公司内很多人是初次接触这种会议形式,对于在现场会议环境下成长起来的大众来说,视频会议仍然会让他们感觉陌生.不便,开过后感觉效果不好,可能就搁置了这种现代化的会议模式,造成这种情况的根本原因其实和开视频会议的技巧有关,那要如何开好视频会议呢?这里就来分析影响视频会议

苹果iOS 程序图标的设计技巧

文章像三联的朋友们介绍苹果iOS 程序图标的设计技巧,教程难度中等,IPHONE.IPAD.IPOD成为越来越多的人使用的移动互联设备,因此我们经常会遇到为这些设备设计图片,特别是设计IPHONE图标,这篇文章就像三联的朋友们详细的介绍一下IPHONE图标的设计流程,好了一起来学习吧:程序图标主要作用是为了使该程序更加具象及更容易理解,除了上述的作用外,有更好视觉效果的图标可以提高产品的整体体验和品牌,可引起用户的关注和下载,激发起用户点击的欲望. 表现形态 在有限的空间里表达出相对应的信息,在

VB.net窗体应用技巧

本篇文章的主要开发环境是Visual Studio 2008,Visual Studio系列产品一直以来都提供了强大的控件功能,然而我们利用这些控件可以编写出功能强大的应用程序.本文主要利用微软的最新.net开发工具为大家展示窗体特效的应用方法,为大家介绍创建炫酷的透明化窗体以及浮动型窗体的一些技巧.很适合.net开发工具的初学者,具有一定的实用价值. 打开 Visual Studio 2008在文件 (File) 菜单上,单击新建项目 (New Project). 在新建项目 (New Pro