MacOS前端开发环境搭建

本人最近换了新的Mac电脑，从0开始搭建自己的前端开发环境感觉还是花了不少时间，想着好好总结一下自己的操作历程和躺的坑，方便自己和其他小伙伴遇到类似场景快速应用。本文假定读者已经对Linux基础、Git基础有了大致的了解，如果是新手小白的话建议先学习一下这两门技术再来看本文档

了解如何操作一台Mac

这是最基本的，否则遑论其它。可直接参考MacOS使用手册学习

可能遇到的坑是不知道「触屏拖移」在哪配，找到”系统偏好设置/辅助功能/指针控制/触控板选项/启用拖移“即可

科学上网

自己琢磨吧，本人用的公司内网

安装Chrome浏览器

前端必备，不解释

安装Homebrew

MacOS开发者标配，软件包管理器，官方文档很简单，直接参考安装即可

安装Iterm2

增强版的MacOS Shell终端，这篇文档解释得很详细了，另外强烈推荐按照这个文档修改配色方案，字体字号的话推荐用ubuntu mono + 22px，我最喜欢了

安装nvm

node的版本管理器，它可以很方便地下载任意版本的node及与该版本对应的npm，还能够实现在不同版本node间快速地切换，是最值得推荐的node下载方式。打开Iterm2并按照安装指南操作即可。终端执行$ nvm -v能正常显示版本号则表示安装成功

在这个过程中可能踩的坑包括：

github域名遭到DNS污染导致请求失败

安装指南里的启动脚本写入失败，这时需要其手动写入shell的配置文件，zsh为~/.zshrc, bash为~/.bash_profile (如果没有的话则手动创建)

安装node&npm

打开iterm2终端，执行nvm命令，安装某个版本的node。以version 14.x为例：

$ nvm install v14

然后执行

$ nvm current

显示当前使用的node版本号为14.x则表示安装成功，还可以直接查看node和npm版本来确认

$ node -v

$ npm -v

安装nrm

npm包有很多的镜像源，有的源会访问失败或者访问很慢，所以我们有时需要切换npm源，而nrm就是个专门用于管理npm源的工具。

要下载nrm，只需要用npm全局安装它即可

$ npm i -g nrm

$ nrm --version

可以通过如下命令查看其当前管理的源有哪些，其中带星号的表示当前使用的源

$ nrm ls

要切换到某个源的话，执行

$ nrm use <registry name>

$ add <registry> <url> [home]

配置Git

Mac一般都预装了git工具，可以通过$ git --version确认，万一没有的话直接homebrew安装即可

$ brew install git

我们每次提交的git commit都带了提交者的用户名和邮箱，这些信息是需要配置的，方式有二：

1、执行命令

git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"

2、直接修改~/.gitconfig文件（前一种方式本质上也是在做这个事情）

[user]
        name = 你的用户名
        email = 你的邮箱

接下来，为了让本地git与远程仓库之间的通信既快捷又安全，建议配置ssh。首先是查看本地是否已经具有ssh密钥：

$ ls -la ~/.ssh

如果列出了id_rsa.pub和id_rsa或者id_ed25519.pub和id_ed25519这样的东西，它们其实就是密钥对（.pub后缀的为公钥，否则为私钥，rsa或者ed25519代表生成该密钥对时使用的算法）；如果本地目前没有密钥的话，通过如下命令生成（中间会出现提示，一般一路回车即可）

$ ssh-keygen -t ed25519 -C "你的邮箱"

或

$ ssh-keygen -t rsa -C "你的邮箱"

生成密钥之后，复制公钥的内容，然后打开远程仓库（如Github或Gitlab），进入“头像/设置/SSH keys”将复制的公钥添加进去即可。

使用VS Code作为IDE

安装和使用

前往官网安装
打开 VS Code，打开控制面板（⇧⌘P）, 输入 shell command ，在提示里看到 Shell Command: Install "code" command in PATH，运行它就，然后在终端里就可以通过 code <目录> 或 code <文件> 直接打开目录或文件。
常用的快捷键

cmd + b 打开/关闭侧边栏
cmd + p 文件搜索
cmd + shift + p 打开命令面板
cmd + f 关键字搜索/替换
cmd + shift + f 全局关键字搜索/替换
option + 鼠标左键 光标并行
选中变量名 + f2 重命名变量
option + up/down 上/下移动某行

主题和插件安装

本人比较喜欢的颜色主题：Monokai、One Dark Pro、Dark+
推荐安装的插件
1. Vim 懂的都懂，不懂则不用也无所谓
2. 其它的参考这里吧

代码风格

如果有团队规范的话与其对齐，如果是自己开发的话可以参考fe-dev-playbook的推荐方案

snippet

首先为了使用snippets时正常触发代码提示，需要确保配置"editor.suggest.snippetsPreventQuickSuggestions": false
前端开发过程中用snippets比较高频的地方在于写tsx和react hooks时，其中react hooks可以使用React Hooks Snippets这个插件，而tsx比较好用的自定义模版如下

