【工具】前端新人入职必备清单

GopalFeng

发布于 2022-08-01 19:54:07

1K00

代码可运行

文章被收录于专栏：前端杂货铺-Gopal前端杂货铺-Gopal

运行总次数：0

代码可运行

大家好，我是 Gopal(锅巴)，目前就职于 Shopee，一家东南亚跨境电商公司。

入职第一天，一般我们的任务就只有一个，那就是配置环境。那我们需要配置哪些环境呢？今天就和大家分享一下我自己的一些建议和经验。

本文会有很多外链，推荐查看原文，会有更好的体验哈。

我们公司目前开发都是使用 Mac 办公，以下均为 Mac 版本的配置，Windows 可以借鉴，但可能存在差异。

浏览器

浏览器只推荐 Chrome。理由就是确实好用。

搜索引擎

搜索引擎建议默认设置成 Google[1]，不支持的可以设置成 Bing[2]。

之前翻译过一篇文章，讲的是怎么使用好 Google 的，这一点我觉得非常重要，感兴趣的可以读下——【工具】像大佬一样使用 Google[3]

Chrome 插件

这里给大家一个清单列表，都是我经常使用的：

FeHelper(前端助手)[4]。这个我个人觉得前端必备。JSON自动格式化、手动格式化，支持排序、解码、下载等，更多功能可在配置页按需安装
Octotree - GitHub code tree[5]。方便我们查看 Github 代码
SpanTree - GitLab Tree[6]。方便我们查看 Gitlab 代码，（吐槽一下，我们的 Gitlab 有时候实在太慢了）
React Developer Tools[7]。React 开发者必备
Vue.js devtools[8]。Vue 开发者必备
掘金[9]。逛社区
沙拉查词-聚合词典划词翻译[10]。翻译用
为什么你们就是不能加个空格呢？[11]。强迫症患者使用

Homebrew

Homebrew 是一个包管理器，用于安装 Apple 没有预装但你需要的 UNIX 工具。（比如著名的 wget）。拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令，就可以实现包管理，而不用你关心各种依赖和文件路径的情况，十分方便快捷。

安装，终端中执行：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

常见命令

安装任意包：

brew install <packageName>

示例：安装 node 也可以，当然你也可以手动安装

brew install node

卸载任意包：

brew uninstall git

查询可用包:

brew search <packageName>

查看已安装包列表:

brew list

Node.js

安装 Node.js,可以直接通过官方文档[12]进行下载安装。

下载完 Node.js 就有 npm 了。假如你的部门统一用 yarn 进行包管理，那么你需要：

npm i yarn -g

管理 Node.js 版本

不同的项目可能需要 Node.js 的版本可能不一致。推荐使用 n 来管理你的 Node.js。

安装：

npm install -g n

常见命令

列出目前已经安装的 Node.js 版本：

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 列举所有的)：

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

安装指定版本：

# 安装最新正式发布版本
sudo n latest

# 安装最新的长期支持正式发布版本
sudo n lts

# 安装指定版本
sudo n 12.22.1

切换版本：

# 然后选中特定版本，回车即可
n

卸载版本：

sudo n rm 12.22.1

管理 npm 源

工作中，我们通常需要切换到淘宝或者公司的 npm 源，推荐使用 nrm 管理你的 npm 源。

安装：

npm install -g nrm

常见命令

列出可选择的源:

nrm ls

结果：

  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/

注：前面带 * 号的表示正在使用的源

切换使用的源:

nrm use <registry>

添加一个源，如果你想添加一个源，终端执行命令 nrm add <registry> <url> [home]，reigstry 为源名，url 为源的路径， home 为源的主页。home 可以不设置。

nrm add <registry> <url>

# 示例
nrm add company http://npm.company.com/   
# add registry company success

删除源，想要删除一个源，终端执行命令 nrm del <registry>，reigstry 为源名

nrm del company
# delete registry company success

测试源速度:

