Skip to content

ITA-G03/O2O

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Intellij IDEA 技巧系列: MEAN Stack 开发配置与常用插件

Background

As best Java,JavaScript,MEAN Stack IDE, With useful MEAN plugin, IntelliJ Idea helps you develop faster And get better coding experience.

作为JetBrains系列IDE的爸爸,与WebStorm不同的是,Idea在默认安装过程中, 默认只添加了Node.JS的支持.对于模块化JavaScript的支持(而非html内嵌JavaScript代码), Idea还需要修改一些配置,更新一些插件来达成完美的MEAN Stack开发体验.

本文将从 MEAN 与 Common 配置两部分出发,介绍在开发过程中好评的插件.

Common Useful Plugin

所有的Jetbrains系列插件,都可以通过 File->Settings->Plugin界面进行搜索安装 Plugin Install UI

.ignore

不同的版本控制工具(Version Control),一般都有各自的忽略列表. 通过忽略列表匹配对应的文件. 来达到防止对不应该Commit的文件的提交.

.ignore是一款版本管理辅助插件. 我一般使用它的以下功能:

  1. 根据模板自动生成对应版本控制工具忽略列表 创建.gitignore文件

  2. 根据忽略列表对文件名进行 灰度颜色 灰度标记文件夹,时刻提升自己那个文件夹是 (Build出来的/临时文件/lib) 不必人工改动. 文件忽略灰度标记

Grep Console

查看控制台输出的时候,经常会忽略一些Exception,Error,Warning 因为他们在控制台中跳得太快,而且不显眼 当出现Exception需要快速定位问题的时候,查找log的效率一定程度上决定了debug的效率.

Grep Console是一款控制台润色插件. 我主要使用它的润色功能: 默认情况下,Grep Console会对每一行输出的关建字进行检索. 该行出现ERROR,FATAL,EXCEPTION的时候会对该行进行红色润色 该行出现WARNING的时候进行黄色润色. 这样就可以快速翻滚追踪到这个信息

根据特定规则对特定行列润色标记

Grep Console 配置界面

Batch Script Support(Bash Support)

大多数项目都会有自己的自动构建/部署脚本. 在Mac,Linux下通常是Shell脚本 在Windows下通常是cmd,bat脚本

Batch Script Support(Bash Support)(分别是两个插件,但是功能大相径庭) 是一款能够快速执行脚本的插件.

一般我们是在对应系统的Terminal里面call这个脚本就行了. 搞笑?这个功能不是没什么卵用吗

别闹,像Windows这些渣渣自带的Terminal去跑bat,cmd输出有颜色吗? 设置的Buffsize太小还会吃掉最上一部分的内容 所以这里就要配合上面的 Grep Console配合使用了.

添加脚本文件到Run Configuration 一键运行

MEAN Stack Support Plugin

Node.js Global Support

Node.JS集成功能本来在安装Idea的时候就自带了这集成,不过有时候不小心会被取消掉. 在编辑JavaScript代码的时候,如果用到了Node.js的原生API而没有配置Node.JS的提示的时候. 写起来就比较烦心.

在这里先提及一下 Idea的Libraries in Scope功能: Libraries in Scope是指当前编辑的JavaScript代码实际调用的函数库. 对于代码分开存储,使用bower,npm管理第三方JavaScript代码库的动态链接相当使用.

查看当前编辑文件的Scope Libraries

如果开启Node.js的提示? 0. 在插件中安装Node.js集成.

这一步估计大多数人都有,可以跳过

  1. 添加项目的Node.js全局支持

File->Settings->Languages & Frameworks->Node.js and NPM 添加Node.js全局提示

AngularJS Support/CSS Library Support

当所引用的JS,CSS文件并不在源代码文件夹内 Idea原本是不能提示的 但是如果将所需的第三方lib添加到Libraries in Scope中,就可以

还是在当前编辑文件的右下角,打开Libraries in Scope窗口->Add添加Library 打开Libraries窗口

添加实际文件

添加github上提供的第三方lib

Mongo Plugin

Idea官方自带的关系型数据库插件非常强大,但是对于MongoDB则支持不是很好. 集成MongoDB的第三方插件,叫做Mongo Plugin. 不是很好用的Mongo Plugin

其实个人比较推荐 另一个MongoDB 可视化工具,叫做Robomongo

Live Edit

还记得之前Adobe出过一款叫Brackets的软件,前端开发修改源代码页面自动刷新的一改即可见的能力. 非常强大. Live Edit其实也实现了这个功能.篇幅关系这里不详细讲,仅仅提及这个功能,且因为我只是在Chrome里面 实验过,还没有深刻的体会.

启动Live Edit功能之后,相当Chrome里面的html,js映射到源代码上来. Idea内部直接与Chrome的开发控制台连接,修改源代码等同在Chrome的开发者控制台中修改.

Summary

其实Idea上还有一些比较常见的插件,但是需要结合实际的开发场景,决定是否Useful.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •