webStorm 配置

[cycold]

webStorm version 9.0.3

设置: File -- settings...

注意这里使用配置搜索功能.

快捷键设置:搜索keymap

自定义自已的keymap名称 . 注意使用搜索功能. 同时搜索框旁边的快捷键搜索非常好用

• 在sublimeText中有一个功能是: 可以打开当前文件的目录(Open Containing Folder),在windows的explorer中webstorm中没有这 个功能.实现: File -- settings -- external tools(搜索external tools) 点击增加外部的命令. 这里的 program --- explorer.exe Prameters --- /select,$FilePath$ Working directory --- $ProjectFileDir

如果需要打开的目录,左边有目录树,可以将参数作如下设置 Prameters --- /e,/select,$FilePath$

参考:http://blog.jetbrains.com/idea/2006/03/open-a-file-system-view-for-the-current-filefolder-selected-in-intellij-idea/

如果需要绑定快捷键, 直接找到keymaps,搜索external tools,找到上面定义的external tool的名称,右键增加一个keymap即可.

更改webstorm的Terminal的默认shell(cmd)

由于我一直习惯于linux的bash,在windows下一直使用的都是git的bash.这个shell可以使用一部分的linux命令.当然要注意的是在使用这个git的shell时

不能运行cmd的批处理命令.

定义临时的环境变量会有所区别,windwos需要$$,而linux不需要

注意要设置好环境变量,有时更改了环境变量,这个git bash不会立马生效,即使重新打开也没用,此时可以试着注销或者重启windows

File -- settings搜索 terminal. 在shell path中输入:

cmd /c ""C:\Program Files\Git\bin\sh.exe" --login -i"

注意

这里不能直接输入:C:\Program Files\Git\bin\sh.exe

为什么后面要加两个参数:--login -i 这个是参考git的快捷方式(属性,右键)命令中发现的.

设置ctrl+[ 和 ctrl+]的缩进.这是我习惯了sublimeText的缩进方式 .在webstrom中也可以设置

File -- settings... 搜索 keymap,然后再进一步搜索indent

找到:

Unindent Line or Selecton 增加键映射 ctrl + [

Indent Line or Selecton 增加键映射 ctrl + ]

这里会提示有键映射的冲突.选择直接移除冲突的键映射即可.

[cycold]

Open Containing Folder 这个功能在webstorm9中已经有了.右键某一个文件或者目录,会发现有一个命令:show in explorer. 将其添加快捷键即可

[cycold]

有时希望排除某些文件或者文件夹在项目目录中显示,比如node_modules目录,有时嵌套太深了,很占用内存.在webstorm中排除: File | Settings | File Types 在ignore file and folder中输入你需要排除的文件或者文件名 参考: http://blog.jetbrains.com/idea/2011/04/intellij-idea-does-not-show-some-files-know-the-hiding-places/

[cycold]

webstrom在局域网中手机通过wifi访问配置:

在电脑上,webstrom默认是开启本地的63342端口.通过localhost或者127.0.0.1来访问.

http://localhost:63342/ionic/start/blank/myApp/www/index.html http://127.0.0.1:63342/ionic/start/blank/myApp/www/index.html

但是在电脑上却不能通过其IP地址的形式访问.比如:

http://192.168.1.98:63342/ionic/start/blank/myApp/www/index.html

因为在局域网中,手机的浏览器中只能输入ip地址才可以访问.总不能输入127.0.0.1访问吧. 所以首先得能够在电脑上访问: Google得知: 做如下设置:

File->Settings-> 搜索debugger或者server 找到: Debugger 将Can accept external connections勾选即可. 会发现勾选后依然不能访问

Google得知:

注意：在windows环境下，一般将端口设置为四位数才可以访问，具体原因可能是window对5位数的端口，对外IP访问是有限制的吧，仅仅猜测而已。

参考: http://www.joosblog.com/2014/10/14/jie-jue-webstormzai-windowsxia-wifidiao-shi-wu-fa-fang-wen-wen-ti/

使用手机依然不能访问,但是可以通过电脑访问. 这又是ESET的个人防火墙问题了:

高级设置 > 网络 > 个人防火墙 > 过滤模式 > 交互模式

选择交互模式,只是暂时的,是为了自动的创建规则,之后会弹出对话框,选择允许webstorm相关的程序通讯即可,同时记得勾选创建规则.

之后再将过滤模式 > 自动模式

[cycold]

webstorm中设置ctrl + 滚轮改变字体尺寸:

File->Settings->General 或者搜索zoom || Mouse Wheel

勾选:

Change font size(Zoom) with Ctrl + Mouse Wheel

同时在下面可以勾选;

Use soft wraps in editor

[cycold]

取消webstorm的单词拼写检查:

File->Settings 搜索 spelling

将所有的Dictionaries前面的勾都取消即可.

[cycold]

webStrom 插件安装:

插件官网; https://plugins.jetbrains.com/

