Blog source code on GitHub

macOS 前端开发环境配置

0xinhua 发布于

Overview

当我们更换新的电脑或者入职新公司的时候，通常会需要重新配置一下电脑的开发环境，比较理想的方式就是能够复制我上一台设备的一些配置和软件，这样能快速地开始开发工作，这篇文档记录的是常用的软件、前端开发环境配置等，以及如果使用 dotfiles 重复利用这些配置；每个开发者或许都有自己的 dotfiles 对一些命令行工具、IDE 等配置的备份，然后通过脚本自动化新设备的所有的配置。

Setup

  • 硬件

    • 💻 MacBook Pro
      • 版本：一般内置最新版 macOS，建议手动升级到最新版本：左上角  图标 -> 系统偏好设置 -> 软件更新
      • Finder:
        • 可根据个人喜好显示 -> 勾选【显示路径栏】【显示状态栏】
        • 显示所有文件扩展名 -> 系统偏好设置 -> 高级 -> 显示所有文件扩展名
      • 这里收集了一些非常好用的 Mac 应用程序、软件以及工具 awesome-mac
      • Mac的高效率开发上篇
    • 🖥 显示器
    • 人体工学座椅 + 站立办公支架

  • 浏览器

  • Command Line Tools

Xcode CLT 前端开发有很多工具依赖 Xcode Command Line Tools，可以直接使用下面命令行安装，并且可以不需要安装 Xcode Xcode-select 管理着 xcode的Developer Directory 你能轻松得使用 xcode-select --switch 在多个版本的 Xcode 之间切换对应的开发工具路径

sh
1xcode-select --install
  • Homebrew

macOS 上各种软件的管理，只要有 Homebrew 就足够了。

Homebrew 是一款享有盛名的包管理工具，Homebrew 的意思是家酿啤酒。基本上下面所有的软件都可以通过它在终端通过执行命令来完成安装，例如安装 Google Chrome ：

sh
1brew cask install google-chrome

先安装 Homebrew

sh
1/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

如何使用 Homebrew:

  • Homebrew 快速入门

  • Terminal

    • Font 字体
    • item2
    • Mac配置终端环境 iTerm2 + Zsh + Oh My Zsh + tmux
    • Zsh and Oh-My-Zsh Zsh 是一个专为交互式使用而设计的命令行 shell，建议搭配 Oh-My-Zsh 一起使用，配置详见 oh-my-mac 极致前端开发环境配置手册
shell
1brew install iterm2
shell
1sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
  • Editor
    • Visual Studio Code
    • Settings.json 是 vsc 的基本配置文件，例如常用的字体、缩减、自动保存等
json
1{
2  // font
3  "editor.fontSize": 13,
4  "editor.fontFamily": "Fira Code, JetBrains Mono, SF Mono, Menlo, Monaco, 'Courier New', monospace",
5  "editor.fontLigatures": true,
6  "editor.fontWeight": "400",
7  "prettier.prettierPath": "node_modules/prettier",
8  "typescript.updateImportsOnFileMove.enabled": "always",
9  // Enable per-language
10  "[javascript]": {
11    "editor.formatOnSave": true
12  },
13  "[typescript]": {
14    "editor.formatOnSave": true
15  },
16  "javascript.updateImportsOnFileMove.enabled": "always",
17  "liveServer.settings.donotShowInfoMsg": true,
18  "gitlens.gitCommands.skipConfirmations": [
19    "fetch:command",
20    "switch:command"
21  ],
22  "gitlens.gitCommands.closeOnFocusOut": true,
23  "workbench.sideBar.location": "right",
24  "security.workspace.trust.untrustedFiles": "newWindow",
25  "workbench.tree.indent": 10,
26  "extensions.ignoreRecommendations": true,
27  "explorer.openEditors.visible": 10,
28  "files.exclude": {
29    "node_modules": true
30  },
31  // telemetry
32  "telemetry.enableTelemetry": false,
33  "telemetry.enableCrashReporter": false,
34  "extensions.autoCheckUpdates": false, // Regular
35}
36
  • Snippet 代码片段

现在大多数代码编辑器都支持了代码片段的功能，借助于 snippet 你可以创建常用的代码模板，减少一些重复性的输入工作，snippet 分两种：全局和当前项目的片段，具体步骤如下：Preference -> User Snippets -> 输入 snippet 名字，例如创建一个简单的 react componnet 代码片段：

json
1"Snippet Name": {
2  "prefix": "rc", // 触发片段的快捷键
3  "body": [
4    "import React, { useEffect, FC } from 'react';",
5    "",
6    "const $1: FC = (props) => {",
7    "",
8    "  useEffect(() => {",
9    "  console.log('$1');",
10    "   }, []);",
11    "",
12    "  return (",
13    "    <div>$1</div>",
14    "  )",
15    "}",
16    "",
17    "export default ${1};"
18  ],
19  "description": "Create Basic Component"
20}

Node.js

shell
1brew install node
2brew pin node
  • Npm node包管理
sh
1npm config set registry=http://bnpm.byted.org
  • Node.js 版本管理，通常情况下本地开发会出现需要切换 node 版本，常用的两个工具
    • n - a Node.js version management
    • nvm - Node Version Manager

Git

  1. 下载并配置本地 Git

    shell
    1git config --global user.name “First Last” (keep the quotes)
2git config --global user.email “Email” (keep the quotes)

  2. 生成 SSH 密钥

添加 SSH 密钥能让你计算机和 GitLab 之间建立安全连接。需在本地生成 ssh key 并在 GitHub 或 GitLab keys 中添加。注意粘贴的是公共 SSH 密钥，它通常包含在文件` ~/. SSH /id_rsa。'，以 'ssh-rsa' 开头，不要使用私有 SSH 密钥 ssh-keygen -t rsa -b 4096 -C “youremail@example.com”

dotfiles

Tools