IntelliJ IDEA 12 附带黑色 Darcula 主题之后,国内的兄弟姐妹们必然是要搞起啊,谁没有一颗 ST2 | VI 的心?

然后就会发现,中文变成了口口口口口…

解决方法就是如图,在 Appearance 里头勾选 Override default fonts by (not recommended)

然后 name: 里头挑选一个中文字体,微软雅黑或宋体什么的

(因为字体名称也是中文,所以先摸黑选一个口口,就可以看了)

重启下 IntelliJ IDEA, 一切正常

第二个问题来了,那界面字体正常了

我编辑器里需要一个等宽字体肿么办?

在 Editor > Colors & Fonts > Font 里头选择一个等宽字体例如 Consolas 之后,所有的中文都挤成一坨屎了…

现有正式版本的解决方案是选择中文字体…

或者去群共享里下载一款叫 Yahei Consolas Hybrid 的字体

如果没有这些字体,注意要取消 Show only monospaced fonts;

在12.1版本里, 已经可以设置多个字体

如果没有这些字体,注意要取消 Show only monospaced fonts;

是不是想起了CSS里 font-family:”Source Code Pro”,”微软雅黑”;

现在已经发布了,解决中英文搭配老大难问题.

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

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

作为前端开发,多少会碰点PHP ,Intellij IDEA 在没分拆出 PhpStorm 之前是集成 PHP 的,后来你懂的
那么要重新启用 PHP 支持,也不难,只需要启用插件即可

启用PHP插件

Settings > Plugins > Browse repositories > php
右键 Download and Install  即可

代码智能提示

Intellij IDEA 的代码提示之所以牛逼,是因为它会分析 Project 里的所有函数,并且提示
所以,这里我的 Project 包含了 WordPress , 他就提示了所有 WordPress 的函数

同理 JavaScript 项目,会基于项目分析后提示你的函数

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

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

欢迎有爱的同学 Fork

QQ群 149725975 (无关话题勿聊,热爱生命)

自动保存 CTRL+S

程序员按 Ctrl + S 的频率和普通网友在桌面上右键刷新一样频繁

但,需要么?

Intellij IDEA 支持

• 窗口被激活时同步文件
• 窗口失去焦点时保存
• 发呆15秒后自动保存
• 使用临时文件暂存更改(如果你拿来修改hosts文件遇到问题,得取消这个选项)

所以,写完代码直接 Alt + Tab 到浏览器刷新就可以了,请忘掉 Ctrl + S

本地历史记录 Local History

熟悉 git 或 svn 的同学应该直接会用

Local History 的好处在于不用手动提交,他会结合上文说所的自动保存来产生记录,是版本控制一个很好的补充

图中还可以看到我 ftp 上传到服务器的标记, 包括一些外部更改啥的状态都会有,平时使用过程中可以直观看到

所以再也不怕

• 停电
• 死机
• 手贱
• 忘了提交 git /svn

使用 Local History

标签上右键 > Local History > Show History

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

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

欢迎有爱的同学 Fork

QQ群 149725975 (无关话题勿聊,热爱生命)

ZenCoding

神飞大湿之前介绍 ZenCoding 的时候想必同学们都会动心,年复一年的敲着 div 着实是一件有悖 DRY 的事情

Intellij IDEA 的 Live Template 早在2010年的时候就集成了 ZenCoding 和一大堆代码片段

举一些好玩的例子,例如 CSS 渐变

