MacOS前端开发环境搭建
1. 系统配置
增加github host,方便后续软件安装
sudo vi /etc/host
# 增加如下host199.232.68.
2. 系统工具
2.1 Brew
brew是Mac OS软件安装工具,安装brew后可以使用命令行在线安装git、iterm等工具
/bin/bash -c "$(curl -fsSL /Homebrew/install/HEAD/install.sh)"
2.2 Git
参考Readme: https://git-/download/mac,使用brew安装git和git-gui
# Git brew install git# GUI brew install git-gui
2.3 item2
命令行工具推荐iterm2,稳定性和命令行高亮、主题等较系统自带terminal有质的提升
brew install iterm2
2.4 oh-my-zsh(选装)
安装iterm2后,可以选择安装oh-my-zsh。该工具主要用于美化iterm2主题,拓展高亮等。
sh -c "$(curl -fsSL /ohmyzsh/ohmyzsh/master/tools/install.sh)" // 官网的需要替换成
3 开发工具
3.1 Host管理工具:switch host
点击switch host下载到桌面,手动安装即可
3.2 代理工具:LightProxy
点击LightProxy下载到桌面,手动安装即可。LightProxy是阿里开源的免费代理工具,功能包括:
host配置(临时host,不会写入etc/host文件)API监听(集成了Whistle,简化了https证书配置等操作)代理转发(类似Charles,配置更灵活)页面debugger移动端代理访问
3.3 前端开发IDE:VSCode
点击VSCode进入VSCode官网下载
3.4 NodeJs版本管理:nvm
参考nvm 安装及管理node版本(MacOS)
注意,需要手动导入环境变量。若nvm安装后使用正常,安装某些软件后突然不可用,一般是环境变量失效了,重新将环境变量导入到当前的profile(如 ~/.zshrc等)
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
3.5 FTP工具:Filezilla FTP
进入Filezilla官网,选择安装免费版即可
4. 其它
4.1 开放第三方软件运行权限
到应用文件夹,找到应用,右键打开
4.2 去除VSCode右下角弹窗
找到你vscode的安装路径,并找到workbench文件夹。例如,vscode的安装路径为D:\Microsoft VS Code\时,则打开如下文件夹D:\Microsoft VS Code\resources\app\out\vs\workbench。
打开workbench.desktop.main.css文件,搜索monaco-workbench>.notifications-toasts.visible,将visible设置改成none,即monaco-workbench>.notifications-toasts.visible{display:none;flex-direction:column}。保存文件