最近国外一篇 2022年 Web 开发 MAC 最佳配置的文章突然大火《Mac Setup for Web Development [2022]》，作者是德国柏林的一个全栈工程师 Robin，国外的前端总爱说自己是全栈，但在国内如果某人工作不到五年，说自己是全栈，我可能只会觉得他啥都懂一点。Robin 这个老哥出了很多课程，都是 The Road to xxx，他主要是写 JavaScript 比较多，大家有兴趣可以专注下他的 GitHub。

作为一个前端开发，趁手的工具是非常重要的，文中提出了很多作者使用 MacBook 做开发时的一些心得，值得我们借鉴，有些在我的工作中确实也经常使用，在下文中我也会做一些补充，所以接下来的内容，我们姑且称之为《前端 MacBook 最佳实践》。

大纲

最佳实践包含下面几个部分：

MacBook 型号和配置
MAC OS 系统配置
命令行工具
应用程序：苹果内置和第三方应用
编辑工具设置

MacBook 型号和配置

型号：14-inch （我推荐最新的 16寸的，屏幕越大，bug 越少）
CPU：Apple M1 Pro mit 10‑Core CPU, 16‑Core GPU und 16‑Core Neural Engine
32 GB RAM （这个够了）
512 GB SSD （这个够了）
macOS Monterey 操作系统

MAC OS 系统配置

Dock
- 把其他的没有用的 APP 都隐藏了，保持 Dock 的纯净
- 设置为最小版的 Dock
- 开启 hover 显示的功能
- 关闭 "Show recent applications in Dock"
- 开启 "Show indicators for open applications" on
- 显示电池电量百分比
主题设置为暗黑色，语言设置为英文
使用 Touch ID 解锁，极为方便
通知信息关闭，除了日历（这个很重要，不关闭通知，有可能你开会的时候会弹出钉钉消息，被老板看到就 GG 了）
关闭 Siri，这玩意很容易误触。
触摸板
- 设置轻触点击，这个可以省很多力气
- 设置右下角触点，鼠标移到右下角，立马睡眠，这个很好用，中午吃饭起身，直接鼠标移到右下角，就能关闭屏幕了
- 点击速度设置为 9/10
- 滑动速度设置 6/8
Spotlight：设置只能搜索 App 和系统配置
Finder 文件管理
- Sidebar 侧边栏:
- activate all Favorites
- move Library to Favorites
- 隐藏所有 Tags，没啥用
- 显示所有文件扩展名
- 视图里选择显示图片缩略图
重新设置下你的电脑名字
- 使用 terminal:
- sudo scutil --set ComputerName "newname"
- sudo scutil --set LocalHostName "newname"
- sudo scutil --set HostName "newname"
确认所有文件的共享功能已被关闭
安全与隐私设置
- Turn on FileVault
- 设置浏览器可以录制屏幕
缓存：下面这两部分非常占磁盘
- Remove Garage Band & Sound Library
- Remove iMovie

命令行工具

使用命令行工具设置一些系统参数

# take screenshots as jpg (usually smaller size) and not png
defaults write com.apple.screencapture type jpg

# do not open previous previewed files (e.g. PDFs) when opening a new one
defaults write com.apple.Preview ApplePersistenceIgnoreState YES

# show Library folder
chflags nohidden ~/Library

# show hidden files
defaults write com.apple.finder AppleShowAllFiles YES

# show path bar
defaults write com.apple.finder ShowPathbar -bool true

# show status bar
defaults write com.apple.finder ShowStatusBar -bool true

killall Finder;

文件拷贝：如果需要以前机器上的文件，通过外部驱动器而不是云传输，因为云是真的慢
安装 homebrew ：这个没的说吧，MAC 必备
wget Curl 工具
exa 替代 ls ，比他强大很多
- exa -a 显示隐藏文件
- exa -l 显示额外信息
git 必备
nvm node 版本切换，很快
pnpm 老外都在用了，你还等什么，弃掉 yarn npm 吧
graphicsmagick 图像处理领域的瑞士军刀，功能相当多
commitzen 规范提交信息
cmatrix 屏保
Oh My Zsh 增强版的命令行，亲测必备好用

