五星级的前端开发mac常用套件配置指南

2,768 阅读4分钟

“本文整体给大家介绍一下(前端开发)主流常用的mac套件哈”

刚入手mac或者准备入手的朋友,不来看看???

主流mac应用&工具配置清单

mac-build-desc的副本

快捷操作

1 Alfred

icon-alfred

效率神器,我们用它帮我们快速打开应用、文件、用来计算,查字典等

我习惯设置双击command键打开Alfred,除了上面那些,它常用功能看这:↓

普通使用 alfred00

Web Search

快速打开搜索你想要的,配置也很简单 alfred web search

Workflows 工作流:图例是通过ssh快速连接服务器,这安装个插件就好 alfred wkflow ssh

2 paste

icon-paste

粘贴板

有时候我们需要做重复地复制粘贴的动作,或者想先复制收藏,过会慢点再逐步黏贴,这个时候paste就特别实用

不管是文件,文本、链接,图片,颜色代码等

按shift + command + v就能看到我们复制历史等,点击就可以复制到黏贴板

paste

3 magnet

icon-magnet

分屏神器,支持非常多的分屏操作

最常用的快捷操作↓:

magnet-tips

4 aText

icon-atext

快速配置自己常用的快捷语等快捷输入

atext

截图&录屏

截图标注和屏幕录制是非常常用的功能,qq的截图录屏已经挺不错的,自带的QuickTime的录屏挺好的

这里在介绍几个比较好的截图应用 和 gif 录制软件

1 Gifox

icon-Gifox

支持窗口录制和区域录制、录制的帧数等参数调整

gifox-desc

2 cleanshot

icon-cleanshotX

应该是目前最好的截图标注和录屏软件,价格也是最贵的哈哈哈,29$(用Setapp 可以白嫖一周)

cleanShot X-tips

3 Gif Brewery

icon-brewery

如果你还需要进行视频转换成gif,添加字幕等操作,那你可以在看看Gif Brewery,它也是能录屏的哈。

例如给图片添加文案转GIF:↓

Gif Brewery0

思考&设计

自己设计应用、做组件库UI,做点比较好看的图示等,就需要用到画图工具

sketch,figma,xd,这几个有点现况有点像之前的vue、react、angular

入坑早我一直是用sketch,像wechat、Ant Design,Element 等UI等都有提供sketch设计资源,而且sketch本身更新优化快的可怕哈哈哈

1 sketch

icon-sketch

画示意图啊,积累自己的图库、组件库等,如果你想全栈为自己设计一个应用什么的,这玩意不难学,还有类似我们前端组件库的思想 symbol、样式库等等

sketch-ui

当然现在的figma也很棒,XD也在快速发展,都可以去试用一下,看看哪把武器顺手

2 XMind

icon-xmind

之前我一直用的是Mindnode(和谐版),因为之前的xmind给我的印象是设计一般,之前再回去看一下XMind 2020,真香!!

看官网的图:↓

xmind-guanfang

提供的模块主题多实用还漂亮,本文章第一张图就是用XMind做的,配合了sketch

写作和笔记

1 typora

icon-typora

平时工作给团队项目组件等写文档,写论坛发博客什么的(这个我没有哈哈哈),当然用markdown,而markdown应用千千万,目前typora是最棒

(这logo是我自己用sketch重新做的哈,先说一下,免得下载的时候奇怪怎么Typora的logo不是这个)

目前我觉得它最棒的有两点:

不需要写语法

让你专注写作而不是去纠结这个语法格式要怎么搞

图片快速引入

直接拖入到typora就行,可以设置把图片归类到某个文件夹,还可以配合picgo自动上传到自己的图床,这样文章就能直接上传到博客啊,论坛,git 仓库等等

当然这些只是它的冰山一角,细节和优点还很多很多

我是在用Typora写小册子:↓

handbook1

关于学习+写作记录的会单独写一篇详细的文章介绍哈,这里先介绍一下

2 印象笔记 和 有道词典

读书,做项目,看博客微信推文,有时候都会有一些灵感或者要点等,这些零碎的东西,在整理前我们就用他们来记录,而且他们在chrome都有插件,可以很方便的采集记录我们想要的

开发

"这一部分会贴配置的代码"

1 Homebrew

Homebrew是Mac OS 不可或缺的套件管理器。安装软件,二进制编译啊什么的,不过国内的朋友需要切换到国内的一些资源,不然会非常的卡

HomeBrew 主要有这四部分组成:↓

HomeBrew描述
BrewHomebrew 源代码仓库
Homebrew-coreHomebrew 核心软件仓库
Homebrew-bottlesHomebrew 预编译二进制软件包
Homebrew-cask提供 macOS 应用和大型二进制文件

最后一个安装多的是图形界面用的,除非你做终端代理,不然经常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配色 的(图片来自网络):↓

iterm2-theme

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的看文档: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

icon-whistle

whistle(读音 [ˈwɪsəl],拼音 [wēisǒu] )是基于 Node 实现的跨平台抓包调试代理工具,来看看github官方的图吧

whistle-xmind

整理

1 vanilla

icon-vanilla

顶部菜单栏管理

vanilla-desc

当你乱七八糟的安装了一大堆应用的时候,可能就需要它来帮你整理了,把常用的放在右边固定显示,把不常用的放在隐藏区域

2 Lemon Cleaner

icon-lenmon

腾讯出品的mac良心应用,如果有需要清理一些不必要的缓存,大文件啊什么的,就用它了(其实我15版的mac,512G的,用5年了也很少去清理哈哈哈)


还有什么好的应用大佬们跟我介绍一下啊

推荐&预告

推荐阅读

如何从0到1打造一个小前端团队工程化服务环境

progress-all-guide

预告

慢点会给大家推荐一份md+思维导图的五星级体验写作套件教程,关注我敬请期待呀

感谢你们的关注啊

最后是非常非常的希望能获取你们的关注啦啦~~~

你们小小关注就是我们大大的动力啊,我们会给你们持续地推送原创和好文

这个是我们公众号的二维码

code2