WebStorm提高工作效率的实用配置

3,497 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

前言

👉 记录WebStorm的一些实用配置

👉 持续更新中...

WebStorm打开项目忽略node_modules目录设置

当项目打开比较慢时,可以配置选择不打开node_modules目录,这样可以更快的打开项目

配置路径: File → Settings → Editor → File Types

image-20211023145431137

WebStorm快速定位已打开页面目录的方法

如果你只知道文件名字,想到找到文件的具体位置(如果是魔鬼级的目录,有这功能简直感动哭了🥶)

image-20211023144620455

动效展示

q1.gif

WebStorm解决git冲突

① 路径: VCS → Git → Resolve conflicts

image-20211023143831890

WebStorm打开设置

① 配置路径: File → Settings (以下的设置都是从这进去)

设置快捷键 Ctrl + Alt + S

image-20211023133843271

WebStorm自定义文档注释模板

① 配置路径: File → Settings → Editor → Live Templates

② 找到指定位置新增配置

image-20211023141223572

如以上配置的效果

image-20211023141447423

如果想设置变量

image-20211023142148596

效果

image-20211023142600452

WebStorm配置微信wxss样式支持

① 配置路径: File → Settings → Editor →File Types

② 找到添加的地方,输入要支持的文件后缀

微信    *.wxss
支付宝  *.acss

image-20211023133822439

WebStorm编译less并自动生成css/wxss/acss

① 配置路径:File | Settings | Tools | File Watchers | +

image-20211023134807214

② 配置在当前目录生成.css (如果是微信就改成.wxss,支付中改为.acss)

Arguments:
--no-color $FileName$ $FileNameWithoutExtension$.wxss
# --no-color 禁用彩色的输出
# $FileName$ 当前编辑文件名
# $FileNameWithoutExtension$.css  去除.less扩展名再加上.css扩展名

Output paths to refresh:
$FileNameWithoutExtension$.wxss
# 保存在当前less目录下,并刷新项目结构显示文件出来

🍇 如果想生成到指定文件夹的配置

Arguments:
--no-color $FileName$ $ProjectFileDir$/pages/$FileDirPathFromParent(less)$/$FileNameWithoutExtension$.wxss
# --no-color 禁用彩色的输出
# $FileName$ 当前编辑文件名
# $ProjectFileDir$/pages/$FileDirPathFromParent(less)$/$FileNameWithoutExtension$.css 项目目录/pages/在当前目录找到父目录less的路径/当前编辑文件名去除.less扩展名再加上.css扩展名

Output paths to refresh:
$ProjectFileDir$/pages/$FileDirPathFromParent(less)$/$FileNameWithoutExtension$.css
# 保存在指定的目录下,并刷新项目结构显示文件出来

image-20211023135133368

WebStorm修改已经Commit的Message信息

21/10/28新增

问题:想修改已经Commit的Commit信息;

$DFJABE7VSWDKG~Z(``69CQ.png


🎨【点赞】【关注】不迷路,更多前端干货等你解锁

往期推荐

👉小程序template模板使用详解

👉 最全的CSS阴影总结

👉 喊你来学JavaScript的加减乘除啦!

👉简说JavaScript里的深浅拷贝!