三分钟搞定前端开发环境

三分钟躺平
127 阅读3分钟

引言

1228050.jpeg

工欲善其事，必先利其器。
正所谓无丝如玉，有丝分裂。白驹过隙，黑马无敌。
撸代码也是撸，有好的工具才能有好的上手体验，否则强撸必然是灰飞烟灭。
作为一个loser，哦不，作为一个coder，只有当你发现自己安装了一堆没用的东西在电脑里的时候，那你就不是最没用的了。

接下来我将结合个人前端开发经验，列出市面上前端开发使用较多的工具，分享如何三分钟打造一个舒适高效的前端开发环境。

Git

GitHub是一个在线软件源代码托管服务平台，简而言之就是你的多版本线上代码仓库。安装Git只需两件事：

拓展: 三分钟学会git常用基操

Chrome

Chrome 浏览器本身就是强大的前端开发调试神器，也有很多强大的插件可用，后续专门写一篇前端调试的文章来讲解。

Vscode

VSCode一款由微软开发且跨平台的免费源代码编辑器，内置丰富的开源插件，主要用来写前端开发代码

个人使用插件截图:

vscode插件.png

Node(npm) & nvm & yarn & pnpm

  • node: 既是一种跨平台、开源的JavaScript 运行环境；也是一种可用js编写服务端的脚本语言
  • npm: 前端代码包管理工具。聪明的开发者们为了节约开发成本，将可复用代码抽离为npm包
  • nvm: 管理Node.js版本
  • yarn: 快速、可靠、安全的依赖管理工具。可视为"高级版npm"
  • pnpm: 快速、高效的包管理工具。可视为"超级版npm"
  • nrm: 切换不同的npm源而不用单独安装cnpm之类的库
  1. 推荐优先安装nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
  1. 法一：下载安装node（会附加安装npm/npx） 法二：node官网download
nvm -v # 查看当前版本，确定是否安装成功
nvm install 12 # 安装node 12版本
nvm install 16 # 安装node 16版本
nvm install 18 # 安装node 18版本
nvm use 18 # 切换使用node 18版本
node -v # 查看当前node 版本
npm -v # 查看当前npm 版本
npx -v # 查看当前npx 版本
  1. 安装yarn, pnpm, nrm
npm install -g yarn 
npm install -g pnpm 
npm install -g nrm 
yarn -v # 查看当前版本，确定是否安装成功
pnpm -v # 查看当前版本，确定是否安装成功
nrm --version # 查看当前版本，确定是否安装成功

Iterm2

一款功能强大的终端工具，Terminal 的替代品，适用于Mac。支持分窗口操作、自动补齐、粘贴历史、回放功能、全屏等功能。

一些常用快捷键与 chrome 快捷键类似:

ctrl + a/e #快速切换到当前正在输入的文本的头部／尾部
ctrl + u #清空当前输入
cmd + T #打开一个新的 iterm2 Tab
cmd + 方向键 #左右切换 Tab
cmd + D #分屏
cmd + K #清屏
cmd + N #打开一个新的 iterm2 窗

配置截图（调整打开的宽高和内容Unlimited）：

截屏2024-06-09 14.33.02.png

截屏2024-06-09 14.32.53.png

拓展: 三分钟学会终端常用基操

ZSH

zsh 的强大之处有色彩高亮，命令提示，智能补全等等。下载安装ZSH执行以下命令

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

更多下载安装说明

配置ZSH

  1. 打开配置.zshrc：
code ~/.zshrc # 打开zsh配置文件

或

vim ~/.zshrc # 打开zsh配置文件
  1. 我的配置如下:
export ZSH=$HOME/.oh-my-zsh
ZSH_THEME="ys"
plugins=(git autojump zsh-syntax-highlighting zsh-autosuggestions last-working-dir web-search)

source $ZSH/oh-my-zsh.sh

alias cls='clear'
alias ll='ls -l'
alias la='ls -a'
alias vi='vim'
alias javac="javac -J-Dfile.encoding=utf8"
alias grep="grep --color=auto"
alias -s html=mate
alias -s rb=mate
alias -s py=vi
alias -s js=vi
alias -s c=vi
alias -s java=vi
alias -s txt=vi
alias -s gz='tar -xzvf'
alias -s tgz='tar -xzvf'
alias -s zip='unzip'
alias -s bz2='tar -xjvf'
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

# pnpm
export PNPM_HOME="/Users/finley/Library/pnpm"
export PATH="$PNPM_HOME:$PATH"
# pnpm end
  1. 更新配置
source ~/.zshrc

附

适用于前端开发的工具还有很多，比如 fork（管理git分支的神器），ihosts（管理host的神器-可在Apple Store下载），postman(API调试神器)等等，欢迎大家讨论留言。

avatar
文章
阅读
粉丝