Intellij IDEA

Intellij IDEA 前端开发指南
https://github.com/damao/Intellij-IDEA-F2E

Intellij IDEA – quickjump

插件 quickjump

基友群里有基友问,如何快速在代码里跳转?

@willerce 含笑: “plugin.quickjump”

Settings > Plugins > Browse Repositories > 搜索 quckjump 右键 download and install

plugin

启用 quickjump 插件之后

按 ctrl+; 开始输入关键词

例如这里输入了 de

jump

然后会出现几个匹配的位置,这个时候 Enter 或数字,就直接定位过去了

当然,输入的越精确,匹配的也越精确

 

除此之外还支持模糊搜索

例如 headFirst

可以通过 hf 来找到

 

更方便的是

ctrl+alt+;

Jump and Autocomplete

例如搜索 false 跳过去之后下拉出选项,你可以选择true

搜索 block 跳过去下拉出 inline inline-block 等

 

或者

ctrl+shift+;

Jump and Select

跳过去之后直接输入新的文本来替换老文本

 

有木有 vim 里斜杠的赶脚?

Youtube 演示

 

JetBrains 末日大促

End-of-the-World

全线产品都二五折

Intellij IDEA , PHPStorm , WebStorm 等,

令人发指,大家末日快乐

说来惭愧,第一次买正版软件.. .木有双币卡的我这可以给你代购

 

IntelliJ IDEA, PHPStrom, WebStorm 前端开发指南.

https://github.com/damao/Intellij-IDEA-F2E

Intellij IDEA – Refactor 重构

SublimeText2 的多重选择

查找替换与重构的区别就像 重写代码和网页重构的区别一样

(网页重构 WebRebuilder 是腾讯的一个职位,主要工作职责是 HTML CSS ,鲜有人搞得离清)

SublimeText2 有一个大卖点是多重选择,让人眼前一亮

之前需要通过查找替换来搞定的操作,只需要鼠标点选几个区域,就可以批量操作

简直是列编辑的 God Like 模式, 碉堡了有木有?

 

Intellij IDEA 的 Refactor 重构

很可惜 Intellij IDEA 没有这个功能,但是他有着很屌的 Refactor 重构功能

举一个栗子:

3个文档里有各种关键词 bigcat

类型为 纯文本,文件名, CSS class 名, JavaScript 变量名

尝试下如何 Refactor 重构

先拿 CSS class 开刀,我们右键选择 Refactor > Rename (快捷键 Shift + F6)

输入 damao

发现在 html 里的重构会自动更改到关联的 css 里的 class 名,

因为,在 html 里引用了这个 CSS 之后,他们就绑定在了一起, 是真爱!

同理重构其他东东

重构 JavaScript 变量名/函数名 会同步修改关联的 .js 文件里对应的部分

重构 .js 文件里的变量名/函数名会同步修改关联的 html 页面引用

重构 .js / .css 等文件名也会同步修改关联的 html 页面引用

甚至重构 html 代码里 href=”bigcat.css” 会同步修改对应的文件名

在本例中如果你要用查找替换,或多重选择,看起来都不是个好办法

而改名只是重构的一部分,还能抽离出来新建函数等等需要你去挖掘

纯文本不可重构

对于纯文本,我们只能用正则或普通替换或列编辑来处理了

列编辑

按住 alt 鼠标选择一列,然后输入文字就会多行同时出现

整齐的连续单行代码中比较适合用,缺点是必须要连续

正则表达式

例如略微有点技术含量的正则

搜索>后面的bigcat

然后把cat之外的替换为da

Intellij IDEA 依然贴心的把替换结果提示出来

优点,能想出来就能搞出来

缺点,需要正则表达式30分钟入门

结论

所以不要因为莫言有个错别字,就认为他文字功底差

Intellij IDEA – LiveEdit 插件

LiveEdit 有啥用?

Intellij IDEA 默认自动保存的,根本不用 Ctrl+s,
LiveEdit 能自动更新浏览器里的网页,所以F5也省了

如果是是双屏的话,基本上所见即所得了

LiveEdit 视频演示

LiveEdit 如何安装?

LiveEdit 是之前  “Instant HTML Editing” 插件的新名字 ( What’s cooking: Instant HTML/CSS editing preview), WebStorm & PhpStorm 5.0 开始集成,

Inellij IDEA 需要 Settings > Plugins > 启用一下,如找不到,点 Browse repositories 在仓库里挖挖看

启用之后会提示重启 Intellij IDEA.

打开html 之后 Run > Debug ‘filename.html’

会提示需要安装 Chrome 扩展,点蓝色的文字跳到 Chrome

有个视频会教你怎么装,总结下就是

  1. 下载 jb.crx
  2. 打开扩展页面拖进去。

装完后 Chrome 的 Console.log 都可以直接显示在 Intellij IDEA 里

 

PS2:chrome 调试器打开的时候 LiveEdit 失效,关掉会自动重新激活

IntelliJ IDEA, PHPStrom, WebStorm 前端开发指南.

https://github.com/damao/Intellij-IDEA-F2E

欢迎有爱的同学 Fork