带 bar Mac Book Pro 主板损坏血泪史

背景：19 年 5 月某天，新开发的功能刚刚进入联调阶段，正愉快的 debug，突然 cpu 飙升，电脑咯咯的响，并伴随着发热，然后就很卡，一帧一帧的，我瞄了一眼电量，居然 10%不到，我在想我是一直插着电源呢，心里想着重启试试吧，然后就开不开机了，每次开机都是亮一下电源图标，就没然后了。然后我就赶紧预约了售后，送了过去，维修人员说，这种情况，返厂，等修好了通知我。（忍不住吐槽：带 bar 的新款经常出问题，我好几位同事的都有过问题，而且在 vim 期间，这个 bar 摸起来没有一点手感）

... 三天后，收到通知，取电脑，说是主板坏了，已经更换，我想 17 年末买的，还在 2 年保修内，不用花钱贼开心，一开机，就傻眼了，哇全新的，毛都没留，代码还没提交呢，我问了一下，他说新版带 bar 款硬盘、主板、cpu 是连在一起的，只能一起换，顿时心里有一万只 🦙。。。

代码不得不重新写了，还好产品给了我时间，不用通宵，不过没想到的是搭建舒适的环境就花了半天时间，遂决定写下这篇文章，并把我的配置文件备份到仓库。

环境搭建

作为一名开发人员，拿到全新的 mac，首先要做的就是搭建适合自己的开发环境(笔者是前端，本文是偏全栈的配置)了。

包管理工具 Homebrew

个人习惯，很多软件是通过 brew 来装的。

首先要安装 brew，打开终端，输入：

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

常用命令：

brew ls：查看当前安装了哪些包
brew cask ls：查看当前安装了哪些应用
brew search xxx：搜索 xxx 包
brew install xxx：安装 xxx 包
brew cask install xxx：安装 xxx 包
brew info xxx：查看 xxx 包的信息

【注 ⚠️】： brew 是下载源码，然后解压，然后 ./configure && make install，同时会包含相关依赖库，并自动配置好环境变量，易于卸载。 brew cask 是下载已经编译好的应用包（.dmg/.pkg），解压后统一放到某一目录下，同样易于卸载且干净

安装个人常用软件

Chrome：
- 搜索 brew search chrome
- 安装 brew cask install google-chrome
VScode：
- 搜索 brew search visual-studio-code
- 安装 brew cask install visual-studio-code
Sublime-Text：
- 搜索 brew search sublime-text
- 安装 brew cask install sublime-text
Robo3T：
- 搜索 brew search robo3t
- 安装 brew cask install robo3t
Charles：（需付费，否则每 30min 重启一次，也可以搜一搜破解码 😁）
- 搜索 brew search charles
- 安装 brew cask install charles
Docker：
- 搜索 brew search docker
- 安装 brew cask install docker
iTerm2：
- 搜索 brew search iterm2
- 安装 brew cask install iterm2，将其设置为默认终端：⌃⇧⌘\
Tumx：
- 搜索 brew search tmux
- 安装 brew install tmux
Git：
- 搜索 brew search git
- 安装 brew install git
Tree：
- 搜索 brew search tree
- 安装 brew install tree
Adb：
- 搜索 brew search android-platform-tools
- 安装 brew cask install android-platform-tools

终端神器 iTerm2 + Oh My Zsh

首先要安装 zsh（选择 zsh 而不选择 fish 主要因为它兼容性好，在这里推荐一篇zsh 开发指南，写的很详细了,感兴趣的可以去看看），老样子：

brew search zsh

brew install zsh

chsh -s $(which zsh)，设置为默认的 shell，这一步也可以在 iTerm2 的设置里配置

然后安装 Oh My Zsh：

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

安装常用插件：

zsh-autosuggestions，自动提示插件
zsh-completions，自动补全插件
zsh-syntax-highlighting，高亮插件

安装：

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

git clone https://github.com/zsh-users/zsh-completions ${ZSH_CUSTOM:=~/.oh-my-zsh/custom}/plugins/zsh-completions

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

配置（vi ~/.zshrc）：

# 主题，详见：https://github.com/robbyrussell/oh-my-zsh/wiki/Themes
# agnoster
ZSH_THEME="agnoster"
# set 256color
export TERM=xterm-256color

# 插件，https://github.com/robbyrussell/oh-my-zsh/wiki/Plugins
# 一些插件自带别名，例如：
# git：https://github.com/robbyrussell/oh-my-zsh/tree/master/plugins/git#aliases
# tmux：https://github.com/robbyrussell/oh-my-zsh/wiki/Plugins#aliases-1
# vscode：https://github.com/robbyrussell/oh-my-zsh/wiki/Plugins#vscode
plugins=(
  adb
  brew
  git
  sublime
  tmux
  vscode
  zsh-autosuggestions
  zsh-completions
  zsh-syntax-highlighting
)
autoload -U compinit && compinit