background-color: #000; 
background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#FFF)); /* Safari 4+, Chrome */ 
background-image: -webkit-linear-gradient(top, #000, #FFF); /* Chrome 10+, Safari 5.1+, iOS 5+ */ 
background-image: -moz-linear-gradient(top, #000, #FFF); /* Firefox 3.6-15 */ 
background-image: -o-linear-gradient(top, #000, #FFF); /* Opera 11.10-12.00 */ 
background-image: linear-gradient(to bottom, #000, #FFF); /* Firefox 16+, IE10, Opera 12.50+ */

这么一堆,但每次需要变动的只有2个颜色
那么我们就来新建一个 Live Template

jb 是渐变的缩写,抱歉我记不住 gradient

然后我们定义只在 CSS 中生效

当我们在 CSS 文件里输入 jb 然后按tab 的时候,好玩的事情发生了

整个模板被调用,然后光标自动停留在$VAR0$的位置,接着我们输入第一个色值000,然后按回车(跳转到下一个VAR)
于是我们输入第二个色值FFF,继续按回车终止,光标停留在代码最后,完成一个渐变的输入

变量

Intellij IDEA 允许 $<variable name>$ 自定义变量,
以及 $END$ 和 $SELECTION$ 预定义变量

$END$ 是完成所有变量输入之后的光标位置
$SELECTION$ 是给按了CTRL+ALT+T的时候定义的包含模板

例如定义一个模板

{$SELECTION$}

那么选择一段文本后按 CTRL+ALT+T 选择这个模板,就会在左右套上 {}

更加进阶的用法

是给变量们定义函数和预设值,预置了四五十个函数,就不列出来了

不过不知道如何自己手动写函数,例如第二个值是经过第一个值计算的结果, 类似于 LESS 的那种,如果有大神清楚,请分享下,谢谢

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

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

欢迎有爱的同学 Fork

QQ群 149725975 (无关话题勿聊,热爱生命)

我是一枚前端开发工程师,熟悉 HTML CSS , 了解 JS PHP, 所以应该算已经入门, 在我们这一行,从古至今永远没有一个编辑器可以满足所有人的需求,
就像没有妹纸,你还有手

4年前入职阿里的时候受淘宝团队的熏陶,从 Dreamweaver 过渡到了 Intellij IDEA ,这几年也受过其他妹纸的勾引,最终还是离不开
SSH 管理主机的时候用 vim , 快速修改代码用 notepad++ , 一本正经写代码的时候用 Intellij IDEA.

一如大湿玉伯从 Vim 与 IDE 的讨论说起 , 合适的场景用合适的编辑器, 但保持开放的心态,勇于尝试新事物.

今天一篇 Project 的配置教程,写给第一次用 IDE 的前端开发同学们.

Web IDE 的选择

Jetbrains 公司有

• Intellij IDEA (JAVA 等乱七八糟集合)
• PHP Storm (PHP JavaScript CSS HTML)
• Web Storm (JavaScript CSS HTML)

个人推荐 Intellij IDEA Ultimate 版本, 注册机QQ群 149725975 里有,觉得好用请购买 licence
这个版本更新最快,速度也最快,但占内存多点,并且有 Project,另外2个木有

Project 的理解

对于前端开发, Project 理解为 Module 的集合

Module 理解为一个工作目录

在此例里,创建了一个 Project 叫 wordpress ,然后一并创建了个叫 wordpress 的主题 Module

随后还可以继续创建 基于其他目录的 Module

例如我E盘里的一个 Project 包含了 E 盘的 wordpress 和 D 盘的miao
每一个 Module 都在左侧目录树形式列出

工作方式

是单 Module 通过切换 Project 来工作, 还是一个 Project 挂不同 Module 取决于你的项目

他们的区别在于所有功能的范围都是基于 Project 的

例如此例中 如果一个 wordpress 的 projcet 挂了 2 个 theme 的 module ,ctrl + shift + n 打开同名文件的时候会出来多个选择

所以我个人偏好无关联的项目都独立建 Project

一个是因为 Intellij IDEA 会索引分析函数提供代码提示用, Project 太复杂,机器性能又不咋滴的同学会感觉卡
另一个是因为做项目A的时候会被项目B的函数啥的干扰

可能大部分同学的目录结构都是

盘符/code

然后各种项目丢在 code 里

那么就建议每个项目建立一个 Project,通过菜单来切换

FAQ:

第一次用 IDE 会发现 Project 和 Module 会产生配置文件, 特别是有版本控制的时候会被提交上去很讨厌!
解决方案1: svn:ignore 或 .gitignore
解决方案2:新建的时候修改下配置文件的路径,玩法同你装软件到非C盘一样

非项目内文件如何打开?
貌似去年有个版本开始支持直接打开非项目内文件了,菜单里打开或拖拽打开

举个多 Module 的栗子?
例如经常要改 HOSTS ,那么可以吧 HOSTS 文件夹做一个 module
然后新建一个文件类型叫hosts的,给他定义注释的快捷键,就可以快捷键打开 hosts 再快捷键注释/反注释 hosts了

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

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

欢迎有爱的同学 Fork

QQ群 149725975 (无关话题勿聊,热爱生命)

进阶

搞完 Project ,你应该可以和常规文本编辑器一样的开始用了
但是推荐把设置过一遍,你会发现很多用不到和想不到但用得到的神奇功能
记得分享, 共同进步

下载

http://www.jetbrains.com/idea/download/index.html

今天说的是File Path

如何进入标签页文档对应的目录呢?
在上图红色区域也就是标签上按住Ctrl+单击,就会出现一个File Path
不错,我这个txt文档正是存在于
D:\Videos\av\bt\种子包\Red Hot Fetish Collection目录.txt
随便哪个层级,直接单击,会打开资源管理器了

快捷键 Ctrl + Alt +F12

以上