{"topic":{"id":13874,"title":"js 开发工具及环境配置","slug":"topic","categoryId":2,"createdAt":"2024-11-18 08:58:55.989402","bumpedAt":"2025-05-31 13:47:18.601511","views":183,"postsCount":3,"highestPostNumber":3,"likeCount":6,"closed":false,"pinned":false,"pinnedGlobally":false,"pinnedAt":null,"pinnedUntil":null,"isBanner":false,"excerpt":"下载安装網路風暴 (WebStorm) (对学生或者非商业使用者免费) https://www.jetbrains.com/webstorm/ 下载安装 pnpm, Discourse 也在前段时间从 yarn 转向这个 js 包管理器 https://pnpm.io/installation Linux 用户可以在.zshrc 里设置个别名: alias npx='pnpx' alias npm='pnpm' 顺手用 pnpm 安装…","deletedAt":null,"isAnonymous":false,"category":{"id":2,"name":"网站","slug":"website","color":"986a44"},"author":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif"},"tags":[]},"posts":[{"id":43353,"postNumber":1,"raw":"1. 下载安装網路風暴 (WebStorm) (对学生或者非商业使用者免费)\n\nhttps://www.jetbrains.com/webstorm/\n\n2. 下载安装 pnpm, Discourse 也在前段时间从 yarn 转向这个 js 包管理器\n\nhttps://pnpm.io/installation\n\nLinux 用户可以在.zshrc 里设置个别名:\n```\nalias npx='pnpx'\nalias npm='pnpm'\n\n```\n\n3. 顺手用 pnpm 安装 node\n 之前我用的是 fnm, 不过 fnm 有点像使用了黑魔法，妳用`which node`看到的路径是在某个临时/虚拟路径底下\n ```\n pnpm env use --global lts\n ```\n\n\n\n4. 克隆 git 仓库并在 webstorm 中打开\n打开 `package.json`, 定位到`\t\t\"dev\": \"vite dev\",`行，点击前面的绿色运行 :arrow_forward: 按钮即可运行\n\n然后再点击右上角的绿色瓢虫🐞按钮即刻进行调试\n\n5. 如何调试\n webstorm 非常牛逼，你可以在 svelte 文件 (可理解为包含了逻辑/脚本代码的页面的模板) 里打断点，也可以在 javascript 里打断点 (不管它是运行在浏览器里的还是 `node` 里的), 浏览器f12或者 ctrl+shift+c 打开 dev tools\n\n6. misc\n* 为了开发得爽，你需要安装 svelte 插件以获得代码高亮，安装 classic ui 插件获得不像 ms vs code 的高级界面，安装 virtualkit 可以更方便区分不同路径底下的 `+page.svelte` 文件 (安装 shadcn 插件如果你使用 shadcn 的话)\n* 为了帮助新手，作为学生的你可以申请 github student pack 从而获得 github copilot 获得智能补全以及问答功能\n* 为了调试 js, 你需要安装 chromium 基浏览器。为了每次启动调试时历史数据不被清除，你需要简单设置一下:\n参考：https://www.jetbrains.com/help/webstorm/debugging-javascript-in-chrome.html#ws_js_debug_on_remote_server_example\n安装插件 https://chromewebstore.google.com/detail/cookie-editor/iphcomljdfghbkdcfndaijbokpgddeno 查看/编辑 cookie\n* WebStorm 自带的 diff 很强，有时候需要快速复制两端代码进行比较，调出 webstorm 的不方便，可以安装 [meld](https://meldmerge.org/)","cooked":"

下载安装網路風暴 (WebStorm) (对学生或者非商业使用者免费)

\n\n

下载安装 pnpm, Discourse 也在前段时间从 yarn 转向这个 js 包管理器

\n\n

Linux 用户可以在.zshrc 里设置个别名:

alias npx='pnpx'\nalias npm='pnpm'\n\n

顺手用 pnpm 安装 node
\n之前我用的是 fnm, 不过 fnm 有点像使用了黑魔法，妳用which node看到的路径是在某个临时/虚拟路径底下

 pnpm env use --global lts\n

克隆 git 仓库并在 webstorm 中打开
\n打开 package.json, 定位到\t\t\"dev\": \"vite dev\",行，点击前面的绿色运行 ▶️ 按钮即可运行

然后再点击右上角的绿色瓢虫🐞按钮即刻进行调试

\n
如何调试
\nwebstorm 非常牛逼，你可以在 svelte 文件 (可理解为包含了逻辑/脚本代码的页面的模板) 里打断点，也可以在 javascript 里打断点 (不管它是运行在浏览器里的还是 node 里的), 浏览器f12或者 ctrl+shift+c 打开 dev tools
\n
\n
misc
\n

为了开发得爽，你需要安装 svelte 插件以获得代码高亮，安装 classic ui 插件获得不像 ms vs code 的高级界面，安装 virtualkit 可以更方便区分不同路径底下的 +page.svelte 文件 (安装 shadcn 插件如果你使用 shadcn 的话)
为了帮助新手，作为学生的你可以申请 github student pack 从而获得 github copilot 获得智能补全以及问答功能
为了调试 js, 你需要安装 chromium 基浏览器。为了每次启动调试时历史数据不被清除，你需要简单设置一下:
\n参考：Debug JavaScript in Chrome | WebStorm
\n安装插件 Cookie Editor - Chrome 应用商店查看/编辑 cookie
WebStorm 自带的 diff 很强，有时候需要快速复制两端代码进行比较，调出 webstorm 的不方便，可以安装 meld

\n","createdAt":"2024-11-18 08:58:56.191328","updatedAt":"2024-12-22 15:15:44.855441","replyToPostNumber":null,"replyCount":0,"likeCount":3,"wordCount":492,"liked":false,"bookmarked":false,"polls":[],"reactions":[{"reaction":"💯️","count":1,"users":[{"id":1288,"username":"LittleWangInShanghai","name":"小王在上海"}],"hasReacted":false},{"reaction":"❤️","count":3,"users":[{"id":346,"username":"hoist","name":null},{"id":1288,"username":"LittleWangInShanghai","name":"小王在上海"},{"id":5151,"username":"Soyo34325","name":"Soyo34325"}],"hasReacted":false}],"wiki":false,"version":6,"publicVersion":6,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}},{"id":53872,"postNumber":2,"raw":"最近又想用网路风暴了，但之前透过学信网报告申请的 student pack 到期了，再申请的话提示之前申请过的只能 renew，但用户中心又没有 renew 入口。还好对非商用免费了。\n\n不过熟悉了 vscode 之后对 idea 还是不太习惯，particularly 好像没法方便地全局（整个 workspace）搜索，`^F` 只能在当前打开的文件里搜索。","cooked":"

最近又想用网路风暴了，但之前透过学信网报告申请的 student pack 到期了，再申请的话提示之前申请过的只能 renew，但用户中心又没有 renew 入口。还好对非商用免费了。

不过熟悉了 vscode 之后对 idea 还是不太习惯，particularly 好像没法方便地全局（整个 workspace）搜索，^F 只能在当前打开的文件里搜索。

\n","createdAt":"2025-05-31 09:09:37.114543","updatedAt":"2025-05-31 09:09:37.114543","replyToPostNumber":null,"replyCount":1,"likeCount":2,"wordCount":115,"liked":false,"bookmarked":false,"polls":[],"reactions":[{"reaction":"❤️","count":2,"users":[{"id":4668,"username":"IO","name":null},{"id":5905,"username":"PipaQinse233","name":"PipaQinse233"}],"hasReacted":false}],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":7137,"username":"emu_otori","name":"鳳笑夢","avatarUrl":"/uploads/image/0b/13/0b133abcd3dfadb90fdbf7583cfdc31ec56db3dbd063fce95dbe0f09296b527a.avif","admin":false,"moderator":true,"signatureRaw":null,"signatureCooked":null}},{"id":53896,"postNumber":3,"raw":"jetbrains ide 在 kde 或 win 下的全局搜索快捷键是 ctrl+shift+f（r 是替换），以及想要搜文件名/类名/动作名/设置项是双击 shift\n\n像账号问题可以找客服提单。","cooked":"

jetbrains ide 在 kde 或 win 下的全局搜索快捷键是 ctrl+shift+f（r 是替换），以及想要搜文件名/类名/动作名/设置项是双击 shift

像账号问题可以找客服提单。

\n","createdAt":"2025-05-31 13:47:18.601511","updatedAt":"2025-05-31 13:49:24.021866","replyToPostNumber":2,"replyCount":0,"likeCount":1,"wordCount":57,"liked":false,"bookmarked":false,"polls":[],"reactions":[{"reaction":"❤️","count":1,"users":[{"id":7137,"username":"emu_otori","name":"鳳笑夢"}],"hasReacted":false}],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}}],"hasMore":false,"lastReadPostNumber":1,"hasUrlPostNumber":false}