从Mac开箱开始 设置一个开发环境

今年(2022 年)我在过去几年使用了 MacBook Pro 2015 后购买了新的MacBook Pro 。在这里,我想与您分享我使用的用于 Web 开发的 Mac 设置

MACBOOK PRO 规格

  • 14英寸
  • Apple M1 Pro 配备 10 核 CPU、16 核 GPU 和 16 核神经引擎
  • 32 GB 内存
  • 512 GB 固态硬盘
  • QWERTY = 英语(国际)
  • macOS 蒙特雷

系统偏好

  • Dock
    • 从 Dock 中删除用不到的应用程序
    • 自动隐藏
    • 较小的Dock
    • “在 Dock 中显示最近的应用程序”关闭
    • "显示打开的应用程序的指示器" 打开
    • 电池->“显示百分比”
  • 展示
    • 夜晚模式
  • 安全
    • 触控 ID
  • 通知
    • 关闭,日历除外
  • Siri
    • 禁用
  • 触控板
    • 触碰点击
    • 指向和单击 -> 查找和数据检测器关闭
  • 键盘
    • 文本
      • 禁用“自动大写单词”
      • 禁用“添加带双空格的句号”
      • 禁用“使用智能引号和破折号”
      • "做双引号
      • '做单引号
  • Spotlight
    • 禁用 Spotlight(应用程序和系统偏好设置除外)
  • 任务控制
    • 角热点:全部禁用
  • 发现者
    • 侧边栏:
      • 激活所有收藏夹
      • 将库移至收藏夹
    • 隐藏所有标签
    • 显示所有文件扩展名
    • 30 天后从垃圾箱中删除项目
    • 查看 -> 显示预览(例如图像文件)
  • 分享
    • “更改计算机名称”
      • 还有终端:
        • sudo scutil --set ComputerName "newname"
        • sudo scutil --set LocalHostName "newname"
        • sudo scutil --set HostName "newname"
    • “确保禁用所有文件共享”
  • 安全和隐私
    • 打开文件保险箱
    • 将浏览器添加到“屏幕录制”
  • 存储
    • 删除 Garage Band 和声音库
    • 删除 iMovie
  • 触控板
    • 速度:9/10
  • 可访问性
    • 滚动速度:6/8

系统偏好设置(终端)

从终端覆盖更多系统首选项...

# 将屏幕截图作为 jpg(通常较小的尺寸)而不是 png
defaults write com.apple.screencapture type jpg
# 在打开新文件时不要打开以前的预览文件(例如 PDF)
defaults write com.apple.Preview ApplePersistenceIgnoreState YES
# 显示库文件夹
chflags nohidden ~/Library
# 显示隐藏文件默认写入
defaults write com.apple.finder AppleShowAllFiles YES
# 显示路径栏默认写入
defaults write com.apple.finder ShowPathbar -bool true
# 显示状态栏默认写入
defaults write com.apple.finder ShowStatusBar -bool true
killall Finder;

文件

  • 如果需要以前机器的文件,请通过外部驱动器而不是云传输

Homebrew

安装Homebrew作为 macOS 的包管理器:

# 粘贴到终端并按照说明进行操作
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

将 Homebrew 中的所有内容更新到最新版本:

brew update

安装 GUI 应用程序(在 GUI 应用程序中阅读有关这些的更多信息):

brew install --cask \
  bitwarden \
  google-chrome  \
  firefox \
  brave-browser \
  tor \
  iterm2 \
  visual-studio-code \
  sublime-text \
  docker \
  rectangle \
  slack \
  discord \
  signal \
  vlc \
  calibre \
  figma \
  maccy

安装终端应用程序(在终端应用程序中了解更多信息):

brew install \
  wget \
  exa \
  git \
  nvm \
  pnpm \
  graphicsmagick \
  commitzen \
  cmatrix \
  vips

