大家好，我是 `Gopal`(锅巴)，目前就职于 `Shopee`，一家东南亚跨境电商公司。入职第一天，一般我们的任务就只有一个，那就是**配置环境**。那我们需要配置哪些环境呢？今天就和大家分享一下我自己的一些建议和经验。 > 我们公司目前开发都是使用 Mac 办公，以下均为 Mac 版本的配置，Windows 可以借鉴，但可能存在差异。 ## 浏览器浏览器只推荐 `Chrome`。理由就是确实好用。 ### 搜索引擎搜索引擎建议默认设置成 [Google](https://google.com/)，不支持的可以设置成 [Bing](https://cn.bing.com/?FORM=BEHPTB&ensearch=1)。之前翻译过一篇文章，讲的是怎么使用好 `Google` 的，这一点我觉得非常重要，感兴趣的可以读下——[【工具】像大佬一样使用 Google](https://juejin.cn/post/6934478610518507528) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ee79ec7412c4cb18929ce1e7fcd57ba~tplv-k3u1fbpfcp-zoom-1.image) ### Chrome 插件这里给大家一个清单列表，都是我经常使用的： - [FeHelper(前端助手)](https://chrome.google.com/webstore/detail/fehelper%E5%89%8D%E7%AB%AF%E5%8A%A9%E6%89%8B/pkgccpejnmalmdinmhkkfafefagiiiad?utm_source=chrome-ntp-icon)。这个我个人觉得前端必备。JSON自动格式化、手动格式化，支持排序、解码、下载等，更多功能可在配置页按需安装 - [Octotree - GitHub code tree](https://chrome.google.com/webstore/detail/octotree-github-code-tree/bkhaagjahfmjljalopjnoealnfndnagc?utm_source=chrome-ntp-icon)。方便我们查看 `Github` 代码 - [SpanTree - GitLab Tree](https://chrome.google.com/webstore/detail/spantree-gitlab-tree/gcjikeldobhnaglcoaejmdlmbienoocg?utm_source=chrome-ntp-icon)。方便我们查看 `Gitlab` 代码，（吐槽一下，我们的 `Gitlab` 有时候实在太慢了） - [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?utm_source=chrome-ntp-icon)。React 开发者必备 - [Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?utm_source=chrome-ntp-icon)。Vue 开发者必备 - [掘金](https://chrome.google.com/webstore/detail/%E6%8E%98%E9%87%91/lecdifefmmfjnjjinhaennhdlmcaeeeb?utm_source=chrome-ntp-icon)。逛社区 - [沙拉查词-聚合词典划词翻译](https://chrome.google.com/webstore/detail/%E6%B2%99%E6%8B%89%E6%9F%A5%E8%AF%8D-%E8%81%9A%E5%90%88%E8%AF%8D%E5%85%B8%E5%88%92%E8%AF%8D%E7%BF%BB%E8%AF%91/cdonnmffkdaoajfknoeeecmchibpmkmg?utm_source=chrome-ntp-icon)。翻译用 - [为什么你们就是不能加个空格呢？](https://chrome.google.com/webstore/detail/%E7%82%BA%E4%BB%80%E9%BA%BC%E4%BD%A0%E5%80%91%E5%B0%B1%E6%98%AF%E4%B8%8D%E8%83%BD%E5%8A%A0%E5%80%8B%E7%A9%BA%E6%A0%BC%E5%91%A2%EF%BC%9F/paphcfdffjnbcgkokihcdjliihicmbpd?utm_source=chrome-ntp-iconhttps://chrome.google.com/webstore/detail/%E7%82%BA%E4%BB%80%E9%BA%BC%E4%BD%A0%E5%80%91%E5%B0%B1%E6%98%AF%E4%B8%8D%E8%83%BD%E5%8A%A0%E5%80%8B%E7%A9%BA%E6%A0%BC%E5%91%A2%EF%BC%9F/paphcfdffjnbcgkokihcdjliihicmbpd?utm_source=chrome-ntp-icon)。强迫症患者使用 ## Homebrew `Homebrew` 是一个包管理器，用于安装 `Apple` 没有预装但你需要的 `UNIX` 工具。（比如著名的 `wget`）。拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令，就可以实现包管理，而不用你关心各种依赖和文件路径的情况，十分方便快捷。安装，终端中执行： ```bash /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" ``` **常见命令** 安装任意包： ```bash brew install ``` 示例：安装 `node` 也可以，当然你也可以手动安装 ```bash brew install node ``` 卸载任意包： ```bash brew uninstall git ``` 查询可用包: ```bash brew search ``` 查看已安装包列表: ```bash brew list ``` ## Node.js 安装 `Node.js`,可以直接通过[官方文档](https://nodejs.org/en/)进行下载安装。下载完 `Node.js` 就有 `npm` 了。假如你的部门统一用 `yarn` 进行包管理，那么你需要： ```bash npm i yarn -g ``` ### 管理 Node.js 版本不同的项目可能需要 `Node.js` 的版本可能不一致。推荐使用 n 来管理你的 `Node.js`。安装： ```bash npm install -g n ``` **常见命令** 列出目前已经安装的 `Node.js` 版本： ```bash n ls ``` 结果： ``` node/8.2.0 node/9.1.0 node/10.15.2 node/12.8.0 node/12.13.0 node/14.9.0 ``` 列出远程所有的 `Node.js` 版本(可以通过 `--all` 列举所有的)： ```bash n ls-remote ``` 结果： ``` Listing remote... Displaying 20 matches (use --all to see all). 16.10.0 16.9.1 16.9.0 16.8.0 16.7.0 16.6.2 16.6.1 16.6.0 16.5.0 16.4.2 16.4.1 16.4.0 16.3.0 16.2.0 16.1.0 16.0.0 15.14.0 15.13.0 15.12.0 15.11.0 ``` 安装指定版本： ```bash # 安装最新正式发布版本 sudo n latest # 安装最新的长期支持正式发布版本 sudo n lts # 安装指定版本 sudo n 12.22.1 ``` 切换版本： ```bash # 然后选中特定版本，回车即可 n ``` 卸载版本： ```bash sudo n rm 12.22.1 ``` ### 管理 npm 源工作中，我们通常需要切换到淘宝或者公司的 `npm` 源，推荐使用 `nrm` 管理你的 `npm` 源。安装： ```bash npm install -g nrm ``` **常见命令** 列出可选择的源: ```bash nrm ls ``` 结果： ```bash npm ---- https://registry.npmjs.org/ cnpm --- http://r.cnpmjs.org/ * taobao - https://registry.npm.taobao.org/ nj ----- https://registry.nodejitsu.com/ rednpm - http://registry.mirror.cqupt.edu.cn/ npmMirror https://skimdb.npmjs.com/registry/ edunpm - http://registry.enpmjs.org/ ``` 注：前面带 * 号的表示正在使用的源切换使用的源: ```bash nrm use ``` 添加一个源，如果你想添加一个源，终端执行命令 `nrm add [home]`，`reigstry` 为源名，`url` 为源的路径， `home` 为源的主页。`home` 可以不设置。 ```bash nrm add ``` ```bash # 示例 nrm add company http://npm.company.com/ # add registry company success ``` 删除源，想要删除一个源，终端执行命令 `nrm del `，`reigstry` 为源名 ```bash nrm del company # delete registry company success ``` 测试源速度: ```bash nrm test npm # * npm ---- 833ms ``` ## 开发工具 ### VScode 以及插件说到 `Vscode`，就需要提到 `Vscode` 的插件。网上应该有非常多的推荐，这里就列几个个人用得比较多的。 - [Chinese (Simplified) Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans)。适用于 VS Code 的中文（简体）语言包 - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)。拼写检查 - [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)。查看 Git 历史 - [GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)。Git 功能增强，使用 Git 的必备插件 - [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)。方便你快速在本地起一个服务 - [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)。markdown 功能增强 - [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)。添加 TODO 高亮 - [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)。Vue 开发者必备 - [Tabnine](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode)。AI 帮助你更快编程（比如智能化提示）最后重点介绍一个 `Vscode` 插件——[Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)。假如你已经在一台电脑中配置好了 `Vscode`。你完全可以将配置上传到远程账号，然后你用新的电脑，只需要登录该账号，通过一些配置，就可以全部同步过来即可，这对于新人入职一家新的公司，非常方便。 ## Git 下载安装，可以通过上面提到的 `Homebrew` 安装： ```bash brew install git ``` 设置用户名和邮箱 ```bash git config --global user.name <名字> git config --global user.email <邮箱> ``` 创建 `SSH key` ```bash ssh-keygen -t rsa -C <邮箱> ``` 成功的话会在 `~/` 下生成 `.ssh` 文件夹，进去，打开 `id_rsa.pub`，复制里面的 `key`。也可以通过终端查看： ```bash cat ~/.ssh/id_rsa.pub ``` 复制内容，并粘贴到 `Github` 和 `Gitlab` 中设置的 `SSH` 中即可。 ## 代理工具 `whistle` 是基于 `Node` 实现的跨平台 `web` 调试代理工具。`whistle` 是一个 `web` 调试代理工具，它的功能十分强大。作为一名前端，我们需要经常跟协议中的应用层打交道，`Mock` 数据、跨域问题、`cookie` 的修改、移动端调试等等，都是我们必备的技能，而 `whistle` 就能解决其中 `90%` 的问题。个人经常使用的一些场景如下： - 绑定 `Host` - 替换请求（`Mock` 数据） - 使用 `Weinre` 或者 `vConsole` 调试移动端页面 - 修改 `cookie` - 往 `HTML` 中插入样式 - 往 `HTML` 中插入脚本 ... 详情可以看我的另外一篇文章——[前端应该知道的web调试工具——whistle](https://juejin.cn/post/6861882596927504392) ## 终端 `Mac` 的终端界面是非常丑的，而且功能也不完善。推荐使用 `iTerm2 + oh My Zsh` 打造舒适终端体验。详情可参考 [这篇 iTerm2 + Oh My Zsh 教程手把手让你成为这条街最靓的仔](https://juejin.cn/post/6844904178075058189) ## 其他 - 思维导图，推荐使用 `xmind` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/af300456a7e441cf974eb97cf704c34e~tplv-k3u1fbpfcp-zoom-1.image) - 打开编辑 mardown——`Typora` ## 最后以上，是我对于新人入职环境配置的一些建议和经验。有遗漏或者有更好的想法的，欢迎评论区告诉我哈。记得点赞收藏关注走一波啊~ 另外，如果想内推 `Shopee` 的，可以找我哈。