快速配置Mac系统前端开发环境

174 阅读1分钟

一、系统环境

Homebrew

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

Nodejs + NPM

brew install node

Nodejs + NPM 版本管理工具

#全局安装n(nodejs版本管理)
npm install -g n

#全局安装nrm(mac用户请用sudo权限)。
npm install -g nrm

#添加jd源。
nrm add jd http://registry.m.jd.com/

#切换成jd源。
nrm use jd

Yarn

brew install yarn

docker + MySQL

# 先安装docker,再执行以下命令

# 拉取MySQL镜像
docker pull mysql:latest
# 启动镜像
docker run -itd --name local-mysql -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 mysql

二、VS Code篇

2.1 VS Code插件

  • Live Server :静态服务器
  • Code Runner :代码运行器
  • Git History 和 GitLens:Git历史记录
  • JSON to TS: json转为TS申明
  • koroFileHeader: 生成文件备注
  • CSS Peek: css定位器

2.2 VS Code Settings

{
  "workbench.colorTheme": "Default Dark+",
  "workbench.startupEditor": "none",
  // 头部注释
  "fileheader.customMade": {
    // 头部注释默认字段
    "Author": "KaPeter",
    "Date": "Do not edit", // 设置后默认设置文件生成时间
    "LastEditTime": "Do not edit", // 设置后,保存文件更改默认更新最后编辑时间
    "LastEditors": "KaPeter", // 设置后,保存文件更改默认更新最后编辑人
    "Description": ""
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "eslint.probe": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue"
  ],
  "prettier.singleQuote": true,
  "prettier.arrowParens": "avoid"
}

2.3 使用Code命令打开VS Code

运行VS code并打开命令面板( ⇧⌘P ),然后输入shell command 找到: Install ‘code' command in PATH ,点击一下就OK了。

三、参考资料