.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
背景: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)"
【注 ⚠️】: 国内用户可以使用 gitee.com/cunkai/Home… ✨✨✨
常用命令:
brew ls:查看当前安装了哪些包brew cask ls:查看当前安装了哪些应用brew search xxx:搜索 xxx 包brew install xxx:安装 xxx 包brew install --cask xxx:安装 xxx 包brew info xxx:查看 xxx 包的信息
【注 ⚠️】:
brew install 是下载源码,然后解压,然后 ./configure && make install,同时会包含相关依赖库,并自动配置好环境变量,易于卸载。
brew install --cask 是下载已经编译好的应用包(.dmg/.pkg),解压后统一放到某一目录下,同样易于卸载且干净
安装个人常用软件
- Tumx:终端(session)复用神器(一般用于服务器)
- 搜索
brew search tmux - 安装
brew install tmux
- 搜索
- Git:
- 搜索
brew search git - 安装
brew install git
- 搜索
- Tree:(查看目录树)
- 搜索
brew search tree - 安装
brew install tree
- 搜索
- autojump:(目录直达)
- 搜索
brew search autojump - 安装
brew install autojump
- 搜索
- bat:(可以用别名替代cat:alias cat="bat")
- 搜索
brew search bat - 安装
brew install bat
- 搜索
- cloc:代码统计工具(Language、files、blank、comment、code)
- 搜索
brew search cloc - 安装
brew install cloc
- 搜索
- less:(开源文件分页器,搭配bat使用)
- 搜索
brew search less - 安装
brew install less
- 搜索
- pstree:(查看进程树)
- 搜索
brew search pstree - 安装
brew install pstree
- 搜索
- the_silver_searcher:ag(搜索代码神器,替代grep、find)
- 搜索
brew search the_silver_searcher - 安装
brew install the_silver_searcher
- 搜索
- Chrome:
- 搜索
brew search chrome - 安装
brew install --cask google-chrome
- 搜索
- VScode:
- 搜索
brew search visual-studio-code - 安装
brew install --cask visual-studio-code
- 搜索
- Sublime-Text:
- 搜索
brew search sublime-text - 安装
brew install --cask sublime-text
- 搜索
- Robo3T:
- 搜索
brew search robo3t - 安装
brew install --cask robo3t
- 搜索
- Charles:(需付费,否则每 30min 重启一次,也可以搜一搜别人分享的certificate 😁)
- 搜索
brew search charles - 安装
brew install --cask charles
- 搜索
- Docker:
- 搜索
brew search docker - 安装
brew install --cask docker
- 搜索
- iTerm2:(终端)
- 搜索
brew search iterm2 - 安装
brew install --cask iterm2,将其设置为默认终端:⌃⇧⌘\
- 搜索
- Adb:(安卓调试工具包)
- 搜索
brew search android-platform-tools - 安装
brew install --cask android-platform-tools
- 搜索
- Typora:(markdown 写文章)
- 搜索
brew search typora - 安装
brew install --cask typora
- 搜索
- Tinypng4mac:(熊猫压缩 app版)
- 搜索
brew search tinypng4mac - 安装
brew install --cask tinypng4mac
- 搜索
- Ifunbox:(资源管理器,查看设备文件/目录)
- 搜索
brew search ifunbox - 安装
brew install --cask ifunbox
- 搜索
- Licecap:(GIF屏幕录制工具)
- 搜索
brew search licecap - 安装
brew install --cask licecap
- 搜索
- keycastr:(实时显示按键)
- 搜索
brew search keycastr - 安装
brew install --cask keycastr
- 搜索
- keepingyouawake:(防休眠)
- 搜索
brew search keepingyouawake - 安装
brew install --cask keepingyouawake
- 搜索
- avibrazil-rdm:(修改分辨率)
- 搜索
brew search avibrazil-rdm - 安装
brew install --cask avibrazil-rdm
- 搜索
- font-jetbrains-mono:(编程等宽字体)
- 搜索
brew search font-jetbrains-mono - 安装
brew install --cask font-jetbrains-mono
- 搜索
- proxifier:(全局代理)
- 搜索
brew search proxifier - 安装
brew install --cask proxifier
- 搜索
- shadowsocksx-ng-r:(科学上网工具)
- 搜索
brew search shadowsocksx-ng-r - 安装
brew install --cask shadowsocksx-ng-r
- 搜索
终端神器 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,或者 p10k
p10k 如下图:

=====================================
node、nginx
接下来,安装node,个人习惯用nvm来管理 node 版本,也可以考虑用nvs
-
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/nginxbrew install nginx-full --with-upload-modulenginx -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 规范
分享一下(护眼)个人配置(settings.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"
},
"[nunjucks]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"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.tabSize": 2,
"editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/? ",
"editor.wordWrap": "on",
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"nunjucks": "html"
},
"emmet.showSuggestionsAsSnippets": true,
"emmet.triggerExpansionOnTab": true,
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"autoFix": true,
"language": "typescript"
},
{
"autoFix": true,
"language": "typescriptreact"
}
],
"explorer.confirmDelete": false,
"files.associations": {
"*.html": "html",
"*.js": "javascript",
"*.json": "jsonc",
".eslintrc": "jsonc",
"njk": "nunjucks"
},
"files.autoGuessEncoding": false,
"files.eol": "\n",
"filesize.useDecimal": true,
"gitlens.advanced.messages": {
"suppressShowKeyBindingsNotice": true
},
"html.format.indentHandlebars": true,
"html.format.wrapAttributes": "aligned-multiple",
"javascript.implicitProjectConfig.experimentalDecorators": true,
"javascript.referencesCodeLens.enabled": true,
"javascript.suggest.completeFunctionCalls": 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.jsxSingleQuote": true,
"prettier.printWidth": 120,
"prettier.singleQuote": true,
"prettier.trailingComma": "all",
"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.fontSize": 15,
"terminal.integrated.rendererType": "dom",
"terminal.integrated.shell.osx": "/bin/zsh",
"typescript.implementationsCodeLens.enabled": true,
"typescript.referencesCodeLens.enabled": true,
"typescript.suggest.completeFunctionCalls": true,
"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 设置
-

-
文件查找

-
粘贴板历史(巨好用,简直是CV工程师必备啊)

-
在alfred中输入终端命令(输入>)

-- 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:有道翻译 ⭐⭐⭐
- emoji:表情大全 ⭐⭐⭐
- MDN Search:MDN开发者文档 ⭐⭐⭐⭐⭐
简单演示一下:
这些基本就够用了。
【结语】:上面的教程步骤很粗鲁,而我的目的主要是罗列一些我个人感觉好用软件,基本都附带了链接,可以去官网查看更详细的教程。
===🧐🧐 文中不足,欢迎指正 🤪🤪===

