mac 0-1前端开发环境配置

·  阅读 183
mac 0-1前端开发环境配置

背景

最近换了一份工作,需要0-1安装前端开发环境,过程中踩到不少坑,且都是之前踩过的,只不过没有记录下来,记录此篇文档,以便参考~

👉 Xcode

App Store搜索Xcode安装

Tips:比较大,下载时间长;下载完成后,需要打开一下,同意协议授权等

👉 iTerm2

  1. 下载安装iTerm2
  2. 切换默认shell为zsh
chsh -s /bin/zsh
复制代码
  1. 安装oh-my-zsh
curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh
复制代码
  1. 重启iTerm2,可以看到效果如下

image.png

👉 nvm & node

Tips:先安装nvm(管理node版本),利用nvm安装node,不直接安装nvm

  1. 命令行安装nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | zsh
复制代码

Tips:上方命令行最后是zsh,而官网(如下图)是bash,需要根据你的shell来,由于装iTerm2的时候已经切换zsh为默认shellimage.png

  1. 验证安装成功

image.png

  1. 安装node并验证

image.png

Tips:Mac M1 ,nvm install 报错clang: error: no such file or directory: 'CXX=c++' 解决方案,终端输入以下命令

arch -x86_64 zsh
复制代码

👉 nrm & git

Tips:用nrm管理git registry

  1. 安装nrm
npm i nrm -g
复制代码
  1. 添加registry并使用
# 查看源
nrm ls
# 添加源
nrm add xnpm http://xxx 
# 使用源
nrm use xnpm
复制代码

👉 gitlab

根据gitlab提示add ssh、设置账户密码即可

👉 VsCode

  1. 安装code
配置
打开VSCode –> 
command+shift+p –> 
输入shell command –> 
点击提示Shell Command: Install ‘code’ command in PATH运行 

使用:
打开终端 –> 
cd到要用VSCode打开的文件夹 –> 
然后输入命令code .即可打开 –> 
复制代码

如下图

image.png

  1. 切换zsh终端
文件->首选项->设置->搜索“terminal.integrated.shell.osx”为“zsh”
复制代码
  1. 安装各种插件
  • vscode-icons:添加图标
  • Auto Close Tag:自动闭合 HTML/XML 标签
  • Code Spell Checker:源代码拼写检查器,提示代码中单词拼写错误
  • Draw.io Integration:画图
  • ESLint、Stylelint:代码格式校验工具,配合项目中的校验规则,实现保存时格式化代码

👉 SwitchHost

官网总是下载失败,不知道为啥;后面找个好的地址贴过来

👉 浏览器插件

  1. Proxy SwitchyOmega
  2. FeHelper

image.png

写在最后

大家有推荐好用、必备的工具欢迎评论推荐~开发效率up

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改