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

4,499 阅读5分钟

大家好,我是 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 的插件。网上应该有非常多的推荐,这里就列几个个人用得比较多的。

最后重点介绍一个 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

复制内容,并粘贴到 GithubGitlab 中设置的 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 的,可以找我哈。