图形用户界面GUI应用程序

  • Bitwarden(密码管理器)
    • 优先:
      • 启用暗模式
      • 启用触控 ID
  • 谷歌浏览器(网页开发、网页浏览)
  • 火狐Firefox(网络开发)
  • Brave(网页浏览,钱包)
  • Tor(秘密网页浏览)
  • iterm2(终端)
  • Visual Studio Code(Web 开发 IDE)
  • Sublime Text(编辑)
  • Docker(Docker,见设置
    • 用于在容器中运行数据库(例如 PostgreSQL、MongoDB)而不会使 Mac 混乱
    • 配置
      • 启用“使用 Docker Compose”
  • Rectangle (窗口管理器)
    • 使用 Rectangle 设置,而不是 Spectacle
  • Slack(团队交流)
  • Discord(社区交流)
  • Signal (信使)
  • VLC(视频播放器)
    • 用作视频文件的默认软件
  • Calibre(epub/电子书编辑器)
  • Figma(设计)
  • Maccy(剪贴板管理器)
    • 启用“登录时启动”

内置 MacOS 应用程序

  • iMessage
    • 为 iMessage 同步 iCloud 只是为了同步,然后再次禁用 iCloud
    • 在 iCloud 上同步联系人
    • iPhone:激活消息转发到新 Mac
  • Pages
    • 显示字数
  • Apple Mail
    • 设置所有电子邮件帐户
    • 在顶部显示最新消息
  • Notes
    • 新笔记开头:正文
  • Quick Time Player
    • 保存到桌面

终端应用

ITERM2

我们希望的终端实现的外观和感觉:

终端
  • 将 iterm2 设为默认术语
  • 首选项->
    • 常规 -> 窗口
      • 取消选择“本机全屏窗口”
    • 外观->
      • 视窗
        • 选择“隐藏滚动条”
      • 标签
        • 取消选择“全屏显示标签栏”
      • 调光
        • 取消选择所有调光
    • 配置文件 -> 窗口
      • 透明度:30
      • 风格:全屏
      • 屏幕:主屏幕
    • 配置文件 -> 高级
      • 语义历史 -> 用编辑器打开 ... -> VS Code
    • 使用当前目录打开新的拆分窗格
    • 自然文本编辑
  • 将其带到全屏 Command + Enters

Oh My Zsh

当你打开 iTerm2 时,你会看到 MacOS 已经自带 zsh 作为默认 shell。安装Oh My Zsh以获得改进的(插件、主题等)终端(此处为:iTerm2)体验:

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

将 Oh My Zsh 中的所有内容(例如插件)更新到最新版本:

omz update

重要提示:如果您更改 Zsh 配置 ( .zshrc ) 中的某些内容,请强制重新加载:

source ~/.zshrc

Oh My Zsh 主题 + 字体:

安装Starship作为您的新终端主题。我们将使用 Homebrew,但您也可以使用网站上的替代方法:

brew install starship

将其设为终端中 Oh My ZSH 的默认主题:

echo 'eval "$(starship init zsh)"' >> ~/.zshrc

作为字体,我们将在 iTerm2、VS Code 和 Sublime Text 中使用 Hack Nerd Font。通过以下方式安装它:

brew tap homebrew/cask-fonts
brew install --cask font-hack-nerd-font

在 iTerm2 中使用新字体:Preferences -> Profile -> Text -> Font: font-hack-nerd-font。

如果主题和字体更改不适用,请重新加载您的 zsh 配置 ( .zshrc ) 或关闭/打开 iTerm2 

Oh My Zsh 插件

ZSH 配置文件( .zshrc 

# Path to your oh-my-zsh installation.
export ZSH="$HOME/.oh-my-zsh"

# Which plugins would you like to load?
# Standard plugins can be found in $ZSH/plugins/
# Custom plugins may be added to $ZSH_CUSTOM/plugins/
# Example format: plugins=(rails git textmate ruby lighthouse)
# Add wisely, as too many plugins slow down shell startup.
plugins=(
  git
  zsh-completions
  zsh-autosuggestions
  zsh-syntax-highlighting
)

# get machine's ip address
alias ip="ipconfig getifaddr en0"

# edit global zsh configuration
alias zshconfig="vim ~/.zshrc"
# reload zsh configuration
alias zshsource="source ~/.zshrc"
# reload zsh configuration
alias ohmyzsh="cd ~/.oh-my-zsh"

# navigate to global ssh directory
alias sshhome="cd ~/.ssh"
# edit global ssh configuration
alias sshconfig="vim ~/.ssh/config"

# edit global git configuration
alias gitconfig="vim ~/.gitconfig"

# git aliases
alias gits="git status"
alias gitd="git diff"
alias gitl="git lg"
alias gita="git add ."
alias gitc="cz commit"

# type sublime . to open current folder in Sublime Text
alias sublime="/Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl --new-window $@"

# load zsh-completions
autoload -U compinit && compinit

# use nvm
source /opt/homebrew/opt/nvm/nvm.sh

# use starship theme (needs to be at the end)
eval "$(starship init zsh)"

VS 代码

我们希望通过 IDE 实现的外观和感觉:

扩展:

手动的:

  • 将搜索功能从活动栏移至面板

JSON 设置:

{
  "breadcrumbs.enabled": false,
  "files.trimTrailingWhitespace": true,
  "explorer.confirmDelete": false,
  "workbench.colorTheme": "Night Owl",
  "workbench.sideBar.location": "right",
  "workbench.startupEditor": "none",
  "workbench.statusBar.visible": true,
  "workbench.activityBar.visible": false,
  "workbench.editor.restoreViewState": true,
  "terminal.integrated.fontFamily": "Hack Nerd Font Mono",
  "editor.fontFamily": "Hack Nerd Font Mono",
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": false,
  "editor.renderWhitespace": "none",
  "editor.scrollBeyondLastLine": true,
  "editor.minimap.enabled": false,
  "editor.find.seedSearchStringFromSelection": "never",
  // syntax highlighting
  "files.associations": {
    ".env*": "makefile"
  },
  // prettier
  "prettier.singleQuote": true,
  "prettier.printWidth": 70,
  "editor.formatOnSave": false,
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // eslint
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript"],
  "javascript.updateImportsOnFileMove.enabled": "never",
  "typescript.updateImportsOnFileMove.enabled": "never",
  // auto generated
  "explorer.confirmDragAndDrop": false,
  "js/ts.implicitProjectConfig.checkJs": true
}

SUBLIME

不再用于 Web 开发。主要用于写这篇博客。

一般的:

  • 使用许可证

扩展:

JSON 设置:

{
  "caret_style": "solid",
  "folder_exclude_patterns":
  [
    ".git",
    "node_modules"
  ],
  "font_size": 14,
  "font_face": "Hack Nerd Font",
  "gutter": true,
  "highlight_line": true,
  "highlight_modified_tabs": true,
  "ignored_packages":
  [
    "TypeScript",
    "Vintage"
  ],
  "line_padding_bottom": 1,
  "line_padding_top": 1,
  "predawn_findreplace_small": true,
  "predawn_sidebar_arrows": true,
  "predawn_sidebar_narrow": true,
  "predawn_sidebar_xsmall": true,
  "predawn_tabs_small": true,
  "rulers":
  [
    120
  ],
  "scroll_past_end": true,
  "show_line_numbers": true,
  "spell_check": false,
  "tab_size": 2,
  "theme": "Agila Origin.sublime-theme",
  "theme_agila_compact_sidebar": true,
  "theme_agila_compact_tab": true,
  "theme_agila_horizontal_scrollbar_thinnest": true,
  "theme_agila_sidebar_font_xsmall": true,
  "theme_agila_sidebar_mini": true,
  "theme_agila_vertical_scrollbar_thinnest": true,
  "translate_tabs_to_spaces": true,
  "trim_trailing_white_space_on_save": true,
  "color_scheme": "Packages/Agila Theme/Agila Origin Oceanic Next.tmTheme",
}

git

从终端,设置全局名称和电子邮件:

git config --global user.name "Your Name"
git config --global email "you@your-domain.com"

改进git log

git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"

然后,就可以使用:

git lg

将默认分支设置为 main 而不是 master:

git config --global init.defaultBranch main

打印全局 git 配置:

git config --list
# or alias
# gitconfig

SSH

SSH 密钥有两种常见的策略:一个 SSH 密钥来统治它们,或者每个服务一个 SSH 密钥。我使用后者,在这里通过 SSH 连接到 GitHub 来运行你。

首先,在~/.ssh文件夹中创建一个新的 SSH 密钥:

# in case the folder is not there yet
mkdir ~/.ssh

cd ~/.ssh
# or alias
# sshhome

ssh-keygen -t ed25519 -C "github"
# follow instructions
# use file name: github
# use passphrase and store it somewhere secure

通过访问私钥确认密码是否正确使用:

ssh-keygen -y -f gitHub
# confirm with passphrase

如果 SSH 配置文件尚不存在,请创建它:

# in case the file is not there yet
touch ~/.ssh/config

~/.ssh/config文件中,添加新的 SSH 密钥,以便可以自动为每个终端会话获取它:

Host *
  AddKeysToAgent yes
  UseKeychain yes
  IdentityFile ~/.ssh/github

将 SSH 密钥添加到 MacOS 的钥匙串:

ssh-add --apple-use-keychain ~/.ssh/github

通过网站或通过 GitHub CLI(通过 )将公钥添加到您的 GitHub 设置brew install gh

# copy public key and add it to https://github.com/
cat ~/.ssh/id_rsa.pub | pbcopy

# or use GitHub's CLI
gh auth login
# for the first login I think the SSH key gets added
# without the next command, but if not:

gh ssh-key add ~/.ssh/id_rsa.pub -t github

就是这样。您已经为一项特定服务在本地创建了 SSH 密钥,通过密码保护它,使其自动可用于每个终端会话,并将其应用到 GitHub。对于 GitHub,您现在可以通过 SSH 与 GitHub 交互。

用于节点/NPM 的 NVM

节点版本管理器(NVM)用于安装和管理多个节点版本。在上一步通过 Homebrew 安装后,键入以下命令完成安装:

echo "source $(brew --prefix nvm)/nvm.sh" >> ~/.zshrc

source ~/.zshrc
# or alias
# zshsource

现在在命令行上安装最新的 LTS 版本:

nvm install <latest LTS version from https://nodejs.org/en/>

之后,检查是否安装成功,以及是否一路安装了节点包管理器(npm) :

node -v && npm -v

将 npm 更新到最新版本:

npm install -g npm@latest

并为 npm 设置默认值:

npm set init.author.name "your name"
npm set init.author.email "you@example.com"
npm set init.author.url "example.com"

如果您是库作者,也请登录 npm:

npm adduser

就是这样。如果要列出所有 Node.js 安装,请键入以下内容:

nvm list

如果要安装更新的 Node.js 版本,请键入:

nvm install <version> --reinstall-packages-from=$(nvm current)
nvm use <version>
nvm alias default <version>

如果您使用它作为 npm 的替代品,可以选择安装yarn :

npm install -g yarn
yarn -v

如果要列出所有全局安装的软件包,请运行以下命令:

npm list -g --depth=0

就是这样。你有一个运行版本的 Node.js 及其包管理器。


我希望我的设置可以帮助其他开发人员启动并运行他们的 Mac。如果您有任何其他想法或想分享您的设置,请告诉我!


已发布

分类

作者:

标签