MAIMIHO的博客

Vue Devtools 有一个功能, 可以直接在查看组件时, 直接打开对应的文件, 但默认是使用 VSCode 打开, 本文介绍如何使用 WebStorm 打开文件.即可, 这个文件不会被提交到 git, 所以不会影响其他人的开发设置.是为了不影响其他人的开发, 只有在自己的电脑上才会执行这段代码,是定义的私有环境变量。

每次升级 WebStorm 都会打开一个新的 Chrome，导致调试时需要重新登录，重新安装插件等问题。解决办法：固定 WebStorm 中 Chrome UserData 的路径，这样每次打开的 Chrome 都是同一个。文件 | 设置 | 工具 | Web 浏览器和预览勾选使用自定义用户数据目录。

和 webpack 的 alias 类似。

这样 控制台会显示一个可以点击的链接，点击后会跳转到对应的文件和行号。

vue.config.js 中配置。

WebStorm 调试 npm scripts (npm run)

IDEA WebStorm HTTP Client 保存token, 并在后续请求使用

WebStorm 运行 nodejs 脚本 路径不对

在 script 标签上添加 type<script type="text/jsx">

WebStorm 配置 stylelint安装npm i -D stylelint stylelint-config-prettier stylelint-config-recess-order stylelint-config-standard stylelint-order stylelint-scss根目录创建 .stylelintrc.js内容module.exports = { extends: [ "stylelint-config-standard", "styl

WebStorm 识别 webpack 配置 alias @ 等根目录创建 webstorm.config.js内容const webpackConfig = require("@vue/cli-service/webpack.config.js");module.exports = webpackConfig;引入配置File | Settings | Languages & Frameworks | JavaScript | Webpack...

WebStorm stylelint 自动修复先配置 stylelintFile | Settings | Languages & Frameworks | Style Sheets | Stylelint配置 External Tools全局安装 stylelintnpm i stylelint -gFile | Settings | Tools | External Tools添加下图配置C:\Users\XXX\AppData\Roaming\npm\stylelint.cm

搜索结果默认是100, 多了就只显示 100+ matches这个值可以修改Help | Find Action输入 Registry修改 ide.usages.page.size 的值, 默认是 100, 修改后直接可以生效.

使用 vue-i18n 的时候 需要进行繁琐的替换如:<div>XXX yyy ZzZ</div>替换为:<div>{{$t("xxx_yyy_zzz")}}</div>然后在 js 文件中增加条目xxx_yyy_zzz: "XXX yyy ZzZ",查找 tag 里面的文本也很繁琐使用 WebStorm 和 IDEA 等 IDE 配合正则表达式可以很快的完成这个操作使用方法类似(?<=>)(\w+)(?=<) 的正则表达

引用查找结果正则表达式分组捕获如: (\w+)-(\w+)可以使用 $1 $2 $3 引用分组例如:XXX-YYY替换为:XXXXXX_YYYYYY大小写转换\l 将字符更改为小写，直到字符串中的下一个字符\u 将字符更改为大写，直到字符串中的下一个字符\L 将字符更改为小写，直到文字字符串的末尾\U 将字符更改为大写，直到文字字符串的末尾例如:XXX-yyy替换为:xXXxxx_yyyYYYhttps://www.jetbrains.com/help/idea/20

1

目前 WebStorm 还不支持 国内特有的 rpx 单位.写 rpx 格式化后会出错.使用 less 的 unit 可以解决这个问题将 XXrpx 改成 unit(XX, rpx); 就可以了width: unit(64, rpx);height: unit(64, rpx);margin-left: unit(20, rpx);

AndroidManifest.xml 中加入如下所示代码xmlns:tools="http://schemas.android.com/tools"tools:ignore="LockedOrientationActivity"

WebStorm 微信小程序使用less使用WebStorm的File Watchers功能步骤如下:Settings -> Tools -> File Watchers -> 添加less 如图配置就行了. 每次保存就可以自动由less生成wxss了....