效率系列(八) macOS配置前端开发环境

您所在的位置：网站首页 › 做前端开发笔记本什么配置好 › 效率系列(八) macOS配置前端开发环境

效率系列(八) macOS配置前端开发环境

2024-07-10 11:45| 来源: 网络整理| 查看: 265

大家好，我是半虹，这篇文章将会介绍如何在 macOS 中从零配置前端开发环境

零、序言

这篇文章主要是想提供一份前端开发配置清单，以及简单介绍一下安装步骤，仅供大家参考

正式开始之前先说一下硬件，电脑是 MacBook Air M2，系统是 macOS Sonoma 14.0

一、软件安装 1、Chrome

macOS 其实自带有 Safari 浏览器，但我个人感觉还是 Chrome 用起来更顺手一些

默认的 Google 搜索引擎，内置的 DevTools 开发者工具，丰富的 Extensions 生态，都能提升日常开发体验

不过 App Store 没有提供 Chrome 安装，我们需要自己到官网下载安装，好在过程也非常简单

首先在官网下载安装程序 (dmg 文件)，之后双击运行，将 Chrome 图标拖动到 Application 目录即可

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

几枝：简约古典的新标签页，在新标签页上展示中国传统色的层叠波浪效果搭配经典诗词React Developer Tools：React 开发官方插件，提供组件调试以及性能分析工具 2、VSCode

前端开发领域里面，比较常用的 IDE 莫过于 VSCode 和 WebStorm，两个都挺好用的，可以根据需要安装

因为我有多种语言的开发需求，所以选择 VSCode 会更方便一点，而 VSCode 也是要自己从官网下载安装

首先在官网下载应用程序 (zip 文件)，然后双击解压，将 VSCode 应用拖动到 Application 目录就可以

这里有一点值得介绍一下，官网上的 Mac zip 下载会有三个选项：

Intel chip ：适用于 Intel 芯片Apple silicon：适用于 M 系列芯片Universal ：同时适用于 Intel 和 M 系列芯片

建议下载对应的就好，没必要下载 Universal，能节省一点空间，比如我这里就是下载 Apple silicon

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

GitLens：Git 多人协作插件，可以提供每个文件历史修改记录，方便追踪文件修改Prettier：代码格式化工具，方便统一代码风格

噢噢对了，VSCode 还有一个方便实用的命令行工具，即在终端通过 VSCode 打开指定文件，设置如下：

首先，要在 VSCode 按下 command + shift + p 打开命令面板然后，输入 shell command，选择 Install 'code' command in PATH这样，就能在终端使用 code ，在 VSCode 打开指定文件 3、Typora

最后一个安装的软件是 Typora，这是一个即时渲染的 Markdown 写作软件，符合大众一般的写作习惯

这款软件之前也安利过，推荐有 Markdown 写作需求的同学使用，同样也是在官网下载安装

虽说现在 Typora 需要收费，但网上还是有不少“激活教程”的，正常安装后可按以下操作激活：

进入目录 /Applications/Typora.app/Contents/Resources/TypeMark

这里可以在访达中按快捷键 command + shift + g 进行搜索

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

这里可以用任意文本编辑器，如果上面已经安装 VSCode，那直接用 VSCode 打开就行

全文搜索 e.hasActivated="true"==e.hasActivated，并将其替换为 e.hasActivated="true"=="true"

如果你是用 VSCode 打开的，那么按 command + option + f 即可打开替换二、环境配置 1、Xcode Command Line Tools

Xcode 是 macOS 上的 IDE，主要用于开发 macOS 和 iOS 应用程序，可以在 Apple Developer 进行下载

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

即使无需开发 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 自带的工具，用于指定开发者目录

该目录可决定 Command Line Tools 和 BSD development commands 的路径

其 xcode-select 常用参数如下：

xcode-select --install：安装命令行工具包xcode-select -p：打印当前开发者目录xcode-select -s：切换当前开发者目录xcode-select -r：重置默认开发者目录 2、nvm

nvm 是 node 环境管理包，可以很方便地切换多个 node 版本，按照官网说明，安装方式如下：

# 方式一 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

其本质就是下载 install.sh 文件，然后用 bash 执行该文件：bash install.sh

nvm 默认安装到 ~/.nvm，且在 ~/.zshrc 配置环境变量

如果安装时没有 ~/.zshrc，可手动创建后重新执行脚本，或手动创建后直接将以下文本写入文件

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 环境管理包，可以很方便地管理多个 python 环境，按照官网说明，安装步骤如下：

创建安装目录 mkdir -p ~/.miniconda3 下载安装脚本 curl https://repo.anaconda.com/miniconda/Miniconda3-latest-MacOSX-arm64.sh -o ~/.miniconda3/miniconda.sh 执行安装脚本 bash ~/.miniconda3/miniconda.sh -b -u -p ~/.miniconda3 删除安装脚本 rm -rf ~/.miniconda3/miniconda.sh 配置环境变量 ~/miniconda3/bin/conda init zsh # macOS 默认终端目前是 zsh，如果是其它终端，可以用其它参数

本质上就是将以下文本写入 ~/.zshrc

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

【本文地址】

效率系列(八) macOS配置前端开发环境

效率系列(八) macOS配置前端开发环境

今日新闻

推荐新闻