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-29 19:10:27

WebStorm 的使用(一)的相关文章

webstorm开发微信小程序代码提醒(webstorm开发工具)

使用了微信提供的开发工具是真心难用,卡顿厉害.中英文切写注释换相当不爽.还没办法多开窗口,相信大家也遇到过这种现象. 下边我们介绍下webstorm来开发微信小程序的一些配置: 1.首先FileType下Cascading Style Sheet 添加*.wxss 1.png 2.FileType下HTML 添加*.wxml 2.png 3.将其中的wecharCode.jar下载下来,然后在webStorm 的 File -> import settings 中导入即可 3.png 配置已经完

WebPack+WebStorm调试

怎么用webstorm来调试WebPack? 今天查了很多文档,最终在官网上耐心看完英文文档后,才解决.附上链接:https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/ 工具简介 Windows7 WebStorm2017 Webpack2 谷歌浏览器(默认浏览器) 操作 在Project视图里找到index.html,右击进入Debug模式 WebStrom会自动进入Debu

webstorm快捷键大全

使用webstorm一段时间了,这里分享一下常用到的快捷键,不用死记,孰能生巧! Ctrl+/ 或 Ctrl+Shift+/ 注释(// 或者/*-*/ ) Shift+F6 重构-重命名 Ctrl+X 删除行 Ctrl+D 复制行 Ctrl+G 查找行 Ctrl+Shift+Up/Down 代码向上/下移动. F2 或Shift+F2 高亮"错误"或"警告"快速定位 Tab 生成代码 选中文本,按Ctrl+Shift+F7 高亮显示所有该文本,按Esc高亮消失 C

PhpStorm 2016.2,WebStorm 2016.2最新版本免费注册激活方法

最新PhpStorm 2016.2 .WebStorm 2016.2.PyCharm  2016.2激活方式 打开网址 http://idea.lanyus.com/ 选择获取注册码,复制生成的验证码 安装完成后,打开软件,依次选择菜单栏 Help -> Register-> Activation code ->输入复制验证码->确定完成.

webstorm/...开发 NodeJS 项目

前提: 已安装好 webstorm/IDEA 2016.3 & 2017.1 (见 文 IDEA开发Java 相关 --- 1 IDEA安装 ...) 要用 IDEA 开发 NodeJS项目(web/JS)项目,首先需要: 1. 自行下载 Node.js 并安装,下载网址:https://nodejs.org/en/download/:或者 https://nodejs.org/en/: 测试: cmd-> node -v  或者 node, 未出现错误,如下,则表明已安装完好.   其次,

WebStorm 预览时把浏览器地址localhost 改成IP

最近在使用WebStorm时,预览网页时地址总是显示的 http://localhost:63342/... ,如果要调试其它设备感觉很不方法,此时肯定首先想到的亲爱的度娘,但是貌似没有真正很解决问题的(可能是我搜索方法不对).最后偶然发现以下的一个设置方法. 设置的前提是你此前就能直接用本机IP地址访问到网页,我的是以前就配置好了Apache相关设置的. 我的WebStorm是 10.0.3版本,不过我想webstorm的设置应该是差不多的吧.看图说话: 1.当我直接用WebStorm预览网页

怎么为WebStorm更换主题 修改字体样式

这篇文章主要用于帮助大家解决怎么为webstorm换theme. 首先,到选择一个自己喜欢的皮肤,Webstorm皮肤网址: http://phpstorm-themes.com/ 然后,选中你喜欢的皮肤,现在theme xml文件, 这里要鼠标右键另存为: 将此xml文件下载后,根据不同的操作系统,将其copy到不同的webstorm安装目录中. 1.apple系统 复制下载的xml theme文件,使用shift+command+g键进入: ~/Library/Preferences/Web

【干货】免费获得WebStorm软件

内容提要: 1.WebStorm简介 2.如何免费获得WebStorm 3.利用学生身份免费获得正式版WebStorm WebStorm简介 WebStorm 是一款前端开发 IDE(集成开发环境),可以简单理解为,它是一个智能的.强大的代码编辑器. 小编不是Web前端高手,因为要开发HTML5小游戏和使用Egret引擎,巧合之下接触了WebStorm,使用之后感觉真的不错,所以推荐给大家. WebStorm是JetBrains 公司旗下的商业软件产品,该公司还提供了 PhpStorm 和 In

WebStorm控制台的一些指令笔记

下面的内容浅显易懂,适合初级前端工程师观看 此篇主要内容是讲,如何使用WebStorm控制台下载.删除依赖包,和npm,bower一些指令的使用方法. 一般来说前端开发工作中,或多或少会用到一些依赖包,以前的开发人员如果要用的话,就得到网上到处找,然后下各种插件,极大浪费了时间,并且删除的时候也麻烦. 后来twitter推出了bower,它主要是一个包管理工具,简单来说就是一个静态资源共享平台.前端需要用到的插件基本都可以在里面下载,这便极大方便了开发. 于是我们就从下载bower开始吧. 1.

转-webstorm快捷键

默认配置-Eclipse的常用快捷键对照表 查找/代替 Webstorm快捷键 Eclipse快捷键 说明 ctrl+shift+N ctrl+shift+R 通过文件名快速查找工程内的文件(必记) ctrl+shift+alt+N ctrl+shift+alt+N 通过一个字符快速查找位置(必记) ctrl+F ctrl+F 在文件内快速查找代码 F3 ctrl+K 查找下一个 shift+F3 ctrl+shift+K 查找上一个 ctrl+R ctrl+F 文件内代码替换 ctrl+shi