0

0

WebStorm的使用方法集合(图文)

不言

不言

发布时间:2018-09-29 14:01:06

|

14459人浏览过

|

来源于博客园

转载

本篇文章给大家带来的内容是关于WebStorm的使用方法集合(图文),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

1. 图片宽高提示。

8345475b687c83a71e0564419b0ac733_b.jpg

平时你在写 html 时,遇到 img 标签时,是不是要费好大劲去知道图片的宽高?ws 直接展示给你了。

2. 标签重构、文件重命名、 CSS 重构以及 JS 重构

2.1 标签重构

如果你想把

此处省略200行

改为

此处省略200行

要怎么办?在 WS 里,你只需将光标移到

或者

,让后按重构的快捷键就可以轻松地把它变为 p 标签。

2.2 文件重命名

你想把 style1.css 重命名为 style2.css,但是 style1.css 被很多 html 文件引用了,怎么办?
使用 WS 的文件重命名功能,大胆地重命名吧,它会自动帮你更新所有引用。(前提是你的引用是正确且符合常规的)

2.3 CSS 重构

另外,如果你想把内联的 style 移到外部 CSS 文件里,也是可是通过重构功能实现的。虽然在生产环境下你不会在 HTML 里写内联 style 的,但我们调试时为了方便,会经常这么做。等你调试完了,自然会用到这个功能。

91b67865b3314f4b5c135204b0dd923f_b.jpg

(WS 8.0 以更新此功能,详见评论)
JS 重构也很好用。包括变量重命名、声明提升等等等等。WS 是我用过的对 JS 重构支持最好的 IDE。你可以告诉我还有什么 IDE 对 JS 重构支持不错,我去比较下。

动易网上商城管理系统 2006 Sp6 Build 1120 普及版
动易网上商城管理系统 2006 Sp6 Build 1120 普及版

将产品展示、购物管理、资金管理等功能相结合,并提供了简易的操作、丰富的功能和完善的权限管理,为用户提供了一个低成本、高效率的网上商城建设方案包含PowerEasy CMS普及版,主要功能模块:文章频道、下载频道、图片频道、留言频道、采集管理、商城模块、商城日常操作模块500个订单限制(超出限制后只能查看和删除,不能进行其他处理) 无订单处理权限分配功能(只有超级管理员才能处理订单)

下载

3. 对业界最新技术的支持

你安装 WS 后,你会发现它内置了对 SASS、NodeJS、CoffeeScript、Jade 的支持。
连 Emmet 都内置了,而且快捷键还是 Tab,太方便了。没有这个功能我都不想写 HTML 了。
如果它发现你的文件后缀是 .less/.scss/.sass 或者 .coffee,就会问你,是否需要把它们自动编译为 css 或 js。
如果它发现你有 NPM,会自动列出你安装过的 package,方便管理和升级。(这个貌似需要装 NodeJS 支持插件,我记不清是不是自带功能了。)

4. 可自定义代码格式化规则

虽然很多 IDE 都有格式化功能,但能自定义到 WS 这种程度的还没见过。

是否保留单行的 { }。

是否保留单行的function。

属性是否要对其。

冒号前后是否加空格。

……

6d1f1bfa75bb9080e2f9ad345ed5f87d_b.jpg

5. 设置项是可搜索的(英文)

「这个 IDE 有这么多设置项,我要折腾好久啊!」
WS 考虑到了这一点,所以他的所有设置都是可搜索的,不会让你漫无目的地摸索,你想设置什么就搜什么。
想设置外观,就搜 appearance;
想设置快捷键,就搜 keymap;
想设置插件就搜 plugin。
当你进入 keymap,你还可以进行二级搜索,比如你想知道 format 功能的快捷键,就直接搜 format。
你甚至可以反过来,搜 Ctrl + L 这个快捷键对应的功能是什么。
P.S. WS 的快捷键是支持二次按键的。比如我把 Git add 的快捷键设置为 Alt+G & Alt + A,把 Git commit 设置为 Alt+G & Alt+C。这样的好处是不会让你无快捷键可设。

6. 再说说其他 IDE 也有的功能吧

6.1. 本地版本控制。你在 WS 里所有的编辑都被存在本地了,你随时可以还原到历史版本。

679f2c4dcbed3eb1657af15d34573871_b.jpg

不过要注意这些历史有可能被清除。

6.2. 能与番茄工作法结合。有个插件叫      Pomodoro-tm,应该有不少程序员喜欢。

6.3. 能与 Redmine / Trello / Jira 等集成。

6.4 文件结构分析。直接看图。

JS 文件结构

HTML 文件结构


这个功能对于大文件特别有用。好功能太多,有机会以后再介绍了。

相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

61

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

31

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

72

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

20

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

21

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

7

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

4

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

49

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

11

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Web前端入门基础教程
Web前端入门基础教程

共251课时 | 33.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号