Web前端开发的利器 —— Webstorm

一、Web前端开发的利器 —— Webstorm

1、Webstorm被认为是Web前端开发的利器，原因在于它能有效减少开发过程中的错误。作者曾因代码问题频繁出错，被软件测试人员批评，深感苦恼。一次与同行的交流中，他推荐了Webstorm，并现场演示了其强大的功能，如代码重构、代码检查、全局搜索等。这让作者决定使用Webstorm来提升自己的开发能力。

2、Webstorm的特点包括代码补全、格式化代码、行注释、块注释、全局搜索等。以下是一些常用快捷键：

3、代码补全：Ctrl+ Space（Windows）/ Control+ Space（macOS）

4、格式化代码：Ctrl+ Alt+ L（Windows）/ Command+ Alt+ l（Mac OS）

5、行注释：Ctrl+/（Windows）/ Command+/（macOS）

6、块注释：Ctrl+ Shift+/（Windows）/ Command+ Shift+/（macOS）

7、全局搜索（内容）：请自定定制快捷键，默认快捷键会与其他软件（输入法）发生冲突。

8、随处搜索（文件）：Shift（两次）（Windows）/ Shift（两次）（macOS）

9、跳转到某一行：Ctrl+ G（Windows）/ Command+ G（Mac OS）

10、移动到代码块开始：Ctrl+ Shift+ [（Windows）/ Command+ Shift+ [（Mac OS）

11、移动到代码块结束：Ctrl+ Shift+ ]（Windows）/ Command+ Shift+ ]（Mac OS）

12、复制当行：Ctrl+ D（Windows）/ Command+ D（macOS）

13、删除当行：Ctrl+ Y（Windows）/ Command+ Delete（macOS）

14、移动代码位置：Alt+ Shift+↑/↓（Windows）/ Option+ Shift+↑/↓（Mac OS）

15、反撤销（取消撤销）：Ctrl+ Shift+ Z（Windows）/ Command+ Shift+ Z（macOS）

16、如果Web项目使用包管理工具，没有安装过依赖的话，点击“package.json”，就会提示安装。

17、可以通过“最近的变更”来查看操作记录来恢复操作。

18、通过Webstorm来执行某些命令工具，比如打包压缩文件。

19、Webstorm还支持一些插件，如代码编辑插件、实用类、汉化包等。以下是一些推荐的插件：

20、增强Git，像VScode的GitLens的效果。

21、 git消息规范来自AngularJS社区，仅供参考。

22、使用Webstorm时，建议电脑配置一定高，内存至少8G以上，CPU Intel i5以上，否则会影响开发效率。如果前端项目规模大（二十个页面以上），需要长期代码重构，请使用Webstorm而不是VSCode。为了工作效率与稳定性，请优先考虑使用Ultimate（最终）版本，不建议使用Community Edition（社区）版本。支持正版软件。

二、前端开发工具WebStorm使用教程(五):配置项目结构

1、WebStorm是由JetBrains公司开发的一款针对JavaScript的开发工具，广受中国JS开发者赞誉，被誉为“Web前端开发神器”、“最强大的HTML5编辑器”和“最智能的JavaSscript IDE”。其功能强大，与IntelliJ IDEA共享源代码，继承了IntelliJ IDEA在JavaScript领域的强大特性。

2、在WebStorm中，内容根目录包含了当前使用的文件集合，可能按照子文件夹层次结构组织。项目的顶级文件夹即为内容根。你可以添加任何文件夹作为项目的一部分。在“目录”页面添加文件夹作为新的内容根即可。

3、WebStorm会识别内容根目录中包含源代码的文件夹和其他类型的内容文件夹。默认情况下，所有文件夹被视为源，除非标记为其他类型，此时会显示。例如，在HTML标记属性中输入时，自动完成功能会建议资源根文件夹中的图像。

4、配置文件夹类别，可以还原文件夹的上一个类别。对于不再需要的文件，可以暂时从项目中排除，不影响代码完成、导航和检查功能。

5、可以通过“选择文件类型”列表排除纯文本文件。该文件在目录树中会带有特定图标。

6、按名称模式排除文件和文件夹时，请注意排除的文件夹在“项目”工具窗口中会标记为已排除，但不会添加到“排除的文件夹”列表中。

7、以下图为例，该模式用于排除“哺乳动物.ts”和“动物.ts”两个文件。同时排除了“lib”和“src/lib”两个文件夹。若仅需排除“lib”文件夹，应选中该文件夹并点击“排除”按钮。

8、项目中可以设置多个内容根目录，用于处理来自不同目录的文件，尤其是处理静态内容（如图标）时非常方便。可在“设置”对话框中添加多个内容根。

9、以上内容涵盖了配置项目结构的基本教程。如需了解更多相关教程，可继续浏览本系列文章，欢迎留言提问。

三、现在比较好用的前端开发工具有哪些啊

作为一个前端开发工程师，使用一款自己上手且功能强大的开发工具是非常重要的，但是面对这么多开发工具，到底哪个比较好呢？下面我个人推荐几款自己感觉还不错的前端开发工具，希望作为大家的参考。

作为一个编程的菜鸟，对于英语真的是有心无力，尤其是一些国外的开发工具都是英文界面，我就非常的不喜欢。hbuilder是国产的一款前端开发工具而且是免费的，对于英语不好的前端工程师是一个不错的消息。hbuilder的官方大致是这么解释为什么要开发hbuilder的：HTML最开始其实不是一个编程语言，确实用不着什么ide。但是发展到现在，7w多个语法，js越来越庞大，真开发一个达到原生水准的App，不是用以前的文本编辑器能搞定的。

目前竟然没有一个开发工具能把7w多HTML5语法提示齐全，这不科学，在原生开发里这是不可想象的，xcode之于iOS，eclipse之于Android，vs之于winphone，在语法提示、转到定义、重构、调试等方面都非常高效。作为同时熟悉原生和HTML5开发的我们，我们在开发HTML5时明显感受到效率低下。于是有了hubuilder。确实是hubuilder支持左右的前端语法代码提示，这个是我最喜欢的它的一个原因，而且还有强大的其他语言支持和开发webapp等功能，强大到没朋友。缺点也是有一些的，就是其有些稳定，有时可能会有些卡顿的现象，希望官方修复。

sublime text是一个轻量级的编辑器，也是支持各种编程语言，sublime text所有的强大功能都是支持插件的，而且快捷键十分的好用，可以极大的减少开发的劳动程度，使用sublime就是要使用其快捷键和插件。该软件的优点的轻量级但是功能强大，缺点是对于项目的管理等不是很方便，代码提示不如hubuilder强大。

这是一款很经典的前端开发工具了，以前人们使用的是它的可视化开发工具，但是现在它只能是作为一个代码编辑器来使用的，当然一些可视化的功能现在也是用的上，如要插入Flash视频等还是使用可视化简单一些，毕竟不是所有人都能纯手写哪些意义不大的代码，优点是人们熟悉稳定，支持一些可视化的插入操作，缺点是代码提示不好，不能进行快速的开发只能是作为学习使用。

总结：以上只是前端开发工具中个人比较熟悉的，除此之外还有很多优秀的前端开发工具如webstorm等，大家可根据自己的喜好选择自己习惯的工具进行开发。