{
  // Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and 
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
  // same ids are connected.
  // Example:
  // "Print to console": {
  //  "prefix": "log",
  //  "body": [
  //    "console.log('$1');",
  //    "$2"
  //  ],
  //  "description": "Log output to console"
  // }
  "ts-react-component's template": {
    "prefix": "tsx",
    "body": [
      "import * as React from 'react';",
      "import { $2 } from '@ies/semi-ui-react';",
      "import styles from './index.scss';",
      "const { useState, useEffect } = React;",
      "",
      "interface ${TM_DIRECTORY/.*[\\\\\\/](.*)$/$1/}Props {",
      "  $3",
      "}",
      "",
      "const ${TM_DIRECTORY/.*[\\\\\\/](.*)$/$1/}: React.FC<${TM_DIRECTORY/.*[\\\\\\/](.*)$/$1/}Props> = props => {",
      "  const {  } = props;",
      "  return (",
      "    null$4",
      "  );",
      "};",
      "",
      "export default ${TM_DIRECTORY/.*[\\\\\\/](.*)$/$1/};"
    ],
    "description": "tsx template"
  }
}

断点调试

断点调试

VSCode 调试中 launch.json 配置不完全指南

node-debug-tutorial

配置前端代理工具

前端开发往往需要将浏览器请求转发到不同服务（本地/线上）以便于调试。代理过程：第一步用SwitchyOmega插件将HTTP请求转发到Whistle，第二步根据书写的Whistle规则将特定请求转发到本地/线上

whistle

安装：$ npm install -g whistle
启动：$ w2 start
打开配置界面：浏览器访问localhost:8899
配置规则，具体参考官方文档
配置证书，开启https请求捕获

SwitchyOmega

先到Chrome网络商城下载安装该插件
打开配置界面，新增情景模式：代理服务器，设置为本地8899端口（whistle服务的端口）
插件开启上述情景模式即可启用代理（浏览器所有请求均打到代理服务器）

让ssh登陆云主机的方式更快捷和优雅

假如我们有一台甚至多台云主机需要通过ssh方式登陆，通常每次登陆需要指定用户名、主机名、端口号，例如

$ ssh john@dev.example.com -p 2322

此外还需要输入密码，长此以往肯定会觉得很麻烦，我们可以通过实现无密码登陆和使用ssh配置文件来大幅提升登陆效率，对开发者而言那种感觉将是舒适且优雅的～

1、无密码登陆

即不使用密码，而是使用密钥认证进行登录。

首先我们需要一对密钥，查看和生成的方法参考配置Git的部分；
假如我们已经有了公钥id_rsa.pub，然后我们需要将其内容复制添加到远程机器的~/.ssh/authorized_key文件中，途径有很多种，可以手动拷贝，也可以在本地用ssh-copy-id命令：

$ ssh-copy-id -i .ssh/id_rsa.pub john@dev.example.com`

除此之外还需要确认远程机器的ssh守护进程（sshd）允许我们进行密钥登录，这取决于机器上的/etc/ssh/sshd_config配置，我们需要确保其中的几项配置如下

RSAAuthentication yes
PubkeyAuthentication yes
PasswordAuthentication no

必要时可sudo进行修改，然后重启sshd

$ service sshd restart

之后ssh登陆该主机就无需再输入密码了

2、使用ssh配置文件

ssh配置文件的位置是~/.ssh/config，如果没有的话可以手动创建$ touch ~/.ssh/config，然后在里面进行配置，一个具体的例子如

Host devbox
    HostName dev.example.com
    User john
    Port 2322

配好之后当我们在终端执行

$ ssh devbox

其效果就相当于

$ ssh john@dev.example.com -p 2322

也就是给该登陆命令起了个简单的别名，如果有多个机器需要登陆，只要配多个别名就行了，这样一来就挺方便的

ssh客户端按以下优先顺序读取配置，因此需要注意自己的ssh配置别被覆盖了

从命令行指定的选项

~/.ssh/config中定义的选项

/etc/ssh/ssh_config中定义的选项

全局安装一些好用的cli工具

http-server

使用http-server我们可以快速的创建一个本地http server服务，并且托管我们当前目录作为静态资源文件夹而不用特地去用Node.js框架来搭建一个静态资源服务

$ npm install http-server -g # 安装http-server模块
$ http-server . -p 8080 # 监听8080端口，以当前目录作为静态资源目录

npx (如果用了nvm的话应该会附带安装这个工具)

1、可以直接执行未经安装的node脚本（执行完会自动删除）

$ npx cowsay hello-world!

2、可以直接调用node_modules中的脚本而不需要指定脚本绝对路径或使用npm script

cloc

使用cloc 快速统计某文件夹下代码的数据, 更多参考资料查看代码统计利器 Cloc

安装一些好用的Chrome插件

参考这里

收藏一些实用网站

沏一杯热茶，慢慢欣赏自己这生机盎然的MacBook Pro，并添缀一些让生活更优雅的事物

网易云音乐：舒缓心灵，治疗创伤

微信：现代社交必备

截图工具: 好用的录屏工具

Typora：本人非常喜欢的markdown编辑器

Dash：各种工具的API文档

... ... 所知有限，欢迎评论分享更多优雅事物～