WebStorm安装Vim以及快捷键设置 http://www.cnblogs.com/dc10101/archive/2013/01/02/2841900.html

File->Settings->Plugins

Browse Repositories从git库在线安装 Install JstBrains plugin从官网插件库安装 Install plugin from disk 从本地磁盘安装(接受jar或者zip格式)

[cycold]

Webstorm重命名文件:

右键-->Refactor-->Rename

[cycold]

禁止自动报错的波浪线提示:

File->Settings 搜索:Inspections

比如要禁止sass的未知的mixin提示,将sass/scss前面的勾去掉即可.

比如要禁止单词的拼写检查: 去掉Spelling的勾即可

[cycold]

webstorm的代码snippets.

在sublimeText代码片段是以snippets形式,而在webstorm中叫做'live templates'

要查看,修改,自定义增加live template

参考webstorm的官方的帮助文档:

https://www.jetbrains.com/webstorm/help

https://www.jetbrains.com/webstorm/help/creating-and-editing-live-templates.html#d1321925e19

File->Settings 搜索:Live Templates

就会找到很多webstorm自带的代码模版,比如在Zen HTML中,可以找到:

a:mail 按Tab键后,生成如下的代码结构

<a href="mailto:$VAR0$">$END$</a>

meta:vp

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

[cycold]

webstorm自动补全:

https://www.jetbrains.com/webstorm/help/auto-completing-code.html

由于基本的补全按键Ctrl + space与系统的输入法切换冲突.

于是改为:Ctrl + \

File->Settings>keymaps 搜索: completion

找到Basic 增加一个键映射Ctrl + \

之后比如路径的自动补全: <script src="./lib/ionic/"></script> 只要按下ctrl+\后,

相应路径下的目录文件就会倍列出来

[cycold]

webstrom 从路径中创建没有的文件:

<script src="./lib/ionic/aa.js"></script>

比如路径中没有aa.js文件,一般webstorm会报错提示,此时可以使用按键alt+enter,在弹出的对话框中选择创建这个文件:

参考:http://stackoverflow.com/questions/20771774/webstorm-shortcut-to-create-new-file-from-src

[cycold]

webstorm在当前文件目下创建文件:

自身快捷键为 ctrl + alt + insert

File->Settings>keymaps 搜索: new...

在other下,添加快捷键绑定: ctrl + alt + n

[cycold]

设置webstorm的代码高亮:

有时不想要过多的代码高亮显示.一般的代码出现高亮显示就是错误,警告提示.

这些都可以在一下这些设置项找到:

File->Settings>Editor>Colors & Fonts>General (设置代码风格的高亮)

File->Settings>Editor>inspections(设置语法错误提示的显示颜色,一般都是波浪线)

在写angular的指令时,指令右边的expression即在引号里面的代码总是高亮的显示.

为了去掉这个高亮的背景,设置了好长时间.最后发现这个是webstorm的

File->Settings 中的 Intentions 中的 Language Injection功能.

(有时代码的左边会出现一个小灯泡的图标,估计就是这个Language Injection)

禁止掉Language Injection功能后,这个高亮的背景也就没有了.但是这禁止掉了这个功能.可不可以不禁止,从而去掉高亮的背景色呢??

可以, 去File->Settings>Editor>Colors & Fonts>General中 搜索Injected language fragment,

将其右边的background的勾去掉即可

[cycold]

改变光标所在行的背景色:

Preferences > Editor > Colors & Fonts > General > Caret Row

改变光标的背景色:

Preferences > Editor > Colors & Fonts > General > Caret

参考; http://stackoverflow.com/questions/9210494/where-to-change-colors-of-the-cursor-and-the-current-line

[cycold]

过滤不需要显示的文件或者文件夹

File->Settings> 搜索 file type

[cycold]

在webstorm的工程项目(Project)中,目录可以分为四种类型:

Test, Exclude , Resource Root 区别显示为图标颜色的不同,还有一种为默认的.

如果需要显示多个项目目录到同一个目录中(即workspace).

可以将这个目录mark as为Resource Root ,

如果是一些测试或者demo之类的目录,可以mark as Test类型.

如果是不需要在项目目录中显示的目录,可以标记为Exclude类型

File->Settings>Project

如果感觉右边的项目目录比较多,可以右键一个目录,选择

Mark Directory As>Exclude

之后这个目录就会被排除隐藏(意味着webstorm的自动补全不会搜索这个隐藏的文件)

如果需要显示 去File->Settings>Project 中,将被归类为Exclude中的目录删除即可

[cycold]

webstorm 代码格式:

code>Reformat Code

[cycold]

webstorm卡顿的问题:

http://www.v2ex.com/t/121685

1.调整Highlighting Level (右下角的一个小人或者右上角眼睛点击右键) 2.取消某些语法检查,或者拼写检查 3.排除node_modules目录,这个目录层级有时非常深,不要让webstorm索引它. 4.启动Power Save模式 (File>Power Save Mode) code insight和其他的后台任务将会倍disabled 如图提示:

