Mac中配置Node.js前端vscode环境(第二期)

核心组件:vscode、谷歌浏览器、Node.js(重点)、git

一、Node.js安装(nvm安装)

点击macos中的终端,保持bash,而不是zsh

若为zsh,则可在终端中使用下面命令变成bash

复制代码
chsh -s /bin/bash

然后输入mac电脑密码,回车,重启终端即可,便是如下图所示的图片:

接着输入:

复制代码
sudo vi /etc/hosts  

其中,sudo 是使用超管权限,vi 是打开文本编辑器的指令,vi 后面空一格,后面跟文件的路径

输入开机密码,回车,便可看见:

光标放到最后的localhost后面,输入i,进入编辑,将下列的内容复制进去:

复制代码
# GitHub520 Host Start
140.82.113.25                 alive.github.com
140.82.112.6                  api.github.com
185.199.108.153               assets-cdn.github.com
185.199.111.133               avatars.githubusercontent.com
185.199.111.133               avatars0.githubusercontent.com
185.199.111.133               avatars1.githubusercontent.com
185.199.110.133               avatars2.githubusercontent.com
185.199.110.133               avatars3.githubusercontent.com
185.199.111.133               avatars4.githubusercontent.com
185.199.111.133               avatars5.githubusercontent.com
185.199.111.133               camo.githubusercontent.com
140.82.113.21                 central.github.com
185.199.111.133               cloud.githubusercontent.com
140.82.112.9                  codeload.github.com
140.82.114.21                 collector.github.com
185.199.111.133               desktop.githubusercontent.com
185.199.111.133               favicons.githubusercontent.com
140.82.112.3                  gist.github.com
54.231.226.153                github-cloud.s3.amazonaws.com
52.217.234.41                 github-com.s3.amazonaws.com
3.5.8.106                     github-production-release-asset-2e65be.s3.amazonaws.com
52.216.245.236                github-production-repository-file-5c1aeb.s3.amazonaws.com
16.182.103.113                github-production-user-asset-6210df.s3.amazonaws.com
192.0.66.2                    github.blog
140.82.114.4                  github.com
140.82.113.18                 github.community
185.199.110.154               github.githubassets.com
151.101.193.194               github.global.ssl.fastly.net
185.199.108.153               github.io
185.199.110.133               github.map.fastly.net
185.199.108.153               githubstatus.com
140.82.112.25                 live.github.com
185.199.111.133               media.githubusercontent.com
185.199.111.133               objects.githubusercontent.com
13.107.42.16                  pipelines.actions.githubusercontent.com
185.199.110.133               raw.githubusercontent.com
185.199.110.133               user-images.githubusercontent.com
140.82.113.21                 education.github.com
185.199.111.133               private-user-images.githubusercontent.com


# Update time: 2025-01-03T20:09:20+08:00
# Update url: https://raw.hellogithub.com/hosts
# Star me: https://github.com/521xueweihan/GitHub520
# GitHub520 Host End

按下esc键,退出编辑。

最后输入

复制代码
:wq

保存。

验证下,输入:

复制代码
cat /etc/hosts

已成功验证,现在开始安装脚本:(有概率会失败,所以要反复安装如下命令,方可success)

复制代码
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash


将其中的这个【红色框住的】复制下:

然后接着输入:

复制代码
vi ~/.bashrc

回车。

将复制的内容粘贴进去:

复制代码
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

输入:wq 保存退出即可

最后我们输入:

复制代码
source ~/.bashrc

回车。【对环境变量进行加载】

最后输入如下命令,查看远端提供的nodejs的版本

复制代码
nvm ls-remote

其中,绿色的是长期维护的版本

命令下载:【下载绿色版本】

复制代码
nvm install v22.12.0

通过

复制代码
node -v

查询版本

到此结束

二、vscode中从常用的前端开发插件

live sever 插件:页面实时代码效果

代码写好后,点击右下角"go live"

相关推荐
kyriewen39 分钟前
Skills 榜前 10 我全装了:只有 3 个能直接用
前端·javascript·程序员
IT_陈寒1 小时前
当Java的hashCode遇上Lombok,我的缓存被全清了
前端·人工智能·后端
工控丫丫1 小时前
帆软看板中经常使用的公式函数及经常搭的组合
前端·javascript·数据库
jerrywus2 小时前
我用 GPT-6.1-sol 做了台会讲解的 3D 售货机:60 罐饮料,一口没喝上
前端·agent·claude
孟陬3 小时前
Foobar 技术周刊#159:当看不懂代码时,如何高效排障调试。脏页陷阱:一条只读查询,写入数 TB 数据。推测解码:大模型加速利器
前端·人工智能·后端
Zhao-Jichao3 小时前
AI Prompting for Everyone 课程笔记 - P17 图像生成 Imaging Generation
前端
Highcharts.js4 小时前
智能数据分析组件Orbit 正式发布与快速上手体验教程
前端·人工智能·信息可视化·数据分析系统·highcharts·orbit·智能可视化
FPGA小迷弟4 小时前
FPGA 与千兆以太网:各类物理接口的形式、区别、使用方法与应用场景详解
tcp/ip·macos·fpga开发·udp·fpga
螺丝钉tina4 小时前
[Playwright ][16]Playwright + TypeScript API 自动化测试实战:API测试
前端·javascript·typescript
小天源5 小时前
智叟云集系统 · 架构与职责分层
服务器·前端·数据库