大家好，我是半虹，這篇文章將會介紹如何在 macOS 中從零配置前端開發(fā)環(huán)境

零、序言

這篇文章主要是想提供一份前端開發(fā)配置清單，以及簡單介紹一下安裝步驟，僅供大家參考

正式開始之前先說一下硬件，電腦是 MacBook Air M2，系統(tǒng)是 macOS Sonoma 14.0

一、軟件安裝

1、Chrome

macOS 其實自帶有 Safari 瀏覽器，但我個人感覺還是 Chrome 用起來更順手一些

默認的 Google 搜索引擎，內(nèi)置的 DevTools 開發(fā)者工具，豐富的 Extensions 生態(tài)，都能提升日常開發(fā)體驗

不過 App Store 沒有提供 Chrome 安裝，我們需要自己到官網(wǎng)下載安裝，好在過程也非常簡單

首先在官網(wǎng)下載安裝程序 (dmg 文件)，之后雙擊運行，將 Chrome 圖標拖動到 Application 目錄即可

最后，想給大家安利一些自己正在用的 Chrome 插件：

• 幾枝：簡約古典的新標簽頁，在新標簽頁上展示中國傳統(tǒng)色的層疊波浪效果搭配經(jīng)典詩詞
• React Developer Tools：React 開發(fā)官方插件，提供組件調(diào)試以及性能分析工具

2、VSCode

前端開發(fā)領(lǐng)域里面，比較常用的 IDE 莫過于 VSCode 和 WebStorm，兩個都挺好用的，可以根據(jù)需要安裝

因為我有多種語言的開發(fā)需求，所以選擇 VSCode 會更方便一點 ，而 VSCode 也是要自己從官網(wǎng)下載安裝

首先在官網(wǎng)下載應用程序 (zip 文件)，然后雙擊解壓，將 VSCode 應用拖動到 Application 目錄就可以

這里有一點值得介紹一下，官網(wǎng)上的 Mac zip 下載會有三個選項：

• Intel chip??????：適用于 Intel 芯片
• Apple silicon：適用于 M 系列芯片
• Universal????????：同時適用于 Intel 和 M 系列芯片

建議下載對應的就好，沒必要下載 Universal，能節(jié)省一點空間，比如我這里就是下載 Apple silicon

最后還是安利一些 VSCode 的插件，大家可以在 VSCode 的 Extensions 面板去搜索安裝

• GitLens：Git 多人協(xié)作插件，可以提供每個文件歷史修改記錄，方便追蹤文件修改
• Prettier：代碼格式化工具，方便統(tǒng)一代碼風格

噢噢對了，VSCode 還有一個方便實用的命令行工具，即在終端通過 VSCode 打開指定文件，設(shè)置如下：

• 首先，要在 VSCode 按下 command + shift + p 打開命令面板
• 然后，輸入 shell command，選擇 Install 'code' command in PATH
• 這樣，就能在終端使用 code <名稱>，在 VSCode 打開指定文件

3、Typora

最后一個安裝的軟件是 Typora，這是一個即時渲染的? Markdown ?寫作軟件，符合大眾一般的寫作習慣

這款軟件之前也安利過，推薦有 Markdown 寫作需求的同學使用，同樣也是在官網(wǎng)下載安裝

雖說現(xiàn)在 Typora 需要收費，但網(wǎng)上還是有不少“激活教程”的，正常安裝后可按以下操作激活：

• 進入目錄 /Applications/Typora.app/Contents/Resources/TypeMark

  • 這里可以在訪達中按快捷鍵 command + shift + g 進行搜索

• 打開文件 page-dist/static/js/LicenseIndex.180dd4c7.e861f46f.chunk.js

  • 這里可以用任意文本編輯器，如果上面已經(jīng)安裝 VSCode，那直接用 VSCode 打開就行

• 全文搜索 e.hasActivated="true"==e.hasActivated，并將其替換為 e.hasActivated="true"=="true"

  • 如果你是用 VSCode 打開的，那么按 command + option + f 即可打開替換

