【工具】前端新人入职必备清单，赶紧点赞收藏吧

站长

2023年05月26日 21:41 · 阅读数 63

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

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

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

浏览器

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

搜索引擎

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

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

【工具】前端新人入职必备清单，赶紧点赞收藏吧

Chrome 插件

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

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,可以直接通过官方文档进行下载安装。

下载完 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。拼写检查
Git History。查看 Git 历史
GitLens — Git supercharged。Git 功能增强，使用 Git 的必备插件
Live Server。方便你快速在本地起一个服务
Markdown All in One。markdown 功能增强
TODO Highlight。添加 TODO 高亮
Vetur。Vue 开发者必备
Tabnine。AI 帮助你更快编程（比如智能化提示）

最后重点介绍一个 Vscode 插件——Settings Sync。假如你已经在一台电脑中配置好了 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

终端

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

其他

思维导图，推荐使用 xmind

【工具】前端新人入职必备清单，赶紧点赞收藏吧

打开编辑 mardown——Typora

最后

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

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

转载自:https://juejin.cn/post/7016497640569307149