前端环境搭建

拿到一个新电脑，第一步肯定要整一整自己的开发环境啦

Homebrew

mac 很好用的包管理器，后面蛮多工具都可以用这个下载和安装

可以通过官网提供的命令行安装

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

网络超时的话可以尝试用国内的源

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

Homebrew 国内源：https://gitee.com/cunkai/HomebrewCN

Homebrew 使用指北：https://sspai.com/post/56009

Git

mac 里安装 git 比较简单的方法是安装 Xcode Command Line Tools。在终端（注意用 mac 自带的终端）输入以下命令就行了

git --version
# 按提示操作就行了

或者用 homebrew

# 版本太低，可以用 homebrew 升级下
brew install git
# 后面可能有提示进一步操作，按照提示来就行了
# ...
# 之后更新也可以直接用
brew update && brew upgrade

其他系统参考 https://git-scm.com/book/zh/v2/%E8%B5%B7%E6%AD%A5-%E5%AE%89%E8%A3%85-Git

nrm

nrm 可以帮助管理 git 源，比如 taobao、cnpm、企业源...

npm i -g nrm
# 一般用taobao稳定点
nrm use taobao

Github/Gitlab

本地通过 ssh 连接 github/gitlab，需要先生成 ssh 密钥，程连接服务器时也用得到

ssh-keygen -t ed25519 -C "your_email@example.com"
# 默认回车就行

接下来就在 ~/.ssh 下会生成 id_ed25519.pub（公钥）和 id_ed25519（密钥），公钥内容添加到 github/gitlab 就行了，添加教程参考关于向帐户添加 SSH 密钥

终端环境

程序员，终端环境肯定要熟啊，不过默认的 shell 我不是很喜欢，所以得整一整

warp

https://www.warp.dev/b

基于 rust 编写的终端工具，默认使用 zsh 和支持输入记忆和提示，界面也挺美观的，但是默认并没有很好的代码高亮，比如针对 zsh alias 没有高亮。用这个还是用 iterm2 就看个人喜好了

iterm2

自带的终端还是比较拉的，warp 之前比较推荐 iterm2，参考官网下载安装

shell

可以把 shell 理解成操作系统内核外的一层壳，它是用户和操作系统交互的桥梁，后来 shell 也慢慢地变成了内核与用户交互的脚本语言的总称，比如：bash、zsh、csh、ksh、ash 等等

# 查看支持的 shell
cat /etc/shells

我比较喜欢用 zsh，如果系统没自带的话，得安装一个

brew install zsh

oh my zsh

默认的 zsh 用起来还是不够爽，这个时候就需要 oh my zsh 了。官网提供的命令行安装参考 https://ohmyz.sh/#install

安装过程如果遇到超时问题： Failed to connect to raw.githubusercontent.com port 443:Connection refused，试试给 Wifi 的 DNS 配置加一个 114.114.114.114

alias

可以设置快捷命令 alias，追加到 ~/.zshrc 后面，比如

# Set personal aliases, overriding those provided by oh-my-zsh libs,
# plugins, and themes. Aliases can be placed here, though oh-my-zsh
# users are encouraged to define aliases within the ZSH_CUSTOM folder.
# For a full list of active aliases, run `alias`.
#
# Example aliases
alias gst="git status"
alias glg="git log"

主题配置

待补充...

Node.js 环境

可以用 brew 安装或者上官网下载独立的安装包

brew install node

不过还是比较推荐用 fnm 或 nvm 来管理 node

fnm

# 会有墙的问题
curl -fsSL https://fnm.vercel.app/install | bash
# 或者用 homebrew 安装
brew install fnm

用 brew 还要配置环境变量，将下面代码段加到当前 shell 的配置文件就行

# ~/.zshrc 没有这个文件直接新建
eval "$(fnm env --use-on-cd)"

使用

fnm install --lts
# 安装指定版本，并且会自动切换到对应版本 fnm install 16
# 使用其他版本 fnm use 18
# 设置为全局版本 fnm default 18
# 查看本地已安装的版本
fnm ls
# 查看官方已发布的所有版本
fnm ls-remote | grep v16
# 速度慢的时候，可以切换到国内源
fnm install 16 --node-dist-mirror=https://npmmirror.com/mirrors/node

nvm

通过 nvm 管理 node 版本（包括 npm）

brew install nvm

安装完会提示到 ~/.zshrc 文件中补充 nvm 命令的配置，可以通过 vim 编辑 ~/.zshrc 保存

nvm install stable // 安装最新稳定版 node
node -v
npm -v

nvm 常用命令可以参考这个文章，整理的还可以：https://titangene.github.io/article/nvm.html

如果遇到 nvm 安装 Nodejs 超时的情况，可以尝试终端输入以下命令改下镜像源

# 设置 Node.js 镜像源
export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node
# 再执行安装
# nvm ls-remote 查看所有线上可用的包
nvm install stable

也有其他安装方法，比如官网的命令 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash，但这命令容易超时，可以用国内的下载源，参考 https://github.com/ineo6/nvm

包管理工具

Node.js 安装后默认自带 npm，其他包管理工具得额外安装

# yarn
npm install --global yarn
# pnpm
npm install -g pnpm
# brew install pnpm
# 如果没有安装 Node.js，想省事可以用这个
# npm install -g @pnpm/exe

chrome 配置

浏览器首选 chrome，没意见吧？

chrome 插件推荐

FEhelper。前端工具箱，json 处理、颜色转换、时间戳处理等等
沙拉查词。变量命名必备
Clear Cache。快速清理网页缓存
React Developer Tools
Redux DevTools
Vue.js devtools
NIM。node 调试工具
下载+。更便捷的管理下载文件
Momentum。浏览器”屏保“

vscode 配置

代码编辑器还是 vscode 香 ~

vscode 插件推荐

GitLens。便于查看代码提交记录，甩锅专用
Todo Tree。可以高亮一些个人自定义的注释，比如 TODO、NOTE 等
ES7 React/Redux/GraphQL/React-Native snippets。react 支持
Volar。Vue 支持
Import Cost。查看引入文件的大小，比如 import、require 引入的依赖
filesize。查看当前文件的大小，右下角显示
Paste JSON as Code。能快速生成 JSON 数据的 ts 数据类型
Markdown Preview Enhanced。markdown 预览增强版，比默认的预览工具好用
tree-generator。快速生成目录树
koroFileHeader。生成文件头部注释和函数注释

其他

serve。可以快速起个本地静态服务，用于调试前端打包产物

总结

以上就基本搭建好一个前端开发环境了，后续有新的内容会继续补充，欢迎大家提 issue

Homebrew​

Git​

nrm​

Github/Gitlab​

终端环境​

warp​

iterm2​

shell​

oh my zsh​

相关插件​

alias​

主题配置​

Node.js 环境​

fnm​

nvm​

包管理工具​

chrome 配置​

chrome 插件推荐​

vscode 配置​

vscode 插件推荐​

其他​

总结​