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