![b9e1d083eb0e8ec1f9906733fab5689b.png](https://i-blog.csdnimg.cn/blog_migrate/9ebcbd7c18a9e477df2bb22adf8b6007.jpeg)
“本文整体给大家介绍一下(前端开发)主流常用的mac套件哈”
刚入手mac或者准备入手的朋友,不来看看???
主流mac应用&工具配置清单
![832c7f6e1b1bd944905feb5bec99381e.png](https://i-blog.csdnimg.cn/blog_migrate/722484d56ba3d9d4aa9d70c54e0fdd01.jpeg)
快捷操作
1 Alfred
![39c76e6ad67c0150e4e90ea9c5570575.png](https://i-blog.csdnimg.cn/blog_migrate/66a27c4e46bb87bf46e593d3d15992ef.png)
效率神器,我们用它帮我们快速打开应用、文件、用来计算,查字典等
我习惯设置双击command键打开Alfred,除了上面那些,它常用功能看这:↓
普通使用
![53acfb4e5ad24fe8d6c60001fde303f1.gif](https://i-blog.csdnimg.cn/blog_migrate/5b581f50d4d5a4d0190e5eaccfd8bff4.gif)
Web Search
快速打开搜索你想要的,配置也很简单
![bc1c5d03cc37769a6d1499c94f5ca534.gif](https://i-blog.csdnimg.cn/blog_migrate/d4a4837d1d2de7740ca0686a463297d1.gif)
Workflows
工作流:图例是通过ssh快速连接服务器,这安装个插件就好
![442de9ebec4051af93cf51e62e16e1ee.gif](https://i-blog.csdnimg.cn/blog_migrate/efe0ab45e340c26053dbb95e2d3060d8.gif)
2 paste
![aeab03253d51a69a0027484add214950.png](https://i-blog.csdnimg.cn/blog_migrate/98bbef3bceb23a6220936043a9926260.png)
粘贴板
有时候我们需要做重复地复制粘贴的动作,或者想先复制收藏,过会慢点再逐步黏贴,这个时候paste就特别实用
不管是文件,文本、链接,图片,颜色代码等
按shift + command + v就能看到我们复制历史等,点击就可以复制到黏贴板
![3e61c881ce073a32afc0a56749086435.png](https://i-blog.csdnimg.cn/blog_migrate/bcf65a812690905d7a944bb1cf1eaee2.jpeg)
3 magnet
![0bcf39bfaafe473b8aa5f9062337d65c.png](https://i-blog.csdnimg.cn/blog_migrate/bb5e844a747c41f80d01f9b97d4563f1.png)
分屏神器,支持非常多的分屏操作
最常用的快捷操作↓:
![be5909c1552b02ab116056b72a7efa6c.png](https://i-blog.csdnimg.cn/blog_migrate/883d056dde1c7f643ddde736b257a941.png)
4 aText
![74b8b0ee6e311e1a5725efa694297a2f.png](https://i-blog.csdnimg.cn/blog_migrate/5266cffb032e5c299a82c23c850df316.jpeg)
快速配置自己常用的快捷语等快捷输入
![9513688bb74a9853266519259880c362.gif](https://i-blog.csdnimg.cn/blog_migrate/bd6da946334ee446683082c0a5dc9037.gif)
截图&录屏
截图标注和屏幕录制是非常常用的功能,qq的截图录屏已经挺不错的,自带的QuickTime的录屏挺好的
这里在介绍几个比较好的截图应用 和 gif 录制软件
1 Gifox
![9c21de4bfb93323c12eff10a2805a75f.png](https://i-blog.csdnimg.cn/blog_migrate/640fea4da927fd50dd3290a2a85d14bf.png)
支持窗口录制和区域录制、录制的帧数等参数调整
![b058c6fbc926a1500940290aa92990dd.png](https://i-blog.csdnimg.cn/blog_migrate/8ce8919af39bb8f464535acf63e40c32.jpeg)
2 cleanshot
![5a00a88bf0df0d0e4038b1fdd7fe33e5.png](https://i-blog.csdnimg.cn/blog_migrate/a348d3c5421e95080ea4c622259dd6dc.png)
![77e33914f0f89d0c54771bb7e645098a.png](https://i-blog.csdnimg.cn/blog_migrate/fb1d7608690d05706f6897a41c5a06a5.jpeg)
3 Gif Brewery
![912575e1465e75e25133b98645ced2d3.png](https://i-blog.csdnimg.cn/blog_migrate/18c908e4d0d8ca6d05d5a03ce3ef59a3.png)
如果你还需要进行视频转换成gif,添加字幕等操作,那你可以在看看Gif Brewery,它也是能录屏的哈。
例如给图片添加文案转GIF:↓
![c7338f2963cf9ea9793e442702bb0909.gif](https://i-blog.csdnimg.cn/blog_migrate/949a0e4e4480c466998bb1cbef2b0295.gif)
思考&设计
自己设计应用、做组件库UI,做点比较好看的图示等,就需要用到画图工具
sketch,figma,xd,这几个有点现况有点像之前的vue、react、angular
入坑早我一直是用sketch,像wechat、Ant Design,Element 等UI等都有提供sketch设计资源,而且sketch本身更新优化快的可怕哈哈哈
1 sketch
![e9eaa9b413881d2a2aa475cb9e5b6895.png](https://i-blog.csdnimg.cn/blog_migrate/16099863cf842b0cf40a33c035e6aa23.png)
画示意图啊,积累自己的图库、组件库等,如果你想全栈为自己设计一个应用什么的,这玩意不难学,还有类似我们前端组件库的思想 symbol、样式库等等
![6ed41c7a46802a4beabc3ef757d7d70c.png](https://i-blog.csdnimg.cn/blog_migrate/44cde2fc540b4e11bf4b6a23337e2012.jpeg)
当然现在的figma也很棒,XD也在快速发展,都可以去试用一下,看看哪把武器顺手
2 XMind
![9163116a07a1f26e439629076107b335.png](https://i-blog.csdnimg.cn/blog_migrate/e38607ac4e57746c7ee0a72961984b77.png)
之前我一直用的是Mindnode(和谐版),因为之前的xmind给我的印象是设计一般,之前再回去看一下XMind 2020,真香!!
看官网的图:↓
![7571aee633a67fd70458ed5aa185fd84.png](https://i-blog.csdnimg.cn/blog_migrate/488a37ec86a54cd1b62053b275d39849.jpeg)
提供的模块主题多实用还漂亮,本文章第一张图就是用XMind做的,配合了sketch
写作和笔记
1 typora
![c93e7d11a1717ff1ed9dd8b862eec5a4.png](https://i-blog.csdnimg.cn/blog_migrate/7a3bdcc9199d6d9e56c18199cbf7de06.png)
平时工作给团队项目组件等写文档,写论坛发博客什么的(这个我没有哈哈哈),当然用markdown,而markdown应用千千万,目前typora是最棒
(这logo是我自己用sketch重新做的哈,先说一下,免得下载的时候奇怪怎么Typora的logo不是这个)
目前我觉得它最棒的有两点:
不需要写语法:
让你专注写作而不是去纠结这个语法格式要怎么搞
图片快速引入:
直接拖入到typora就行,可以设置把图片归类到某个文件夹,还可以配合picgo自动上传到自己的图床,这样文章就能直接上传到博客啊,论坛,git 仓库等等
当然这些只是它的冰山一角,细节和优点还很多很多
我是在用Typora写小册子:↓
![985f587798f67280a58afed7b95bb98b.png](https://i-blog.csdnimg.cn/blog_migrate/7a187ba369bae9c771da7d94eb52941f.jpeg)
关于学习+写作记录的会单独写一篇详细的文章介绍哈,这里先介绍一下
2 印象笔记 和 有道词典
读书,做项目,看博客微信推文,有时候都会有一些灵感或者要点等,这些零碎的东西,在整理前我们就用他们来记录,而且他们在chrome都有插件,可以很方便的采集记录我们想要的
开发
"这一部分会贴配置的代码"
1 Homebrew
Homebrew是Mac OS 不可或缺的套件管理器。安装软件,二进制编译啊什么的,不过国内的朋友需要切换到国内的一些资源,不然会非常的卡
HomeBrew 主要有这四部分组成:↓
![45d7b832570ba84b59a00934cb91bdcb.png](https://i-blog.csdnimg.cn/blog_migrate/2946af39dce855c559c7512848295184.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配色 的(图片来自网络):↓
![24fefd3d44a8abbc660e39dab17b0ab7.png](https://i-blog.csdnimg.cn/blog_migrate/38b452fa5938e518cc72a4293b746e87.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
![ed54524316c4de2df7f25f18b65c07b9.png](https://i-blog.csdnimg.cn/blog_migrate/6c382598ad6bfe2cafbc8639a609587e.png)
whistle(读音 [ˈwɪsəl]
,拼音 [wēisǒu]
)是基于 Node 实现的跨平台抓包调试代理工具,来看看github官方的图吧
![9562d9eabe42f69e210abf693f953cdc.png](https://i-blog.csdnimg.cn/blog_migrate/5db5c4624e9ad42f4e24dc8183caf56e.jpeg)
整理
1 vanilla
![0a800f49cd23f9b54eb7b504ded9aee6.png](https://i-blog.csdnimg.cn/blog_migrate/58664967bc8f7d1e3b972b3f0d5dfa8d.png)
顶部菜单栏管理
![4644faf711a6f121692d3168e9b60fe3.png](https://i-blog.csdnimg.cn/blog_migrate/df6af62d102adf83089688422a670c55.png)
当你乱七八糟的安装了一大堆应用的时候,可能就需要它来帮你整理了,把常用的放在右边固定显示,把不常用的放在隐藏区域
2 Lemon Cleaner
![b5566e36b2cd02e5c5a324edd6cda57b.png](https://i-blog.csdnimg.cn/blog_migrate/2a412b1a6e85ca7770f61bb1a02bc935.png)
腾讯出品的mac良心应用,如果有需要清理一些不必要的缓存,大文件啊什么的,就用它了(其实我15版的mac,512G的,用5年了也很少去清理哈哈哈)
还有什么好的应用大佬们跟我介绍一下啊
推荐&预告
一条龙!CI / CD 、打造小团队前端工程化服务juejin.im预告
慢点会给大家推荐一份md+思维导图的五星级体验写作套件教程,关注我敬请期待呀
![145c5b7cd4b90c505e9f9da992206578.png](https://i-blog.csdnimg.cn/blog_migrate/31a50db3403dbf6c0fb06ec49125797e.jpeg)