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-15 01:10:51

WebStorm使用技巧的相关文章

Angular(03)-- lint风格规范和WebStorm小技巧

在开始讲 Angular 各个核心知识点之前,想先来讲讲开发工具 WebStorm 的一些配置以及相应配置文件如 tslint.json 的配置. 因为我个人比较注重代码规范.代码风格,而对于这些规范,我只有一个观点:一切需要依赖开发人员的主观意识去遵守的规范都没有多大意义. 以前做 Android 开发时会借助 AndroidStudio 来强制遵守一些规范,现在前端项目我用的是 WebStorm 开发,这两个开发工具本质上同源,所以很多功能都差不多. 那么,这篇就来讲一讲,如何对 WebSt

webstorm简单介绍,webstrom基本使用

WebStorm混搭svn WebStorm混搭nodeJS     以less和uglify-js为例     如何用npm在root中下载模块  --------------------------------------------- webstorm简单介绍 官网地址:http://www.jetbrains.com/webstorm/features/index.html 参考地址:http://www.html5jscss.com/ide-webstrom-27.html 欲先善其事

WebStorm 介绍

官网地址:http://www.jetbrains.com/webstorm/features/index.html 参考地址:http://www.html5jscss.com/ide-webstrom-27.html 欲先善其事,必先利其器,如题.看到网上一篇介绍webstrom的文章,觉得功能确实强大,也知道为什么阿里巴巴的前端传到github上的文件为啥都有一个 .idea 文件,(传说淘宝内部推荐写js用webstrom) 我们可以理解 IDE 就是集成了很多你想要的功能,或者你不想要

webstrom 应用 转(http://blog.csdn.net/zghekuiwu/article/details/54382145)

WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具 任何一个编辑器都需要保存(ctrl + s),这是所有win平台上编辑类软件的特点,但是webstorm编辑文件右上角是没有那个熟悉的 * 的.好处:省去了ctrl + s之后,在结合Firefox的vim,基本不动鼠标就可以看到结果页面了. 坏处:没有以前的 * 标识,万一键盘误操作也会被立即存储. 任何一个编辑器只要文件关闭了就没有历史记录了,但是webstorm有. vcs->Local Histo

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

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

记录一个webstorm的设置或者说小技巧

在 html 的元素中,如果输入属性,默认会填充 引号,在 react 书写中非常不方便. 其中的JSX很多时候是不需要 quotation 的,只是需要一个 括号 {} 即可. 自己找了下webstorm中的设置,发现在 webstorm 中是可以进行设置的. 方法如下: 设置->Editor->general->Smart Keys 找到其中的 Add quotes for attribute value on type = -.. 取消勾选即可. 还有一个未发现的使用技巧. 其中的

webstorm的中文教程和技巧分享

webstorm是一款前端javascript开发编辑的神器,此文介绍webstorm的中文教程和技巧分享. webstorm8.0.3中文汉化版下载:百度网盘下载:http://pan.baidu.com/s/1pJI9PMV WebStorm为前端javascript开发而生,专门为 javascript开发做了很多优化,令前端工程师眼前一亮的. 一.webstorm的功能 1.webstorm的智能的代码补全: 支持不同浏览器的提示,还包括所有用户自定义的函数(项目中) 代码补全包含了所有

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

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

webstorm技巧

webstorm安装后的一些设置技巧: 如何更改主题(字体&配色):File -> settings -> Editor -> colors&fonts -> scheme name.主题下载地址如何让webstorm启动的时候不打开工程文件:File -> Settings->General去掉Reopen last project on startup.如何完美显示中文:File -> Settings->Appearance中勾选Ove