![5f945256c7ebab468de21c8ca38fbff6.png](https://i-blog.csdnimg.cn/blog_migrate/6d9d840e79ee60b55896e940f44cb82b.jpeg)
“本文整体给大家介绍一下(前端开发)主流常用的mac套件哈”
刚入手mac或者准备入手的朋友,不来看看???
主流mac应用&工具配置清单
![dce923529409e57fa031621851aa4008.png](https://i-blog.csdnimg.cn/blog_migrate/b7bb8029da44f49ede0dc0f08c42e4d8.jpeg)
快捷操作
1 Alfred
![9f57bd2614e4b9aa0c92b9915e90d603.png](https://i-blog.csdnimg.cn/blog_migrate/62f4ef955bd05e4a193c34af4f5246fd.png)
效率神器,我们用它帮我们快速打开应用、文件、用来计算,查字典等
我习惯设置双击command键打开Alfred,除了上面那些,它常用功能看这:↓
普通使用
![6d7728f86385654e20f1ee0290e27b14.gif](https://i-blog.csdnimg.cn/blog_migrate/28cd01b4ad10dd2aba699a1f553af9ef.gif)
Web Search
快速打开搜索你想要的,配置也很简单
![615dca4d28e9273244279c91cf11b59c.gif](https://i-blog.csdnimg.cn/blog_migrate/b987ac783df0cbfc2a56db0023a15e1d.gif)
Workflows
工作流:图例是通过ssh快速连接服务器,这安装个插件就好
![c4389dcd18a2e2982b2ba58f6df10693.gif](https://i-blog.csdnimg.cn/blog_migrate/158ac0b77f832a0c9b3015698474a1af.gif)
2 paste
![757b634ee103658e6c908d819cf89895.png](https://i-blog.csdnimg.cn/blog_migrate/b1c7a44897f9891e95121274a440df1a.png)
粘贴板
有时候我们需要做重复地复制粘贴的动作,或者想先复制收藏,过会慢点再逐步黏贴,这个时候paste就特别实用
不管是文件,文本、链接,图片,颜色代码等
按shift + command + v就能看到我们复制历史等,点击就可以复制到黏贴板
![49d1402df69323be57f7be1d8f222666.png](https://i-blog.csdnimg.cn/blog_migrate/335a941c0f40ee4d8735d7c1981b362c.jpeg)
3 magnet
![83da5dba1c5edc03dd0f65aac428753e.png](https://i-blog.csdnimg.cn/blog_migrate/3b4bbe8a2e5ac1c527b85993ba13b2d4.png)
分屏神器,支持非常多的分屏操作
最常用的快捷操作↓:
![14c2b654ea42aad32fa6c7c52a60b3eb.png](https://i-blog.csdnimg.cn/blog_migrate/25c254cc79054302d59ffd48db4bb181.png)
4 aText
![9ee7b26636f44957d0f3437ae6f8cfff.png](https://i-blog.csdnimg.cn/blog_migrate/7b1bb7c7bf96cbe9b11795c8614b669b.jpeg)
快速配置自己常用的快捷语等快捷输入
![93e7d5277abb3235c824d60612eaa10a.gif](https://i-blog.csdnimg.cn/blog_migrate/eb23897bafdbe9fff5d1cad67f0712b0.gif)
截图&录屏
截图标注和屏幕录制是非常常用的功能,qq的截图录屏已经挺不错的,自带的QuickTime的录屏挺好的
这里在介绍几个比较好的截图应用 和 gif 录制软件
1 Gifox
![e815709e080334bb2d37fb4354957060.png](https://i-blog.csdnimg.cn/blog_migrate/a5ac2b3a01de084ffe8503f349a330e2.png)
支持窗口录制和区域录制、录制的帧数等参数调整
![aa42ab73ff1fc14322dcd2ff3928164e.png](https://i-blog.csdnimg.cn/blog_migrate/794e7e542e8d081325489f4e277475ae.jpeg)
2 cleanshot
![78714d2038b9de1eb42b0b9f201037db.png](https://i-blog.csdnimg.cn/blog_migrate/16dc7da8289248eb087434a3e1b1003c.png)
![d8793d6bab09676a8f42e5d387db7864.png](https://i-blog.csdnimg.cn/blog_migrate/75077b75fa896b3f4b81e7fe60f1b1da.jpeg)
3 Gif Brewery
![a59e8668c32e7d302b09c22361af986b.png](https://i-blog.csdnimg.cn/blog_migrate/5dcbf0b47c46d09b28b9275667f92feb.png)
如果你还需要进行视频转换成gif,添加字幕等操作,那你可以在看看Gif Brewery,它也是能录屏的哈。
例如给图片添加文案转GIF:↓
![72e07c97d092c4f64cf3add4c42cea60.gif](https://i-blog.csdnimg.cn/blog_migrate/98d81fbf70e7f4078b52b4a622e4cb12.gif)
思考&设计
自己设计应用、做组件库UI,做点比较好看的图示等,就需要用到画图工具
sketch,figma,xd,这几个有点现况有点像之前的vue、react、angular
入坑早我一直是用sketch,像wechat、Ant Design,Element 等UI等都有提供sketch设计资源,而且sketch本身更新优化快的可怕哈哈哈
1 sketch
![01e306da6d434f115e2d91bf3fb52bf4.png](https://i-blog.csdnimg.cn/blog_migrate/cbd631cb52f0f40a3f7ba40acb535dba.png)
画示意图啊,积累自己的图库、组件库等,如果你想全栈为自己设计一个应用什么的,这玩意不难学,还有类似我们前端组件库的思想 symbol、样式库等等
![5f05ab37d12361ca522d016e825ce25e.png](https://i-blog.csdnimg.cn/blog_migrate/28aa9cc488fc9ef847465616c3ce95a8.jpeg)
当然现在的figma也很棒,XD也在快速发展,都可以去试用一下,看看哪把武器顺手
2 XMind
![c70614bab96592f0f65081c822960ca7.png](https://i-blog.csdnimg.cn/blog_migrate/86440ef4b91f8919343c0b6988eadf52.png)
之前我一直用的是Mindnode(和谐版),因为之前的xmind给我的印象是设计一般,之前再回去看一下XMind 2020,真香!!
看官网的图:↓
![988ff383e90e2b7cdd6db83a2fa7ccfb.png](https://i-blog.csdnimg.cn/blog_migrate/836df484b5e9e75c2e9bd2093a00e48f.jpeg)
提供的模块主题多实用还漂亮,本文章第一张图就是用XMind做的,配合了sketch
写作和笔记
1 typora
![eb6ab3e1063cfac92b88885d97bdcd02.png](https://i-blog.csdnimg.cn/blog_migrate/06d6e2831f6717f0d722925f6007f445.png)
平时工作给团队项目组件等写文档,写论坛发博客什么的(这个我没有哈哈哈),当然用markdown,而markdown应用千千万,目前typora是最棒
(这logo是我自己用sketch重新做的哈,先说一下,免得下载的时候奇怪怎么Typora的logo不是这个)
目前我觉得它最棒的有两点:
不需要写语法:
让你专注写作而不是去纠结这个语法格式要怎么搞
图片快速引入:
直接拖入到typora就行,可以设置把图片归类到某个文件夹,还可以配合picgo自动上传到自己的图床,这样文章就能直接上传到博客啊,论坛,git 仓库等等
当然这些只是它的冰山一角,细节和优点还很多很多
我是在用Typora写小册子:↓
![0d1d0682312ff3b54b66b4c70040346e.png](https://i-blog.csdnimg.cn/blog_migrate/5a8a78b37d7f29900ca80c5e07b9aad3.jpeg)
关于学习+写作记录的会单独写一篇详细的文章介绍哈,这里先介绍一下
2 印象笔记 和 有道词典
读书,做项目,看博客微信推文,有时候都会有一些灵感或者要点等,这些零碎的东西,在整理前我们就用他们来记录,而且他们在chrome都有插件,可以很方便的采集记录我们想要的
开发
"这一部分会贴配置的代码"
1 Homebrew
Homebrew是Mac OS 不可或缺的套件管理器。安装软件,二进制编译啊什么的,不过国内的朋友需要切换到国内的一些资源,不然会非常的卡
HomeBrew 主要有这四部分组成:↓
![df9b8f370cd0265ad291d3a9fc699ab0.png](https://i-blog.csdnimg.cn/blog_migrate/bdb5d5ef797a191fb909d275cd3a89df.jpeg)
最后一个安装多的是图形界面用的,除非你做终端代理,不然经常timeout,有其他的办法请大佬指教
这是替换阿里云源的代码
# 查看 brew.git 当前源
cd "$(brew --repo)" && git remote -v
origin https://github.com/Homebrew/brew.git (fetch)
origin https://github.com/Homebrew/brew.git (push)
# 查看 homebrew-core.git 当前源
cd "$(brew --repo homebrew/core)" && git remote -v
origin https://github.com/Homebrew/homebrew-core.git (fetch)
origin https://github.com/Homebrew/homebrew-core.git (push)
# 修改 brew.git 为阿里源
git -C "$(brew --repo)" remote set-url origin https://mirrors.aliyun.com/homebrew/brew.git
# 修改 homebrew-core.git 为阿里源
git -C "$(brew --repo homebrew/core)" remote set-url origin https://mirrors.aliyun.com/homebrew/homebrew-core.git
# zsh 替换 brew bintray 镜像
echo 'export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.aliyun.com/homebrew/homebrew-bottles' >> ~/.zshrc
source ~/.zshrc
# bash 替换 brew bintray 镜像
echo 'export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.aliyun.com/homebrew/homebrew-bottles' >> ~/.bash_profile
source ~/.bash_profile
# 刷新源
brew update
当然还有很多清华源啊,中科大源等等
2 iterm2 + zsh
安装完 homebrew 就用他安装iterm2 和 zsh 吧
# 安装iterm2
brew cask install iterm2
# 安装zsh
sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
安装oh-my-zsh 常用插件
# zsh-syntax-highlighting:命令语法高亮
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
# zsh-autosuggestions:自动补全功能
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
#修改配置加入插件
vi ~/.zshrc
#找到plugin=(git),修改:
#z插件是自带的,用于目录间快速跳转,不过需要自己加入
plugin=(git z zsh-syntax-highlighting zsh-autosuggestions)
#更新配置
source ~/.zshrc
#重启iterm2就行啦
关于iterm 主题方面的话,自行网上调自己喜欢的吧,我没用哈哈哈
这个是Powerlevel10k主题 + One Dark配色 的(图片来自网络):↓
![315772342e3e7f8cabfefe2733d6be3e.png](https://i-blog.csdnimg.cn/blog_migrate/53d2178a24dc1c226d96acb87053a8dd.jpeg)
3 nvm + nrm
nvm 是mac的node包管理器,方便我们切换不同的node版本来测试等
安装方式1:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
ps:安装如果出现问题,详细可以去github的看文档:https://github.com/nvm-sh/nvm
安装好需要配置环境变量才能使用
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
基础使用命令
nvm version #查看当前的版本
nvm install #安装最新版本nvm
nvm install <version> #安装相应版本
nvm uninstall <version> #卸载制定的版本
nvm use <version> #切换使用指定的版本node
nvm alias node v10.22.0 #设定默认版本为v10.22.0
nvm ls #列出本地安装所有版本
nvm ls-remote #列出远程安装所有版本
nvm current #显示当前版本
nrm 是一个 npm 源管理器,允许你快速地在 npm源间切换
安装:
npm install -g nrm
ps:如果切换了node版本,需要重新安装哈,不过之前设置的源地址不变
基础使用:
# 查看当前可选源,带 ※ 号的是当前设置的npm源
nrm ls
#-------------------------------------------------#
npm -------- https://registry.npmjs.org/
* yarn ------- https://registry.yarnpkg.com/
cnpm ------- http://r.cnpmjs.org/
taobao ----- https://registry.npm.taobao.org/
nj --------- https://registry.nodejitsu.com/
#-------------------------------------------------#
# 选择 taobao 源
nrm use tabao
# 添加私有库源 源名是:yournpm
nrm add yournpm http://www.yournpm.com
# 删除源
nrm del yarn
# 测试速度
nrm test taobao
4 postman
老铁,这个不用我介绍了吧,没见过的转行吧哈哈哈(逃~)
5 whistle
![21cf3b1b812e9629511aae750337c946.png](https://i-blog.csdnimg.cn/blog_migrate/06a5cbc12183c9b8289524102f2fec0d.png)
whistle(读音 [ˈwɪsəl]
,拼音 [wēisǒu]
)是基于 Node 实现的跨平台抓包调试代理工具,来看看github官方的图吧
![ab2cf7a41a98b8046033027d233589dd.png](https://i-blog.csdnimg.cn/blog_migrate/9d0ca9f5fa343a328eba85414161bc42.jpeg)
整理
1 vanilla
![2660f66d810f8725341a0b8725f10f29.png](https://i-blog.csdnimg.cn/blog_migrate/300303a365de9b814f2e6caa5dc7e9a3.png)
顶部菜单栏管理
![a86e0d3606de6eef51d589f8deac081b.png](https://i-blog.csdnimg.cn/blog_migrate/94c3d440d3ac4489b87733bfc7e05fc8.png)
当你乱七八糟的安装了一大堆应用的时候,可能就需要它来帮你整理了,把常用的放在右边固定显示,把不常用的放在隐藏区域
2 Lemon Cleaner
![b88441ff6fbaa6e04bd3fec4e430088b.png](https://i-blog.csdnimg.cn/blog_migrate/9342d0b0358920b5eeb451b6eb367cd2.png)
腾讯出品的mac良心应用,如果有需要清理一些不必要的缓存,大文件啊什么的,就用它了(其实我15版的mac,512G的,用5年了也很少去清理哈哈哈)
还有什么好的应用大佬们跟我介绍一下啊
推荐&预告
一条龙!CI / CD 、打造小团队前端工程化服务juejin.im预告
慢点会给大家推荐一份md+思维导图的五星级体验写作套件教程,关注我敬请期待呀
![277775f98b8001122335ca2646dd61af.png](https://i-blog.csdnimg.cn/blog_migrate/063f5460863806bb2b26f06203941ecd.jpeg)