# 配置别名
alias h='history'
alias j='ls -F --color 2>/dev/null || ls -FG'
alias lsd='ls --color -d *(-/DN) 2>/dev/null || ls -dG *(-/DN)'
alias ll='ls --color -Fl --time-style=long-iso 2>/dev/null || ls -FGlT'
alias la='ls --color -FA 2>/dev/null || ls -FAG'
alias lla='ls -F --color --time-style=long-iso -lA 2>/dev/null || ls -lAFGT'
alias l='ls --color --time-style=long-iso -lFh 2>/dev/null || ls -lFhGT'
alias lsc='t=(*); echo $#t; unset t'
alias lscc='t=(* .*); echo $#t; unset t'
alias g='grep'
alias gv='grep -v'
alias rd='rmdir'
alias md='mkdir -p'
alias dh='df -h'
alias psa='ps aux'
alias psg='psa | grep -v grep | grep'
alias pk='pkill'
alias pk9='pkill -9'
alias ka='killall'
alias ka9='killall -9'
alias pst='pstree'
alias mt="top -u $USER"
alias ctime='time cat'
alias wi='which'
alias redir='rmdir **/*(/^F)'
alias cpui='grep MHz /proc/cpuinfo'
alias fng='find | grep -P'
alias ua='uname -a'
alias cu='curl -L'
alias tn='telnet'
alias to='touch'
alias hig='history 1 | grep -i'

重新载入配置文件：

source ~/.zshrc

现在基本配置完成了，最终的样子看下面这张图：

若乱码，请安装Powerline字体，然后配置下 iTerm2 的字体：Preferences -> Profile -> Text -> Change Font ->选择 Meslo LG S Regular for Powerline，重启即可,如图：

顺便分享一下我的配置：oh_my_zsh

补充一句：嫌弃 oh-my-zsh 太慢（time zsh -ic exit）不想用，也可以自己配 zsh，推荐fast

=====================================

node、nginx

接下来，安装node，个人习惯用nvm来管理 node 版本

Nvm：
- 搜索 brew search nvm
- 安装 brew install nvm
- 配置环境变量 echo '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' >> ~/.zshrc
- 重载配置 source ~/.zshrc
- 安装 node nvm install node，默认是最新稳定版
Nginx：个人推荐Homebrew Nginx
- brew tap denji/nginx
- brew install nginx-full --with-upload-module
- nginx -V，查看 nginx 配置

vscode 配置及插件推荐

下面应该来配置一下 vscode 了：

插件列表：
- appidocsnippets：apidoc 片段提示
- auto-close-tag：成对标签自动闭合
- auto-rename-tag：成对标签重命名
- beautify：js/css/sass/html/json 美化
- bracket-pair-colorizer-2：成对括号高亮 ⭐️
- code-beautifier：css/sass/scss/less 美化
- code-settings-sync：同步 vscode 设置 ⭐️
- docthis：jsDoc 注释
- EditorConfig：跨编辑器统一项目文件/文本格式 ⭐️
- eggjs：egg 智能提示
- es7-react-js-snippets：es7/react 提示 ⭐️
- gitlens： git 增强 ⭐️
- Go：golang 插件
- markdown-all-in-one：markdown 快捷键
- markdown-preview-enhanced：markdown 预览 ⭐️
- Material-theme：主题，One Dark Pro
- nested-comments：可在注释里面再注释
- npm-intellisense：引入模块自动提示
- nunjucks：html 模版引擎
- open-in-browser：用浏览器打开文件
- path-intellisense：路径文件提示
- prettier-vscode：代码美化 ⭐️
- python：py 插件
- sftp：远程登录
- vetur：vue 智能插件
- vscode-docker：docker 容器插件
- vscode-eslint：eslint 规范插件
- vscode-filesize：显示文件大小
- vscode-icons：文件图标 ⭐️
- vscode-import-cost：显示引入包的大小
- vscode-language-babel：es201x/jsx/flow/graphql 语法高亮
- vscode-language-pack-zh-hans：编辑器中文语言包
- vscode-leetcode：算法题库
- vscode-markdownlint：markdown 标准规范
- vscode-nginx-conf-hint：nginx 配置补全
- vscode-npm-import-package-version：显示 npm 包版本
- vscode-todo-highlight：TODO/FIXME 高亮
- vscode-typescript-tslint-plugin：ts 规范

分享一下（护眼）个人配置（setting.json）

