一个常用的mac新机前端开发环境配置指南(带shell脚本)

channnxy
5,255 阅读2分钟

开发环境

homebrew

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

homebrew是mac下的一款包管理软件，有了homebrew，一条指令就可以安装软件，并且自动配置环境变量，再也不用头疼变量配置了。

  • git

    brew install git

  • nvm

    nvm是node的版本管理工具，通过nvm use xxx可以快速的切换node版本，在不同项目中开发切换纵享丝滑。

    brew install nvm
# 安装常用node版本
nvm install 6.10.1
nvm install 8.17.0
nvm install 10.21.0
# 配置默认版本
nvm alias default 10.21.0

  • zsh

    zsh是一款很好用的shell // 虽我纯粹是觉得它花花绿绿的好看，有兴趣可以安装一下

    brew install zsh
# 安装oh-my-zsh
sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

  • yarn

    yarn是一款类似npm的包管理软件，但是不同的是，yarn会缓存所有安装过的包，在其他项目中安装同一个包就无需下载，速度上比npm快了很多。

    yarn会有自己的yarn.lock文件，在开发中也要注意，项目锁的是package-lock.json还是yarn.lock，用相应的包工具下载。

    brew install yarn

npm、ynpm、yarn

这里主要配置npm的镜像, 一般会安装国内的镜像源(比较快), 企业内部一般会维护自己的镜像,可以通过一些特殊标识识别, 例如@xxx开头的包都是用http://registry.npm.xxx.com/的镜像源安装

yarn config set registry 'https://registry.npm.taobao.org/' 
# 所有的三方包使用淘宝Npm
yarn config set '@xxx:registry' 'http://registry.npm.xxx.com/'

git

配置git的用户名和密码（一般是公司的gitlab账户）

git config --global user.name  "username"   # 全局配置用户名
git config --global user.email  "email"

配置完用户名之后要配置ssh,在终端输入ssh-keygen -t rsa -C “yourEmail”, cd ~/.ssh找到id_rsa.pub文件,把文件内容复制到gitlab的setting中即可

最后可以运行ssh git@github.com测试是否联通

软件安装

vscode

  1. 常用插件：

    • 代码补全工具
      • Auto close tag Auto complete tag Auto Rename Tag
    • 让ide花里胡哨
      • bracket pair colorizer 通过不同颜色匹配括号
      • one dart pro 是atom的一款主题，够花花绿绿！好看！
      • TODO tree 可以把代码中的TODO高亮，并且生成目录列表
      • vscode-icons 给不同后缀的文件添加不同的icon，更方便区分
    • 更方便的调试
      • live share 起本地服务，无需webpack实现热更新
      • turbo console log 快捷输出log
      • code runner 在终端执行一小段代码
      • gitLens 每一行代码都可以定位到作者和上传时间，bug不背锅
    • 其他
      • chinese 中文主题
      • vetur vue的代码片段
      • eslint 代码格式化检查工具

  2. eslint配置

chrome常用插件

1. vue devtools 调试vuex状态管理
2. vimium C 用键盘模拟鼠标操作
3. tamperMonkey 安装扩展脚本

sketch

​ 可以用来看视觉稿或者画一些简单的原型图。

shell一键安装脚本

# 如果出现错误，立即终止脚本
set -e

echo "✨✨ [envbuilder]  ✨✨ ==> 开始下载homebrew"
sh -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

echo "✨✨ [envbuilder]  ✨✨ ==> homebrew安装成功，开始下载安装git" 
brew install git

echo "✨✨ [envbuilder]  ✨✨ ==> git安装成功，开始下载安装zsh" 
brew install zsh
sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

echo "✨✨ [envbuilder]  ✨✨ ==> homebrew下载成功，开始下载nvm"
brew install nvm

echo "✨✨ [envbuilder]  ✨✨ ==> nvm安装成功，开始下载常用node"
. $(brew --prefix nvm)/nvm.sh
nvm install 6.10.1
nvm install 8.17.0
nvm install 10.21.0

echo "✨✨ [envbuilder]  ✨✨ ==> 常用 node下载完成" 
nvm list

read -p "✨✨ [envbuilder]  ✨✨ ==> 是否将10.21.0设置为默认node版本?(Y/N)" set_default
if [ ${set_default} == 'yes' ] || [ ${set_default} == 'Y' ] || [ ${set_default} == 'y' ];
then
nvm alias default 10.21.0
fi

# 检查node版本
node -v

echo "✨✨ [envbuilder]  ✨✨ ==> zsh安装成功，开始下载ynpm" 
npm install ynpm -g

echo "✨✨ [envbuilder]  ✨✨ ==> ynpm下载成功，开始配置ynpm源" 
# 这里的内部源地址视情况而定
echo "alias ynpm=\"npm --registry=http://registry.npm.xxx.com --disturl=http://npm.taobao.org/mirrors/node\"" >> ~/.zshrc
tail -n -1 ~/.zshrc

echo "✨✨ [envbuilder]  ✨✨ ==> ynpm配置成功，开始下载yarn" 
brew install yarn

echo "✨✨ [envbuilder]  ✨✨ ==> 开始配置yarn源" 
yarn config set registry 'https://registry.npm.taobao.org/' # 所有的三方包使用淘宝Npm，他们的更新比较及时
# 这里的内部源地址视情况而定
yarn config set '@xxx:registry' 'http://registry.npm.xxx.com/' # 所有私有包使用ynpm
avatar
文章
阅读
粉丝