nrm test npm 
# * npm ---- 833ms

开发工具

VScode 以及插件

说到 Vscode，就需要提到 Vscode 的插件。网上应该有非常多的推荐，这里就列几个个人用得比较多的。

Chinese (Simplified) Language Pack for Visual Studio Code。适用于 VS Code 的中文（简体）语言包
Code Spell Checker[13]。拼写检查
Git History[14]。查看 Git 历史
GitLens — Git supercharged[15]。Git 功能增强，使用 Git 的必备插件
Live Server[16]。方便你快速在本地起一个服务
Markdown All in One[17]。markdown 功能增强
TODO Highlight[18]。添加 TODO 高亮
Vetur[19]。Vue 开发者必备
Tabnine[20]。AI 帮助你更快编程（比如智能化提示）

最后重点介绍一个 Vscode 插件——Settings Sync[21]。假如你已经在一台电脑中配置好了 Vscode。你完全可以将配置上传到远程账号，然后你用新的电脑，只需要登录该账号，通过一些配置，就可以全部同步过来即可，这对于新人入职一家新的公司，非常方便。

Git

下载安装，可以通过上面提到的 Homebrew 安装：

brew install git

设置用户名和邮箱

git config --global user.name <名字>
git config --global user.email <邮箱>

创建 SSH key

ssh-keygen -t rsa -C <邮箱>

成功的话会在 ~/ 下生成 .ssh 文件夹，进去，打开 id_rsa.pub，复制里面的 key。也可以通过终端查看：

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[22]

终端

Mac 的终端界面是非常丑的，而且功能也不完善。推荐使用 iTerm2 + oh My Zsh 打造舒适终端体验。详情可参考 这篇 iTerm2 + Oh My Zsh 教程手把手让你成为这条街最靓的仔[23]

其他

思维导图，推荐使用 xmind

打开编辑 mardown——Typora

最后

以上，是我对于新人入职环境配置的一些建议和经验。有遗漏或者有更好的想法的，欢迎评论区告诉我哈。记得点赞收藏关注走一波啊~

另外，如果想内推 Shopee 的，可以找我哈。

参考资料

[1]Google: https://google.com/

[2]Bing: https://cn.bing.com/?FORM=BEHPTB&ensearch=1

[3]【工具】像大佬一样使用 Google: https://juejin.cn/post/6934478610518507528

[4]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

[5]Octotree - GitHub code tree: https://chrome.google.com/webstore/detail/octotree-github-code-tree/bkhaagjahfmjljalopjnoealnfndnagc?utm_source=chrome-ntp-icon

[6]SpanTree - GitLab Tree: https://chrome.google.com/webstore/detail/spantree-gitlab-tree/gcjikeldobhnaglcoaejmdlmbienoocg?utm_source=chrome-ntp-icon

[7]React Developer Tools: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?utm_source=chrome-ntp-icon

[8]Vue.js devtools: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?utm_source=chrome-ntp-icon

[9]掘金: https://chrome.google.com/webstore/detail/%E6%8E%98%E9%87%91/lecdifefmmfjnjjinhaennhdlmcaeeeb?utm_source=chrome-ntp-icon

[10]沙拉查词-聚合词典划词翻译: 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

[11]为什么你们就是不能加个空格呢？: 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

[12]官方文档: https://nodejs.org/en/

[13]Code Spell Checker: https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

[14]Git History: https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

[15]GitLens — Git supercharged: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

[16]Live Server: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

[17]Markdown All in One: https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

[18]TODO Highlight: https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

[19]Vetur: https://marketplace.visualstudio.com/items?itemName=octref.vetur

[20]Tabnine: https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode

[21]Settings Sync: https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

[22]前端应该知道的web调试工具——whistle: https://juejin.cn/post/6861882596927504392

[23]这篇 iTerm2 + Oh My Zsh 教程手把手让你成为这条街最靓的仔: https://juejin.cn/post/6844904178075058189