首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

工程跟界面—Webstorm入门指南

2014-01-13 
工程和界面—Webstorm入门指南转载自http://www.36ria.com/5698也可以点击顶部菜单栏“File”- “New Project

工程和界面—Webstorm入门指南

转载自http://www.36ria.com/5698

也可以点击顶部菜单栏“File”-> “New Project”。

弹出如下界面:

工程跟界面—Webstorm入门指南

“Location”指向想要创建的工程目录(如果该目录已经存在文件,会出现exist提示,没关系,直接下一步即可)。

“Project Type”为工程类型,应该理解为工程模版更合适,默认为空项目,Webstorm支持html5、bootstrap、NodeJs、express工程模版。

这里我们选择流行的“Bootstrap”,点击下一步后,Webstorm会自动从服务器拉取Bootstrap的代码(源代码)到工程目录内。

工程跟界面—Webstorm入门指南

Webstorm的工程缺陷在于没办法在一个界面中存在多个工程,再新建个工程,会打开个新的窗口,来回切换非常麻烦。

2.收藏夹功能

当工程目录很庞大时,有些子目录很经常打开,但层级又很深,这时候可以把目录添加到收藏夹里面,比如:

工程跟界面—Webstorm入门指南

(需命名下收藏列表名称)

添加成功后,左侧有个“Favorites”菜单:

工程跟界面—Webstorm入门指南

3.工程其他操作

工程跟界面—Webstorm入门指南

包括关闭工程、打开最近工程、重命名工程、打开工程等,比较简单,明河不再累述。

Webstorm的主要界面1.顶部菜单

工程跟界面—Webstorm入门指南

包含所有IDE功能,后面的文章会讲解到常用的功能项。

建议看下功能菜单上的快捷键。

2.目录面包屑

工程跟界面—Webstorm入门指南

这个功能非常实用,可以通过点击目录来寻找需要的文件,比打开工程界面来得节约空间,够低碳。

3.工程界面

工程跟界面—Webstorm入门指南

在Webstorm中用于查找文件的功能有很多,在工程界面界面中查找是最原始的,效率也是最差的,打开后还占用代码窗口面积。

建议使用“alt+1”来快速拆合工程界面。

4.构造器界面

工程跟界面—Webstorm入门指南

在这个界面中,可以快速查找js类的函数和对象,留意准确度跟你的注释量息息相关(注释需要符合jsdoc格式,这个后面会讲道)。

5.todo界面

工程跟界面—Webstorm入门指南

给代码加todo注释,是个非常好的习惯,比如提醒后面的维护者要注意些什么,比如提醒日后的自己要优化这处的代码等。

菜单项前面的6,,表示你可以使用”alt+6″来快速拆合此界面。

给代码加todo很简单:// TODO why??类似这样既可。

6.底部信息

工程跟界面—Webstorm入门指南

数字区域表示的是光标位置,有个实用的技巧:点击这个区域,可以跳转到指定行的代码:

工程跟界面—Webstorm入门指南

底部还可以设置文件的编码。

7.显示代码行数

右击代码界面左侧边框任意位置:

工程跟界面—Webstorm入门指南

左侧边框还会有代码版本变更标记,非常实用。

8.工程环境配置

工程跟界面—Webstorm入门指南

日后明河会讲解这部分内容。

9.隐藏边栏菜单

工程跟界面—Webstorm入门指南

点击左底下的关闭按钮。

10.快速拆合界面

可以使用“alt+数字键”来快速拆合界面。

如何查看界面的数字键呢?

工程跟界面—Webstorm入门指南

11.隐藏菜单和工具栏

点击“View”

工程跟界面—Webstorm入门指南

12.双栏代码界面

右击代码选项卡上的文件

工程跟界面—Webstorm入门指南

热点排行