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
WebStorm 的使用(一)的更多相关文章
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert
使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...
- webstorm下载&&安装过程&&打开项目
一.webstorm下载 WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为"Web前端开发神器"."最强大的HT ...
- WebStorm 2016 最新版激活(activation code方式)
WebStorm 2016 最新版激活(activation code方式) WebStorm activation code WebStorm 最新版本激活方式: 今天下载最新版本的WebStorm ...
- webstorm license key
JetBrains WebStorm注册码 UserName: William License Key : ===== LICENSE BEGIN ===== 45550-12042010 00001 ...
- WebStorm 常用功能的使用技巧分享
WebStorm 是 JetBrain 公司开发的一款 JavaScript IDE,使用非常方便,可以使编写代码过程更加流畅. 本文在这里分享一些常用功能的使用技巧,希望能帮助大家更好的使用这款强大 ...
- Webstorm编译TypeScript
下载webstorm 下载node.js编译器npm Webstorm的安装很简单.但如果没有Java For Mac 环境打开Webstorm时会有提示,点击提示会跳转下载链接,下载安装就好. ...
- WebStorm
1,简介 WebStorm 10是一款强大的HTML5编辑工具,是 JetBrains 推出的一款商业的 JavaScript 开发工具.功能强大的前端专用IDE,拥有即时编辑(chrome).自动完 ...
- webstorm 常用快捷键
webstorm应该是目前最强的js编辑器了,结合sublime text可以很效率的开发项目.今天整理了一些webstorm比较实用的快捷键: Ctrl+/ 或 Ctrl+Shift+/ 注释(// ...
- WebStorm 2016.2.3的安装与汉化
WebStorm是一款功能出色的JavaScript开发工具.号称是""Web前端开发神器"."最强大的HTML5编辑器"."最智能的Jav ...
随机推荐
- COJ 0986 WZJ的数据结构(负十四) 区间动态k大
题解:哈哈哈我过了!!!主席树+树状数组写起来还真是hentai啊... 在这里必须分享我的一个沙茶错!!!看这段代码: void get(int x,int d){ ]=root[x];x;x-=x ...
- COJ 0015 20602铁轨
传送门:http://oj.cnuschool.org.cn/oj/home/problem.htm?problemID=15 20602铁轨 难度级别:B: 运行时间限制:1000ms: 运行空间限 ...
- HBase MemStoreFlusher
HBase MemStore Flush由类org.apache.hadoop.hbase.regionserver.MemStoreFlusher实现,具体表现为HRegionServer中的一个实 ...
- Hat’s Words hdu-1247
就是查找这个单词能不能有两个单词组成,简单的字典树题目 ////////////////////////////////////////////////////////////// #include& ...
- Jenkins配置Java项目1(Java+Maven+Tomcat)
先收集几个网址,后续再自己动手过一遍 http://www.cnblogs.com/sunzhenchao/archive/2013/01/30/2883289.html https://my.osc ...
- WASD控制UI界面血条加减
using UnityEngine; using System.Collections; using UnityEngine.UI; public class HealthController : M ...
- 百度2014校园招聘算法——给出一组数据A=[a_0, a_1, a-2, ... a_n](当中n可变),打印出该数值元素的全部组合。
VC++ void StringTest(CString source, CStringArray& dest) { if(source.IsEmpty()) { } else { CStri ...
- Visual Studio 2012 Ultimate 上安装 Python 开发插件 PTVS
1.我的环境 操作系统:32位 Win7 旗舰版 Service Pack 1 VS版本:Microsoft Visual Studio Ultimate 2012 版本 11.0.50727.1 R ...
- angularjs手动解析表达式($parse)
<!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...
- 【转】关于Ubuntu的sources.list 的总结
一.作用 文件/etc/apt/sources.list是一个普通可编辑的文本文件,保存了ubuntu软件更新的源服务器的地址.和sources.list功能一样的是/etc/apt/sources. ...