应用程序：苹果内置和第三方应用

Bitwarden：一个离线的密码管理工具，这样我们就不用记那么多密码了
Chrome 浏览器：不必问，不必说，要做一些设置如下
- Preferences
  - 设置为默认浏览器
  - 暗黑模式
  - 从不保存密码，这样更安全
  - 一直显示书签
  - 从其他设备导入书签
  - 注册一个 Google 账号，做设置同步（个人私货）
- Chrome Developer Tools
  - 暗黑模式
  - Network 设置为-> 只有 "Fetch/XHR"
- Chrome 必备插件
  - uBlock Origin：广告拦截器
  - Bitwarden：密码管理的插件版
  - React Developer Tools：必备
  - Pocket：可以把视频，图片直接收藏，以备不时之需
  - MetaMask：以太坊插件（程序员谁不得买点币呢）
  - FeHelper: 好用就完了

Firefox (老外喜欢的浏览器)
Brave (老外喜欢的浏览器）
Tor (安全的浏览器)
iterm2 (terminal) 不错的
Visual Studio Code (web development IDE) 必备
Sublime Text (editor) 必备
Docker 安装一个 Docker，不管是学习还是使用，毕竟老外都是全栈
Rectangle 一个窗口管理器，尤其是多屏幕的时候好用，但我用的是 sizeUp
Slack 类似钉钉，老外用的
Discord 类似豆瓣吧，聚会社交小组
Signal 类似微信，发消息的
VLC 视频播放器
Calibre 电子书生成器
Figma 设计师画UI稿的，类似蓝湖，即时设计
ImageOptim 我也常用的图片压缩神器
Maccy 剪贴板管理器，记录你每次 Ctrl C 的行为，设置为开机启动，好用！

编辑工具

Pages：设置显示文字数量
Apple Mail：管理自己的多种邮箱账号
Notes: 记录琐碎
Quick Time Player：录屏神器，设置保存到桌面

Vscode

各种扩展
- Night Owl 主题
- Auto Hide 自动隐藏侧边栏
- EditorConfig 共享配置
- ESLint 必备
- Prettier 必备
- GitLens git 提交人，抓凶神器
- Better Comments 注释信息高亮
- Import Cost 导入组件的大小，实时分析
- Highlight Matching Tag 标签选择高亮
- Auto Rename Tag 自动帮你修改闭合标签的名字
- Auto Close Tag 同上
- Color Highlight css 颜色可以高亮
- ES7+ React/Redux/React-Native snippets 代码片段，但我比较推崇每个团队自己维护一套
- VSCode React Refactor react 重构神器，从此拆组件变的无比容易，好东西
- Vscode-styled-components CSS in JS 高亮（我不会用）
- Color Picker 颜色选择器
- code spell checker 英文单词检查，强烈建议安装，告别汉语拼音从我做起
JSON Settings:

{
  "breadcrumbs.enabled": false,
  "files.trimTrailingWhitespace": true,
  "explorer.confirmDelete": false,
  "explorer.compactFolders": 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": true,
  "[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.validate.enable": false,
  "javascript.updateImportsOnFileMove.enabled": "never",
  "typescript.updateImportsOnFileMove.enabled": "never",
  // auto generated
  "explorer.confirmDragAndDrop": false,
  "js/ts.implicitProjectConfig.checkJs": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true
}

SUBLIME

这个编辑器的配置直接看原文吧，我觉得没啥用。

SSH

很多秘钥都在这，要掌握生成 git 秘钥的方式方法

NVM FOR NODE/NPM

nvm 设置下

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

source ~/.zshrc
# or alias
# zshsource

使用 pnpm

总结

好东西需要分享，把这些设置记录下来，方便大家在切换电脑的时候，快速创建熟悉的环境，当然对于一个团队来说，大家保持环境一致，开发效率水位在一个较高的水平也是非常重要的。希望这篇 MacBook 最佳实践能帮到大家。

2022 年前端 MacBook 最佳实践

大纲