Mac 前端环境配置

前言

Q3季度去上海出差的时候,我的 Mac(M1)因为升级了系统就直接卡死了,公司 IT 老哥跟我说只能重装系统并且无法拿到本地文件,我当时挺难受的😣,因为我的很多文档都是记录在本地的 Typora 中的,还有一些笔记之类的东西。

所以我的笔记要靠回忆一点点复原,环境要重新安装,虽然所有的东西都是轻车熟路,但还是要一步一步的去查某个工具的安装方法,还是有些繁琐的😔,所以在我重新安装的时候我就记录了一下大致的安装过程和相对应的网址,方便下次出问题的时候方便使用

还有一个建议,最好不要把重要的东西放在本地,一定要存放在云端,或者可以想我一样,存储在 Github 上。众所周知,Github 是一个网盘😊

Mac 前端环境配置

Homebrew

官网:https://brew.sh/

首先要下载的就是 Homebrew Mac 的包管理器🐮,必备但不自带,我称之为神器。就像 Linux 中的 yum、wget 一样好用极了。

官方文档命令下载较慢且大部分时候都是下载失败, 可使用国内源

官方源

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

国内源

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/masteHomebrew.sh)"


Git

官网:https://git-scm.com/
这个我就不多说了,必备的代码管理工具,因为它是某些包安装的前置条件,所以最好尽早安装。

brew install git

基本配置

git config --global user.name "你的名字或昵称"   初始化名称
git config --global user.email "你的邮箱"       初始化邮箱
git config --global -l                         查看刚刚设置 的名称、邮箱
// 多公钥配置,可忽略此处,直接看下一部分
ssh-keygen -t rsa -C "你提交代码的邮箱"           密钥生成
cat ~/.ssh/id_rsa.pub                          查看生成的公钥,复制到 Github 等代码库

多公钥配置

gitee 已经讲的很详细了,所以直接看吧🀄️!

https://gitee.com/help/articles/4229#article-header0


Node

官网:https://nodejs.org/zh-cn/

前端必备 javascript 的运行环境。😯一般的 node 管理器在版本切换的时候不起作用,是因为在使用 brew 安装时 node 的安装路径不是默认的,与类似 nvm 的管理器默认路径不同,所以 nvm 找不到、替换不了当前 node 版本。

node 版本目前建议在 14 左右就好,因为高版本的 node 在 npm 安装 node-sass 这个包的时候会出现安装不上的问题,node-sass 对 node 版本的要求很严格, 如果你的项目使用不到的话就无所谓了。

brew search node                       // 搜索 node 版本
brew install node                      // 安装最新版本
brew install node@14                   // 安装指定版本
brew uninstall node@14                 // 卸载指定版本
brew link --overwrite --force node@14  // 切换到指定版本


iTerm2

比 Mac 自带的终端更好用的终端👌。

这个很多人都这么说,可能是我对终端的需求范围比较小,觉得跟自带的终端差不多,身边的人也大多是用它来安装一个花里胡哨的主题。

brew install iTerm2


curl

官网:https://curl.se/
常用的命令行工具,用来请求 Web 服务器。如果熟练的话,完全可以取代 Postman 这一类的图形界面工具。

这个确实是一个神器,灰常好用。使用方法可以看看 阮一峰 大神的介绍,很详细了!

最近还有一个关于 curl 作者被 500 强公司要求为他们提供支持的新闻,链接我放下面了。

所以说,有些人赚钱比的是谁的脸皮厚!链接

brew install curl

使用文章: https://www.ruanyifeng.com/blog/2019/09/curl-reference.html


oh-my-zsh

官网:https://ohmyz.sh/
前置安装:git、curl

💪强大的 shell 终端,简单、易用。这个确实比 Mac 自带的 bash 好用多了,属于用了就回不去的那种。官方网站已经说的很详细了,直接看官网就可以

curl 方式下载
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
chsh -s /bin/zsh   // 切换为zsh  重启终端即可使用 zsh
chsh -s /bin/bash  // 切换为bash 重启终端即可使用 bash


Mysql

关系型数据库。

不要怀疑哈🤨,前端环境确实是需要它。俗话说,不懂数据库的前端不是一个好全栈,当然也包括 Redis 缓存层。

数据库下载:https://dev.mysql.com/downloads/file/?id=508094

打开 “系统偏好设置” 最下方会出现 Mysql 的图标,可查看当前 Mysql 的状态以及各文件地址。

大部分都停留在 5.7 版本。 8.0 及以上版本的默认为强密码,在 Egg 等类似的框架上还未支持此方式连接(估计要很久以后了吧,毕竟 5.7 就跟 centos7 一样命硬),如果链接过程中出现未支持等情况,大多数为此类原因,可以通过 “系统偏好设置” 中的操作面板,初始化 Mysql 为第二选项(非强密码选项)即可解决。


VsCode

官网:https://code.visualstudio.com/download#

目前最受欢迎的编辑器,我的饭碗🥣。vscode 也已经有 M1 的版本。

brew cask install visual-studio-code

vscode 的快捷命令配置还是很多的,有一些跟随项目的配置文件,好用的配置插件,这里就先说两个吧。

快捷打开编辑器

使用命令打开

打开 VS Code,打开控制面板(⇧⌘P),输入 "shell command",在提示里看到Shell Command: Install "code" command in PATH,点击安装。
终端进入到指定文件夹,执行 code . || code filename 便可以使用 vscode 打开当前文件夹

拓展插件

Markdown Preview Github Stylin

本地 md 文档样式上传到 Github、npm 时,经常出现本地与线上表现不一致的问题👀。相信经常更新 npm 包的老板们都经历过文档在 Github、npm 上都展示的很丑的情况,但在本地 md 文档上显示很好。

此插件可在编写时预览本地 md 文档在 Github 上展现的样式。


Docker

官网:https://hub.docker.com/editions/community/docker-ce-desktop-mac

docker 也是一个前端应该必备的工具了,做 CI/CD 必不可少的工具,了解整个前端的构建流程。K8s 的话就有点远了,应该很少有使用到容器编排的需要。

目前也有 M1 版本的了,直接官网下载安装包安装即可。

或者可以通过命令行安装非桌面版的

brew install docker


Typora

官网:https://typora.io/

目前使用过的最好用的 md 文档编辑器👌。虽然它已经开始收费了,单但目前它的替代品跟它比确实是稍逊一筹。

到这里,基本的环境配置就差不多了!很想知道你们有没有什么开发利器可以推荐给我!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,657评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,662评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,143评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,732评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,837评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,036评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,126评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,868评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,315评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,641评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,773评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,859评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,584评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,676评论 2 351

推荐阅读更多精彩内容