`

工程和界面—Webstorm入门指南

 
阅读更多

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

工程和界面—Webstorm入门指南

Webstorm中的工程

1.新建工程

“Quick Start”界面新建工程:

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

弹出如下界面:

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

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

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

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

2.收藏夹功能

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

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

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

3.工程其他操作

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

Webstorm的主要界面

1.顶部菜单

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

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

2.目录面包屑

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

3.工程界面

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

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

4.构造器界面

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

5.todo界面

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

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

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

6.底部信息

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

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

7.显示代码行数

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

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

8.工程环境配置

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

9.隐藏边栏菜单

点击左底下的关闭按钮。

10.快速拆合界面

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

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

11.隐藏菜单和工具栏

点击“View”

12.双栏代码界面

右击代码选项卡上的文件

分享到:
评论

相关推荐

    webstorm11 类sublime界面的设置

    用惯了sublime的同学,一下转化到webstorm可能有所不适应,今天先分享如何将webstorm的界面变成和sublime的界面一样。

    webStorm自制界面样式,类似Vscode经典主题

    webStorm, webStorm主题, webStorm主题色彩, 类似Vscode经典主题

    webstorm+登录注册+聊天大厅+点对点视频聊天+界面美化+源码

    >4、界面美化 注意:cert文件夹下需要放自己的ssl证书(ssl证书获取自己百度),并改名为ssl_server,两个文件都需要这样命名,只是后缀不一样。若是文件名不是ssl_server,则需要自己在源码中更改相应文件名。

    idea和webstorm.rar

    标题中的“idea和webstorm.rar”指的是两款广受欢迎的集成开发环境(IDEs)——IntelliJ IDEA和WebStorm的压缩包文件。这个压缩包可能是为了方便用户快速下载和安装这两款工具,避免官方下载速度慢的问题。 ...

    webstorm汉化包下载

    标题“webstorm汉化包下载”表明这是一个针对WebStorm的中文语言包资源,允许用户将其原本的英文界面转化为中文,便于理解和操作。汉化版通常包括了安装程序以及必要的汉化文件,确保用户能在安装过程中顺利完成语言...

    webstormwebstorm1

    webstorm

    javascript开发工具WebStorm教程用户界面简介中文WORD版

    资源名称:Javascript开发工具WebStorm教程用户界面简介 中文WORD版   内容简介: 本文档主要讲述的是Javascript开发工具WebStorm教程:用户界面简介;WebStorm是一款优秀的...

    webstorm的汉化包

    在WebStorm的案例中,汉化包使得开发者能够以熟悉的中文界面进行工作,提高工作效率,减少因语言障碍导致的误解和错误。 描述中提到的"目前3.1版本有bug,3.0版本ok",这意味着在WebStorm的3.1版本中,汉化包可能...

    webstorm 汉化

    然而,对于中文用户来说,WebStorm默认的语言是英文,可能会造成理解和操作上的不便。因此,汉化WebStorm显得尤为重要。 汉化WebStorm主要涉及到以下步骤: 1. **下载汉化资源**:首先,你需要找到WebStorm的中文...

    idea和 webstorm主题,一个浅色,一个深色。

    "Perfect VSCode"主题旨在在Idea和WebStorm中重现VSCode的深色界面,提供熟悉的编码体验。深色背景可以降低眼睛在强光下的不适感,特别是在夜间或者暗光环境下工作时。同样,你可以在IDE的设置中找到并启用这一主题...

    webstorm10.0.3汉化包

    总之,WebStorm 10.0.3汉化包是为了让中国用户能够更舒适地使用这款强大的Web开发工具,通过替换语言文件实现界面的本地化。正确安装和使用汉化包可以极大地提高开发效率,但也需注意备份和可能存在的兼容性问题。

    webstorm9设置scss和typescript

    本文将详细介绍如何在WebStorm 9中配置和使用SCSS与TypeScript。 **SCSS (Sass)** SCSS是Sassy CSS的缩写,是一种CSS预处理器,它扩展了CSS语法,引入了变量、嵌套规则、混合、函数等特性,使CSS编写更模块化,易于...

    WebStorm 10.0.4汉化包

    5. 重启WebStorm,设置界面应变为中文。 总的来说,WebStorm 10.0.4汉化包使得中国开发者能够更便捷地利用这一专业IDE进行Web开发,享受高效、智能的编程体验。通过充分利用其丰富的功能,开发者可以提升工作效率,...

    webstorm安装与设置.docx

    WebStorm 安装与设置 本文档主要介绍 WebStorm 的安装和设置,涵盖了 ...本文档为读者提供了 Web 前端开发的基础知识和 WebStorm 的使用指南,旨在帮助读者快速了解 Web 前端开发的基础知识和掌握 WebStorm 的使用。

    webstorm汉化包

    "webstorm汉化包"是为了解决这个问题,使得WebStorm的界面语言转换为中文,使得中文用户能够更加便捷地理解和操作软件。这个汉化包通常包含了WebStorm界面的所有文字资源,包括菜单、对话框、提示信息等,覆盖了软件...

    WebStorm Chinese Language Pack(中文语言包)

    这个语言包包含了所有WebStorm界面元素的中文翻译,如菜单、对话框、提示信息等,使得开发者在使用过程中无需面对语言障碍,提高工作效率。 描述中提到的操作步骤是将"resources_zh_CN.jar"文件从解压后的压缩包中...

    WebStorm默认配置

    - **自动格式化**:开启`Settings/Preferences > Editor > General > Auto Import`中的自动导入和`On Save`选项,让WebStorm在保存时自动格式化代码和优化导入。 3. **文件和目录忽略** - **忽略文件和目录**:在...

    WebStorm10.0.3 汉化包

    当你将这个文件复制并覆盖到WebStorm的安装目录下的相应位置时,原有的英文版WebStorm就会被替换为中文界面。通常,安装目录会包含WebStorm的主程序和其他支持文件,覆盖汉化包后,启动WebStorm即可看到语言已变为...

    WebStorm主题,类似VsCode经典主题

    本主题旨在为WebStorm用户提供与Visual Studio Code(VsCode)经典主题相似的视觉体验,以提高开发过程中的舒适度和效率。 首先,让我们来探讨WebStorm的主题定制。WebStorm允许用户根据个人喜好调整编辑器的外观,...

    WebStorm.rar

    这意味着你可以将你的WebStorm IDE从英文界面转换为中文界面,提高使用时的可读性和舒适度。汉化过程相当简单,只需几个步骤: 1. **下载汉化包**:首先,你需要确保你已经安装了WebStorm的18-19.2版本。然后,下载...

Global site tag (gtag.js) - Google Analytics