[cycold]

去掉html文件上的面包屑

File->Settings>Editor>Appearence>Show HTML breadcrumbs 前面的勾去掉即可.

(需要重新打开html文件生效)

还可以去掉HTML的标签树高亮,这样也许可以加快webstorm的速度

File->Settings>Editor>Appearence>Enable HTML/XML tag tree Highlighting

[cycold]

已配置好的webstorm

[cycold]

webstorm 选择字体:

比如要选择Monaco字体(最喜欢的windows下的编程字体之一)

如果要选择系统的字体或者自定义安装的第三方字体,需要在切换字体时,去掉一个选项

Show only monospaced fonts 将前面的勾去掉即可,之后就会发现可选的所有的系统字体了

包括安装的Monaco字体.

当然Consolas字体也不错.

`

[cycold]

wbstorm快速切换主题和代码颜色高亮主题:

View>Quick Switch Scheme

当然要添加一个快捷键了 ctrl+shift+"

[cycold]

当开启File>Power Save Mode模式后, 会发现js文件的代码高亮会有一部分失效,

比如标示符的高亮色就会消失

如果觉得webstorm的提示建议很多.有时到烦人的程度,可以干脆将其全部关闭

File->Settings>Editor>Inspections将不需要inspect的语言全都勾掉(这里注意选择右边的Defalut). 之后的项目就可以直接使用这个Default 这里可以根据需要慢慢的调整.

有时会很怀念sublimeText的快速.简洁

[cycold]

注意webstrom的代码实时监测:

这个眼睛有几种状态: 全色表示检查完毕 绿色表示没有错误 红色表示有错误,点击这个眼睛可以得到详细信息.灰色表示禁止了代码实时监测(此时代码高亮会显示不全)

[cycold]

关闭webstorm的自动保存功能:

File -- system settings -- Synchronization 中间两个勾不需要勾选

没有保存提示星号

Editor -- editor tabs -- Mark Modified tabs with asterisk

参考: http://www.w3cfuns.com/blog-5424418-5396465.html

[cycold]

设置webstorm的代码片段在多个文件中有效:

[cycold]

设置代码风格:

要想提示设置的代码风格,需要开启相应的inspections,会检查你没有遵守的代码风格,然后提示你,但是由于电脑内存,及配置较低,因此这里关闭inspection.

可以使用code-->Reformed code来格式化你的代码,使其符合你自己定义的代码风格.

https://www.jetbrains.com/webstorm/help/reformatting-source-code.html https://www.jetbrains.com/webstorm/help/code-style.html You can reformat source code to meet the requirements of your code style

[cycold]

webstorm的缩进需要到具体的语言中修改:

[cycold]

关于webstorm的自动补全,其中使用ctrl+space和输入法冲突,所以更换:'ctrl + \'; 同时注意禁止按空格选择自动提示:

[cycold]

修改相应文件后缀对应的语法显示,比如js文件使用javascript语法显示: settings -- 搜索 file type 这里展示了webstorm所有的文件类型...

[cycold]

取消当前行背景高亮: Editor-->Colors and Fonts-->General-->Caret row 去掉光标所在行的背景色.

[cycold]

修改IntelliJ IDEA的抗锯齿字体渲染方式 | How to fix font anti-aliasing in IntelliJ IDEA when using high DPI?

https://www.jetbrains.com/webstorm/help/tuning-webstorm.html http://superuser.com/questions/614960/how-to-fix-font-anti-aliasing-in-intellij-idea-when-using-high-dpi 提示：适用于webstorm等jetbrains家的IDE

I’m on a high-dpi display and I got it working with a perfect font rendering, to achieve this you need to:

(On Linux only) Install and use Oracle JDK (I’m using 1.7) and not OpenJDK (also the patched one with fontfix was useless for me). See how to do this.

Edit the .vmoptions configuration file that you find into the Bin installation folder (eg.studio.vmoptions and for 64bit studio64.vmoptions, or WebStorm.exe.vmoptions etc. according to the version of the IDE you installed) by adding these lines:
-Dawt.useSystemAAFontSettings=on
-Dswing.aatext=true
-Dsun.java2d.xrender=true

Remove hinting informations from the font that you would like to use and select the new font intoIntelliJ IDEA preferences (Setting -> Editor -> Font);
if you don’t know how to do this, install FontForge then:

Open your font in FontForge
Select all glyphs via Ctrl+A and clear all hints (Hints -> Clear Hints)
Select glyphs again and use Hints -> Clear Instruction
Save the font with different name ( File -> Generate Fonts)
Install the new font, select it in IDEA
If you followed the above tips and you’re experiencing lags when fast scrolling the code (this sometimes could happen on Linux distributions with a not optimized gpu driver), try removing the line
-Dsun.java2d.xrender=true
from the .vmoptions file.

[cycold]

修改新建文件时, 作者信息 即: Created by ****