前端开发环境打造

前端开发环境打造

• vscode
• iTerm
• zsh
• 设置 zsh 插件 www.cnblogs.com/lfri/p/1421…
• .zshrc 文件再 cd $HOME 添加自动补全及高亮插件 www.cnblogs.com/lfri/p/1421…
• ssh key generated
• homebrew 安装
• node 安装

brew install node

• yarn install

npm install -g yarn

• 配置 host 文件

sudo vi /etc/hosts

• nvm (node 版本管理工具安装) -- 安装后环境变量设置 juejin.cn/post/700065…

nvm install {版本}
nvm list
nvm use {版本}

• 浏览器插件安装

GoFullPage  -- 全屏截图
XSwtich -- 代理配置
取色器 -- 前端取色
WhatRuns --- 分析页面有哪些在运行

• git 快捷键设置

`vim ~/.gitconfig`

[alias]
        co = checkout
        st = checkout
        br = checkout
        fc = fetch
        ci = commit
        ps = push
        pl = pull
        ss = status
[core]
        quotepath = false
        excludesfile = /Users/XXXXX/.gitignore_global
[gui]
        encoding = utf-8
[difftool "sourcetree"]
        cmd = opendiff \"$LOCAL\" \"$REMOTE\"
        path =
[mergetool "sourcetree"]
        cmd = /Applications/Sourcetree.app/Contents/Resources/opendiff-w.sh \"$LOCAL\" \"$REMOTE\" -ancestor \"$BASE\" -merge \"$MERGED\"
        trustExitCode = true
[http]
        sslVerify = false
[user]
        name = XXXX
        email = XXXX@hXSSS
[pull]
        rebase = true
                                                                
"~/.gitconfig" 27L, 568B

• vscode 设置

{
    "eslint.enable": false, //是否开启vscode的eslint
    "eslint.autoFixOnSave": false //是否在保存的时候自动fix eslint
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascriptreact]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

• vscode 插件安装

prettier -- 代码格式化
git blame -- 代码blame
gitLens --- vscode 浮上去会显示当前行是谁修改的
project manager --- 管理多个项目快速切换