{
  "[html]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "michelemelluso.code-beautifier"
  },
  "[markdown]": {
    "editor.defaultFormatter": "yzhang.markdown-all-in-one"
  },
  "[typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "editor.autoIndent": false,
  "editor.fontFamily": "'Meslo LG M Regular for Powerline',Consolas,Menlo, Monaco, 'Courier New', monospace",
  "editor.fontSize": 15,
  "editor.quickSuggestions": {
    "comments": true,
    "other": true,
    "strings": true
  },
  "editor.suggest.localityBonus": true,
  "editor.suggest.shareSuggestSelections": true,
  "editor.suggestSelection": "recentlyUsedByPrefix",
  "editor.tabCompletion": "on",
  "editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/? ",
  "editor.wordWrap": "on",
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "nunjucks": "html"
  },
  "emmet.showSuggestionsAsSnippets": true,
  "emmet.triggerExpansionOnTab": true,
  "eslint.autoFixOnSave": true,
  "explorer.confirmDelete": false,
  "files.associations": {
    "*.html": "nunjucks",
    "*.js": "javascript",
    "*.json": "jsonc",
    ".eslintrc": "jsonc"
  },
  "files.autoGuessEncoding": true,
  "files.eol": "\n",
  "filesize.useDecimal": true,
  "gitlens.advanced.messages": {
    "suppressShowKeyBindingsNotice": true
  },
  "html.format.indentHandlebars": true,
  "html.format.wrapAttributes": "aligned-multiple",
  "javascript.format.enable": false,
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  "javascript.validate.enable": false,
  "leetcode.defaultLanguage": "javascript",
  "leetcode.endpoint": "leetcode-cn",
  "leetcode.nodePath": "/Users/jiangzhiguo/.nvm/versions/node/v10.15.3/bin/node",
  "markdown.extension.showExplorer": true,
  "markdown.extension.toc.githubCompatibility": true,
  "markdownlint.config": {
    "default": true,
    "MD014": false,
    "MD033": false,
    "MD035": false,
    "MD041": false,
    "MD046": false
  },
  "prettier.endOfLine": "lf",
  "prettier.eslintIntegration": true,
  "prettier.jsxSingleQuote": true,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "all",
  "prettier.tslintIntegration": true,
  "search.showLineNumbers": true,
  "sync.gist": "e651e9ea7dc53556ef1d94be7736978f",
  "terminal.explorerKind": "external",
  "terminal.external.osxExec": "iTerm.app",
  "terminal.integrated.copyOnSelection": true,
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.fontFamily": "Source Code Pro for Powerline",
  "terminal.integrated.rendererType": "dom",
  "terminal.integrated.shell.osx": "/bin/zsh",
  "tslint.exclude": ["**/*.js", "node_modules/**"],
  "vsicons.dontShowNewVersionMessage": true,
  "window.zoomLevel": 0,
  "workbench.colorCustomizations": {
    "editorCursor.foreground": "#d41313",
    "editorGutter.background": "#d7daa7",
    "editorLineNumber.foreground": "#17a346"
  },
  "workbench.colorTheme": "Quiet Light",
  "workbench.iconTheme": "vscode-icons"
}

推荐一个 json 排序整理工具（强迫症福利）：jsonabc

最终样式，看下图：

搜索神器 Alfred

最后，在配一下alfred，用起来非常爽

由于免费版，功能较少，并且不能使用工作流（workflow），所以我就在网上搜了个破解版的 😁，想用的私聊我。

安装完成后：

我的个人习惯用 ⌘ + space 来搜索，所以要先关闭默认的聚焦快捷键
设置 alfred 快捷键

Features 设置

-- This is v0.7 of the custom script for AlfredApp for iTerm 3.1.1+
-- created by Sinan Eldem www.sinaneldem.com.tr

on alfred_script(q)
  if application "iTerm2" is running or application "iTerm" is running then
    run script "
      on run {q}
        tell application \"iTerm\"
          activate
          try
            select first window
            set onlywindow to true
          on error
            create window with default profile
            select first window
            set onlywindow to true
          end try
          tell the first window
            if onlywindow is false then
              create tab with default profile
            end if
            tell current session to write text q
          end tell
        end tell
      end run
    " with parameters {q}
  else
    run script "
      on run {q}
        tell application \"iTerm\"
          activate
          try
            select first window
          on error
            create window with default profile
            select first window
          end try
          tell the first window
            tell current session to write text q
          end tell
        end tell
      end run
    " with parameters {q}
  end if
end alfred_script

workflow 工作流插件（无法下载/搜不到请私信我）
- colors：颜色选择器
- devdocs：快速查找文档 api
- encode/decode：编码/解码
- ip address：显示本机 ip
- linux command：linux 命令大全，快速查找
- timezones2：显示时区信息
- youdao translate：有道翻译

简单演示一下：这些基本就够用了。

【结语】：上面的教程步骤很粗鲁，而我的目的主要是罗列一些我个人感觉好用软件，基本都附带了链接，可以去官网查看更详细的教程。

===🧐🧐 文中不足，欢迎指正 🤪🤪===

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

07.workflow.md

07.workflow.md

带 bar Mac Book Pro 主板损坏血泪史

环境搭建

包管理工具 Homebrew

安装个人常用软件

终端神器 iTerm2 + Oh My Zsh

node、nginx

vscode 配置及插件推荐

搜索神器 Alfred

Files

07.workflow.md

Latest commit

History

07.workflow.md

File metadata and controls

带 bar Mac Book Pro 主板损坏血泪史

环境搭建

包管理工具 Homebrew

安装个人常用软件

终端神器 iTerm2 + Oh My Zsh

node、nginx

vscode 配置及插件推荐

搜索神器 Alfred