V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
wiirhan
V2EX  ›  程序员

用 Windows 的前端小伙伴环境是怎么配置的?

  •  
  •   wiirhan · 2022-09-05 14:26:02 +08:00 · 7954 次点击
    这是一个创建于 818 天前的主题,其中的信息可能已经有所发展或是发生改变。

    之前一直用 wsl2 ,里面装 ubuntu 作为开发环境,但是 webstorm 的支持不是很好,对 pnpm 的支持也不太好。想知道用 windows 的前端小伙伴开发环境是怎样的。学习学习!!!

    80 条回复    2022-09-08 12:33:08 +08:00
    dengqing
        1
    dengqing  
       2022-09-05 14:31:39 +08:00
    vscode + wsl2
    thinkershare
        2
    thinkershare  
       2022-09-05 14:35:12 +08:00
    VSCode+WSL2(Ubuntu 20.04)+Docker
    Kenmin
        3
    Kenmin  
       2022-09-05 14:36:45 +08:00
    vscode + nvm + pnpm
    7c00
        4
    7c00  
       2022-09-05 14:44:26 +08:00
    环境:wsl2(debian)
    编辑器:vim + coc
    之前也用 pnpm ,然后最近开始用 bun 替代
    wiirhan
        5
    wiirhan  
    OP
       2022-09-05 14:51:24 +08:00
    @7c00 现在就开始使用 bun 呢?
    wiirhan
        6
    wiirhan  
    OP
       2022-09-05 14:53:22 +08:00
    @Kenmin 命令行使用的啥?
    winson030
        7
    winson030  
       2022-09-05 14:54:17 +08:00
    vscode + vmware 虚拟机开 manjaro ,ssh 连进去
    zhuangzhuang1988
        8
    zhuangzhuang1988  
       2022-09-05 14:56:00 +08:00
    vscode + yarn
    命令行随便 有时候直接 cmd
    dcsuibian
        9
    dcsuibian  
       2022-09-05 15:01:39 +08:00
    webstorm + nvm + yarn
    不过最近感觉 nvm 好像没太大用,而且可能会影响全局安装的一些 npm 包,在考虑卸载
    dcsuibian
        10
    dcsuibian  
       2022-09-05 15:02:33 +08:00
    命令行用 PowerShell ,不过不是默认的 Windows Powershell ( powershell v5 ),而是 pwsh ( powershell v7 )
    yangzzzzzz
        11
    yangzzzzzz  
       2022-09-05 15:06:58 +08:00
    powershell7 + oh my post + nvm 完全够用了。wsl2 有些地方用起来不舒服
    7c00
        12
    7c00  
       2022-09-05 15:07:05 +08:00
    @wiirhan 目前只是用来代替 npm install 和 npm run/exec ,install 比 pnpm 还快,也对存储友好。

    bun + fish 也非常好用,比如 bun add 补全,bun run 补全

    http://tva1.sinaimg.cn/large/0061q8GHgy1h5vqt5hyabj30lh064mzd.jpg

    http://tva1.sinaimg.cn/large/0061q8GHgy1h5vqtrw8g3j30lh04sabq.jpg
    wiirhan
        13
    wiirhan  
    OP
       2022-09-05 15:14:47 +08:00
    @7c00 🐮的,我去试试
    cxtrinityy
        14
    cxtrinityy  
       2022-09-05 15:15:51 +08:00 via Android
    为啥楼上 vs 一水溜的 wsl ,有啥黑魔法加成么,不是前端,就好奇
    fengjianxinghun
        15
    fengjianxinghun  
       2022-09-05 15:18:17 +08:00
    vscode+vmware/centos7+docker/ubuntu1804
    haohaaaa
        16
    haohaaaa  
       2022-09-05 15:21:31 +08:00 via iPhone   ❤️ 1
    @cxtrinityy 因为 vs code 原生支持 wsl ,且支持程度非常好,就感觉 Windows 是 Linux 发行版一样。
    Kenmin
        17
    Kenmin  
       2022-09-05 15:23:51 +08:00
    @wiirhan powershell 7 ,倒是上面一水儿的 wsl 是什么情况……
    7c00
        18
    7c00  
       2022-09-05 15:36:19 +08:00   ❤️ 1
    @cxtrinityy 我的情况是,windows 不是我的常用的系统,linux 和 macos 才是,所以会用 wsl 。而看项目和团队,在大家的环境都不是 windows 而你用 windows 遇到环境问题的时候,wsl 可能就不得不用。
    lzgshsj
        19
    lzgshsj  
       2022-09-05 15:44:34 +08:00
    scoop install volta
    volta install node
    volta install pnpm
    大项目 webstorm ,小玩意 vscode
    volta 就是 https://volta.sh
    顺带一提,wsl2 我也装了,但是基本不用。要求项目必须从一开始就完全处于 wsl 环境下,打开 windows 下的项目基本不可用,npm install 或者打包能慢得你怀疑人生。
    codingBug
        20
    codingBug  
       2022-09-05 16:11:29 +08:00
    vscode + wsl2
    hymxm
        21
    hymxm  
       2022-09-05 16:22:40 +08:00
    wsl 打开 win 下的 git repo 慢的一批,不知道 楼上的大佬们有没有遇到过
    yaphets666
        22
    yaphets666  
       2022-09-05 16:38:15 +08:00
    我草。。。前端用 linux 开发的报下公司名?我看看哪个公司这样啊
    placeholder
        23
    placeholder  
       2022-09-05 16:43:21 +08:00
    visual studio 2022 preview

    visual studio code insider

    剩下的开发什么装什么,测试一下命令行,测试通过就齐活开干
    66beta
        24
    66beta  
       2022-09-05 16:44:56 +08:00
    windows terminal
    没有特殊情况的话,直接 powershell 就能过日子了,特殊情况就开 wsl
    wiirhan
        25
    wiirhan  
    OP
       2022-09-05 16:48:44 +08:00
    @hymxm 如果 clone GitHub 上的代码是会很慢,其他时候都不慢
    terranboy
        26
    terranboy  
       2022-09-05 16:53:44 +08:00
    vs code remote 随便什么环境
    wtf12138
        27
    wtf12138  
       2022-09-05 17:01:40 +08:00
    前端用 wsl 有什么优势吗?不懂求科普
    KuroNekoFan
        28
    KuroNekoFan  
       2022-09-05 17:03:55 +08:00
    感觉用 wsl 必要性不是很大,不太清楚 docker desktop 是否需要 wsl ,如果不需要的话我觉得不装 wsl 也无所谓,git-bash 足够用了
    sechi
        29
    sechi  
       2022-09-05 17:22:46 +08:00
    原来大佬真的都在用 Linux.....
    7c00
        30
    7c00  
       2022-09-05 17:26:05 +08:00
    @wtf12138 wsl 的优势是因为它是 linux ,如果不知道为什么要用 wsl ,那就是没优势。工具而已,如非必要选趁手的用就好。
    feller
        31
    feller  
       2022-09-05 17:51:03 +08:00
    前端用 linux 开发,就好比后端开发用记事本,又不是不能跑( dog )
    wiirhan
        32
    wiirhan  
    OP
       2022-09-05 18:00:05 +08:00
    @wtf12138 命令行好看🐶
    zhuweiyou
        33
    zhuweiyou  
       2022-09-05 18:09:02 +08:00
    webstorm + windows terminal + git bash + zsh + nvm
    joshua7v
        34
    joshua7v  
       2022-09-05 18:12:40 +08:00
    windows mac 都用同一套环境 wezterm + nvim
    walpurgis
        35
    walpurgis  
       2022-09-05 18:26:59 +08:00 via iPhone   ❤️ 1
    @cxtrinityy 因为 nodejs 在 windows 下问题很多,体验一言难尽,最不折腾的解决方案就是跑在*nix 里
    buruoyanyang
        36
    buruoyanyang  
       2022-09-05 18:31:39 +08:00
    偶尔帮前端写两个页面,webstrom + yarn, 其他都差不多
    ysc3839
        37
    ysc3839  
       2022-09-05 18:59:32 +08:00
    我不是做前端开发的,只是偶尔有 Node.js 需求,目前是使用 MSYS2 zsh shell ,mintty 终端,以及用 fnm 管理 Node.js 版本。
    选择 fnm 是因为它跨平台,不需要再去研究别的工具,独立可执行文件,解压就能用,以及速度快,比 nvm 快很多。
    https://github.com/Schniz/fnm
    jsq2627
        38
    jsq2627  
       2022-09-05 19:10:24 +08:00 via iPhone
    之前是 wsl2 ,后来因为 ssh 远程连入不方便,最后回归用 hyperv+arch
    l4ever
        39
    l4ever  
       2022-09-05 19:33:14 +08:00
    wsl2 不卡吗?
    当你的项目有几千个小文件的时候.
    stein9999
        40
    stein9999  
       2022-09-05 19:42:38 +08:00
    vscode + wsl2 + brew + volta + pnpm + fish
    creanme
        41
    creanme  
       2022-09-05 19:45:25 +08:00
    windows terminal + nushell
    creanme
        42
    creanme  
       2022-09-05 19:47:19 +08:00
    因为我命令用的比较简单,一般来说就用命令行使用 npm, node, git 啥的,所以 windows terminal + nushell 完全够了。
    pytth
        43
    pytth  
       2022-09-05 20:04:56 +08:00 via iPhone
    vscode + node + cmd + npm
    uni
        44
    uni  
       2022-09-05 20:12:33 +08:00
    之前我也是 wsl ,后来重装了几次之后越来越懒就不用了。。。现在是 vscode+nvm 就够了感觉
    NessajCN
        45
    NessajCN  
       2022-09-05 20:15:01 +08:00
    vmware(arch) + vscode(remote ssh)
    darknoll
        46
    darknoll  
       2022-09-05 20:48:13 +08:00
    @cxtrinityy 装逼呗
    Danswerme
        47
    Danswerme  
       2022-09-05 20:53:01 +08:00
    用的 pwsh 够了,npm 装包除了维护几个老项目时安装 node-sass 时折腾了一下之外没遇到啥问题。
    abcbuzhiming
        48
    abcbuzhiming  
       2022-09-05 21:16:26 +08:00
    @walpurgis 能不能具体举几个常见例子来说明 modejs 在 windows 下 [问题很多] ?我所知道的,无非是 nodejs 里一些使用 C 库的程序不兼容 windows ,但是有一说一,常规 web 前端真的能撞上 [问题很多] 吗?现在是 2022 年,windows 版本的 nodejs 已经跟着迭代到了 18.x ,如果说现在,在 windows 下,nodejs 仍然是 [问题很多] 。那我真的只能觉得 nodejs 的官方在划水
    cl1107
        49
    cl1107  
       2022-09-05 21:55:55 +08:00   ❤️ 1
    编辑器:vscode 包管理 pnpm ; fnm 管理 nodejs 版本; powershell 7 + oh my posh + windows terminal
    AyaseEri
        50
    AyaseEri  
       2022-09-05 21:59:06 +08:00
    vscode/webstorm + git bash/powershell + pnpm ,又不是不能用,WSL 有点多余。
    yunyuyuan
        51
    yunyuyuan  
       2022-09-05 22:21:58 +08:00
    公司电脑我装的 manjaro ,aur 上有飞书可以直接更新,vscode + vscode-neovim + zsh konsole 很舒服。
    家里 windows 轻度写代码,就 vscode ,也没啥不方便的,唯一的不爽,就是 neovim 的自动切换输入法插件不能用。试过 wsl2 ,偶尔闪退就没用了
    yunyuyuan
        52
    yunyuyuan  
       2022-09-05 22:23:51 +08:00
    @walpurgis #35 同问,windows nodejs 有哪些问题呢,个人写了好几年前端没碰到过啥问题
    zhuangzhuang1988
        53
    zhuangzhuang1988  
       2022-09-05 22:59:50 +08:00
    @yunyuyuan 都是微软自带不兼容光环.
    chiling
        54
    chiling  
       2022-09-05 23:27:33 +08:00
    vscode + wsl2 + nvm + ohmyzsh

    个人感觉使用 wsl2 的坑:
    1. 有时候网络不通,又不知道怎么配置,很折磨,浪费时间
    2. 项目开久了,开多了,会占用内存不释放,把内存搞到 90%多

    个人感觉使用的好处:
    1. wsl2 就是 linux 环境了,没有 windows 环境兼容的坑,也可以配置跟服务端环境差不多,避免安装部署的时候的环境兼容引起的坑
    2. rm -rf 删除 node_module 秒删
    3. 用习惯了 vscode-remote 的话,其实还可以直接把环境搬到云上面,这样无论在哪都可以搬砖,也没有多台设备切换的烦恼
    HowardLeo
        55
    HowardLeo  
       2022-09-06 04:56:38 +08:00 via iPhone
    vscode+yarn 命令行用的 VSCode 里直接调的 Powershell v5 主要这样可以少开一个 Windows Terminal😂😂
    Aloento
        56
    Aloento  
       2022-09-06 05:50:35 +08:00
    话说你们为什么要用 wsl2
    本小前端一直都是 scoop nodejs + winget vscode + corepack yarn / pnpm 没遇到过任何问题(
    Hyoban
        57
    Hyoban  
       2022-09-06 07:19:33 +08:00
    wsl2 加上 cfw tun mode 网络环境都完全不用配置了
    GiantHard
        58
    GiantHard  
       2022-09-06 08:00:31 +08:00 via Android
    虚拟机装 Linux
    renhou
        59
    renhou  
       2022-09-06 08:29:33 +08:00
    很纳闷,有什么场景必须要用 wsl2
    jixule
        60
    jixule  
       2022-09-06 08:30:56 +08:00
    vscode+windows terminal+postman 一把梭
    nba2k9
        61
    nba2k9  
       2022-09-06 08:40:12 +08:00
    我一直以为 wsl 就是给服务端开发用的
    xiangyuecn
        62
    xiangyuecn  
       2022-09-06 08:53:59 +08:00
    好奇你们是不是要在服务器里面部署 node_module ???
    goonxh
        63
    goonxh  
       2022-09-06 08:57:11 +08:00
    webstorm + nvm ,不同的项目配置不同的 node 版本,很舒适
    小玩意就用 vscode
    bojackhorseman
        64
    bojackhorseman  
       2022-09-06 10:20:50 +08:00
    rbq123456
        65
    rbq123456  
       2022-09-06 10:48:15 +08:00
    不太明白为啥要用 wsl ,楼里都在说 wsl 但是我好像没有什么场景是要用到 wsl 的,前端不是 npm i ,npm run dev 就完事儿了么,跨系统的就加个 cross-env 。
    n18255447846
        66
    n18255447846  
       2022-09-06 11:18:05 +08:00
    前端要什么 wsl ,玩玩而已罢了,顶多有些包可能要编译一下,不过大部分都是预编译好了放 github 上。windows 最让人诟病的是编译环境,不过配好 node-gyp 对于前端来说完全够了
    dfkjgklfdjg
        67
    dfkjgklfdjg  
       2022-09-06 11:37:58 +08:00
    vsc+nvs ,然后改一改环境变量就结束了,其他的还需要考虑?都是 npm 上或者 github 上面拉现成的东西。
    终端有条件就是 windows terminal ,没条件就用 powershell 。
    dfkjgklfdjg
        68
    dfkjgklfdjg  
       2022-09-06 11:41:21 +08:00   ❤️ 1
    不是很能理解前端要上 linux 的,已经入侵其他领域了吗?
    而且电脑不是公司提供的么,还能有选择的?
    whypool
        69
    whypool  
       2022-09-06 11:45:26 +08:00 via Android
    vscode 一把梭不行么? wsl 是什么野路子?
    james2013
        70
    james2013  
       2022-09-06 11:48:28 +08:00
    实在不理解使用 wsl 和 linux 的必要性?
    webstorm+npm+yarn 足够了
    运行工程的话,点击按钮就完事了
    使用命令行安装包的话,直接在 webstorm 底部点击 Terminal 进行操作,输入一行 yarn 安装命令就可以了
    yhxx
        71
    yhxx  
       2022-09-06 11:53:32 +08:00
    只有我一个人在 vscode 里用 gitbash 当命令行工具吗
    yhxx
        72
    yhxx  
       2022-09-06 11:54:06 +08:00
    windows 对前端最大的问题感觉还是 node-gyp ,别的都还好
    xbchaonba
        73
    xbchaonba  
       2022-09-06 11:55:43 +08:00
    @james2013 搞复杂一点不是显得更神秘吗
    creanme
        74
    creanme  
       2022-09-06 12:03:30 +08:00
    @walpurgis 你是说 node-sass, electron, puppeteer 之类的吗?但是这些都可以通过设置 npm ,直接下载编译好的,说说常见的

    npm config set sass_binary_site https://npmmirror.com/mirrors/node-sass;
    npm config set electron_mirror https://npmmirror.com/mirrors/electron/;
    npm config set puppeteer_download_host https://npmmirror.com/mirrors;
    npm config set chromedriver_cdnurl https://npmmirror.com/mirrors/chromedriver;
    npm config set operadriver_cdnurl https://npmmirror.com/mirrors/operadriver;
    npm config set phantomjs_cdnurl https://npmmirror.com/mirrors/phantomjs;
    npm config set selenium_cdnurl https://npmmirror.com/mirrors/selenium;
    npm config set node_inspector_cdnurl https://npmmirror.com/mirrors/node-inspector;
    npm config set cypress_download_mirror https://npmmirror.com/mirrors/cypress;
    zed1018
        75
    zed1018  
       2022-09-06 12:45:53 +08:00
    vscode+wsl2
    用 n 管理 nodejs ,nvm 实在太慢了影响心情
    beichenshao
        76
    beichenshao  
       2022-09-06 13:39:07 +08:00
    wsl2 基本是需要处理堡垒机或者服务器上查询一些东西时候,用到一些命令,但是 windows 环境不支持,所以用到
    TsubasaHanekaw
        77
    TsubasaHanekaw  
       2022-09-06 14:21:38 +08:00
    论工具, 前端的花活可真多
    yanbinkwan96
        78
    yanbinkwan96  
       2022-09-06 14:46:19 +08:00
    有两台笔记本,一台是 centos 另一个是 windows 。vscode remote container 接入 centos 。
    AnkhSpirit
        79
    AnkhSpirit  
       2022-09-07 10:42:25 +08:00
    @dcsuibian nvm 全局安装的包是安装在当前版本的 node 里的,想用就得切到那个版本
    dcsuibian
        80
    dcsuibian  
       2022-09-08 12:33:08 +08:00
    @AnkhSpirit 这个我知道,算一方面
    我用 yarn 的时候,yarn global add 就不起效,必须要 npm i -g
    所以会担心 nvm 出现什么其它影响
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2705 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 09:01 · PVG 17:01 · LAX 01:01 · JFK 04:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.