二、環(huán)境配置

1、Xcode Command Line Tools

Xcode 是 macOS 上的 IDE，主要用于開發(fā) macOS 和 iOS 應用程序，可以在 Apple Developer 進行下載

Xcode 中的命令行工具包 (Command Line Tools)，提供很多通用開發(fā)工具，例如 git、gcc、make 等

即使無需開發(fā) macOS 或 iOS 的應用，也能單獨下載 Command Line Tools，這時可以用 xcode-select 安裝

xcode-select --install

安裝完成之后，可以輸入以下命令查看當前用的 Command Line Tools 路徑

xcode-select -p # /Library/Developer/CommandLineTools

若想深入看看 Command Line Tools 究竟包括什么，打開上面的路徑就可以

簡單來說包括 Library、SDKs、usr 三個文件夾，其中 usr 的 bin 目錄下就有上百個常用的命令行工具

值得說明的是 Command Line Tools 可能存在多個，對應不同的 Xcode

而 xcode-select 是 macOS 自帶的工具，用于指定開發(fā)者目錄

該目錄可決定 Command Line Tools 和 BSD development commands 的路徑

其 xcode-select 常用參數(shù)如下：

• xcode-select --install：安裝命令行工具包
• xcode-select -p：打印當前開發(fā)者目錄
• xcode-select -s：切換當前開發(fā)者目錄
• xcode-select -r：重置默認開發(fā)者目錄

2、nvm

nvm 是 node 環(huán)境管理包，可以很方便地切換多個 node 版本，按照官網(wǎng)說明，安裝方式如下：

# 方式一
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# 方式二
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

其本質(zhì)就是下載 install.sh 文件，然后用 bash 執(zhí)行該文件：bash install.sh

nvm 默認安裝到 ~/.nvm，且在 ~/.zshrc 配置環(huán)境變量

如果 安裝時沒有 ~/.zshrc，可手動創(chuàng)建后重新執(zhí)行腳本，或手動創(chuàng)建后直接將以下文本寫入文件

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

最后 重新激活配置文件即可

source ~/.zshrc

3、conda

conda 是 python 環(huán)境管理包，可以很方便地管理多個 python 環(huán)境，按照官網(wǎng)說明，安裝步驟如下：

• 創(chuàng)建安裝目錄

mkdir -p ~/.miniconda3

• 下載安裝腳本

curl https://repo.anaconda.com/miniconda/Miniconda3-latest-MacOSX-arm64.sh -o ~/.miniconda3/miniconda.sh

• 執(zhí)行安裝腳本

bash ~/.miniconda3/miniconda.sh -b -u -p ~/.miniconda3

• 刪除安裝腳本

rm -rf ~/.miniconda3/miniconda.sh

• 配置環(huán)境變量

~/miniconda3/bin/conda init zsh # macOS 默認終端目前是 zsh，如果是其它終端，可以用其它參數(shù)

本質(zhì)上就是將以下文本寫入 ~/.zshrc

# >>> conda initialize >>>
# !! Contents within this block are managed by 'conda init' !!
__conda_setup="$('/Users/<username>/.miniconda3/bin/conda' 'shell.zsh' 'hook' 2> /dev/null)"
if [ $? -eq 0 ]; then
    eval "$__conda_setup"
else
    if [ -f "/Users/<username>/.miniconda3/etc/profile.d/conda.sh" ]; then
        . "/Users/<username>/.miniconda3/etc/profile.d/conda.sh"
    else
        export PATH="/Users/<username>/.miniconda3/bin:$PATH"
    fi
fi
unset __conda_setup
# <<< conda initialize <<<

三、終端設(shè)置

1、界面

macOS 默認的終端軟件是 Terminal，個人覺得原有的界面有點過于正規(guī)了，所以稍稍調(diào)整一下

根據(jù)自己的使用習慣，做了兩個設(shè)置：

