js 开发工具及环境配置

网站
1
  1. 下载安装 網路風暴 (WebStorm) (对学生或者非商业使用者免费)
  1. 下载安装 pnpm, Discourse 也在前段时间从 yarn 转向这个 js 包管理器

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

alias npx='pnpx'
alias npm='pnpm'
  1. 顺手用 pnpm 安装 node
    之前我用的是 fnm, 不过 fnm 有点像使用了黑魔法，妳用which node看到的路径是在某个临时/虚拟路径底下
 pnpm env use --global lts
  1. 克隆 git 仓库并在 webstorm 中打开
    打开 package.json, 定位到 "dev": "vite dev",行，点击前面的绿色运行 :arrow_forward: 按钮即可运行

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

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

  2. misc

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

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

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

2 个赞
3

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

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

1 个赞