• 半透明界面
  • 打開終端，按快捷鍵 command + shift + , 打開設(shè)置
  • 描述文件 - 文本 - 背景：設(shè)置為黑色，不透明度設(shè)置為 90%，模糊度設(shè)置為 0%
  • 描述文件 - 文本 - 文本：設(shè)置為白色，不透明度設(shè)置為 100%
• 全屏幕終端
  • 打開終端，按快捷鍵 command + shift + , 打開設(shè)置
  • 描述文件 - 窗口 - 窗口大?。毫袛?shù) & 行數(shù) 各設(shè)置為大于屏幕寬高即可

2、功能

一個好的終端應該是好看且好用的，但 macOS 默認的終端 zsh 確實算不上是這個標準

為此，oh-my-zsh 來了，這是一個基于 zsh 的拓展工具集, ?提供主題配置、插件機制等常用功能

按照官網(wǎng)說明，安裝方法如下：

# 方式一
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

# 方式二
sh -c "$(wget https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh -O -)"

本質(zhì)其實還是下載 install.sh 文件，然后使用 bash 執(zhí)行這個文件 bash install.sh

oh-my-zsh 默認安裝在 ~/.oh-my-zsh，環(huán)境變量配置在 ~/.zshrc

注意，這里會有一個坑，oh-my-zsh 安裝好之后，會發(fā)現(xiàn)原來設(shè)置的 nvm 和 conda 的環(huán)境變量失效了

因為在安裝時它會重寫 ~/.zshrc，并把原來的 ~/.zshrc 另存為 .zshrc.pre-oh-my-zsh

所以還需要把 .zshrc.pre-oh-my-zsh 原有的 nvm 和 conda 的配置復制回新的 ~/.zshrc 文件

下面主要講講怎么配置主題和應用插件

我們可以看到上面配置文件 ~/.zshrc，其中有兩行是比較重要的

# 主題配置項
ZSH_THEME="robbyrussell"

# 插件配置項
plugins=(git)

而在 ~/.oh-my-zsh/themes 目錄下可以看到所有已安裝的主題，更換主題只需要修改 ZSH_THEME 就可以

例如 目錄下有 af-magic.zsh-theme 主題文件，那么設(shè)置為 ZSH_THEME="af-magic" 就可以使用 該主題

官網(wǎng) 可以看到所有可用的主題

同樣 ~/.oh-my-zsh/plugins 目錄下可以看到所有已下載的插件，新增插件只需要加入 plugins 就可以

例如 有一款名為 z 的插件，如果希望新增這個插件，那么可以修改為 plugins=(..., z)

官網(wǎng) 可以看到所有可用的插件

注意，有些插件如果還沒有下載到插件目錄，配置使用之前需要先下載

最后，推薦一些非常好用的插件，更多的可以留給大家以后慢慢去探索：

• 自動補全：zsh-autosuggestions

git clone https://github.com/zsh-users/zsh-autosuggestions $ZSH_CUSTOM/plugins/zsh-autosuggestions

• 語法高亮：zsh-syntax-highlighting

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git $ZSH_CUSTOM/plugins/zsh-syntax-highlighting

安裝之后，進行配置，打開 ~/.zshrc 文件，修改 plugins 欄目，新增進去就好

plugins = (
  ...,
  zsh-autosuggestions,
  zsh-syntax-highlighting
)

修改之后，激活修改

source ~/.zshrc

好啦，本文到此結(jié)束，感謝您的閱讀！

如果你覺得這篇文章有需要修改完善的地方，歡迎在評論區(qū)留下你寶貴的意見或者建議

如果你覺得這篇文章還不錯的話，歡迎點贊、收藏、關(guān)注，你的支持是對我最大的鼓勵 (/ω＼)文章來源地址http://www.zghlxwxcb.cn/news/detail-835696.html

到了這里，關(guān)于效率系列(八) macOS配置前端開發(fā)環(huán)境的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！