前端快速重装工具集

一刀流凡凡
365 阅读11分钟

前言：

​ 每当我们换了新电脑，都需要把我们前端开发的工具重装一次，本文目标就是快速重装前端开发工具，并提供资源，所有的开发工具都会加入工具集放在文末供大家下载😄（ps：因为本人使用win10系统，所以工具集都是基于64位windows平台的）

一、node工具

对于前端来说，node必须排第一位，现代前端工程化方方面面都离不开node支持。还记得第一次装Node时对着教程创建文件夹的小心翼翼吗，还有开发中因为node版本不对而报的各种错误。。。现在我们有了一个成熟的node版本管理工具——nvm.

1，nvm

简介：

nvm，全名node.js version management，顾名思义是一个nodejs的版本管理工具。通过它可以安装和切换不同版本的nodejs。

下载：
  • 可以在 github.com/coreybutler… 地址处下载最新的版本，推荐下载「nvm-setup.zip」安装版
  • 文末工具集获取「nvm 1.1.7」版本
安装：

解压后，双击安装文件nvm-setup.exe

选择nvm安装路径

选择nodejs安装路径

确认安装即可，建议都不要装在C盘，因为后面下载包的node_modules文件夹会越来越大，挤占系统盘空间。

安装成功后，打开cmd命令行，输入命令nvm显示如下即为成功。

使用：

上图出现的命令即为nvm常用的一些命令。

  • nvm list available，查看可下载nodejs版本，如下图所示，LTS列为建议下载版本

  • 选择想要下载的版本，如输入nvm install 12.13.0下载nodejs 12.13.0 版本

  • nvm list查看当前已下载nodejs版本

  • nvm use 12.13.0选择nodejs 12.13.0版本使用，开发中需要哪版切哪版

  • 再次nvm list查看当前选择版本，如下图，12.13.0版本前带 * ，即为当前使用12.13.0版本

QA:

npm是随nodejs的安装而自动安装上的，可以直接使用，不同的nodejs版本，npm版本也不相同，开发中需要注意。

2，nrm

有了nvm管理node版本，可以使用npm来安装我们想要的各种库了，这时我们还需要一个工具来管理npm的镜像源。

简介：

nrm(npm registry manager )是npm的镜像源管理工具，有时候国外资源太慢，我们可以切到cnpm快速安装，但有时候cnpm安装会报错，我们需要有一个工具可以来回切换使用。

下载：

命令行执行npm install -g nrm，全局安装nrm

安装：

执行nrm如下图即为安装成功

使用：

  • nrm ls查看npm的镜像源，包含了所有常用的npm镜像源如淘宝源、yarn等等，免去了一个一个下载他们的繁琐步骤~

  • nrm use cnpm切换npm镜像源为cnpm

  • add <registry> <url>如果公司建设自有镜像源的话使用这条命令来添加使用，其中reigstry为源名，url为源的路径。

二、版本管理工具

目前最流行的版本工具是Git和Svn，两个都装一下

1，Git

简介：

Git是一款免费、开源的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。它采用了分布式版本库的方式，不必服务器端软件支持，使源代码的发布和交流极其方便。Git的速度很快，最为出色的是它的合并跟踪的能力。

下载：
  • git-scm.com/downloads 地址，选择系统类型后下载最新版本
  • 文末工具集获取「Git-2.18.0-64」版本
安装：

双击「Git-2.18.0-64-bit.exe」文件，选择git安装目录，一路选择默认配置即可。

使用：

git安装成功后，文件夹下单击右键出现Git GUI Here和Git Bash Here选项，安装成功。

git推崇使用Git Bash 来进行git命令操作，并不推荐直接使用cmd命令行。安装成功后，我们可以在Git Bash使用git --version来查看当前版本.

  • git config --global user.name "your name"配置用户名
  • git config --global user.email "your_email@youremail.com"配置用户邮箱
  • git config --list查看git配置
  • git clone url来拉取github上的项目仓库
  • 。。。git操作非常多就不在这里一一赘述了，可以使用git help来查看git命令

2，Svn

简介：

Svn全称Subversion，是一个自由/开源的版本控制系统，一组文件存放在中心版本库，记录每一次文件和目录的修改。

Svn与Git最大的不同就在于svn是集中式的版本控制系统，有一个单一的集中管理的服务器，保存所有文件的修订版本，而协同工作的人们都通过客户端连到这台服务器，取出最新的文件或者提交更新。

Git是分布式版本控制系统，客户端并不只提取最新版本的文件快照，而是把原始的代码仓库完整地镜像下来。这么一来，任何一处协同工作用的服务器发生故障，事后都可以用任何一个镜像出来的本地仓库恢复。

下载：
  • tortoisesvn.net/downloads.h…地址可以下载svn的最新版本，建议选择想要的版本下载，可以在下方的「Older Releases」处进入osdn.net/projects/to…页进行挑选，想要对应的语言包也可以选择对应版本的。
  • 文末工具集获取Svn1.10.5版本和该版本的简体汉语包
安装:

双击「TortoiseSVN-1.10.5.28651-x64-svn-1.10.6.msi」文件安装，选择非C盘目录，一路选择默认配置next即可，安装完成后右键如下即为成功。

如果想要安装汉化包，将「LanguagePack_1.10.5.28651-x64-zh_CN.msi」文件复制到Svn安装目录下，双击执行即可。如果汉化没成功，可以删掉Svn目录下的Languages文件夹，重新执行汉化包文件，这时Languages文件夹会重新安装好。右键进入svn的setting设置，选择语言为汉语，如下所示：

使用：
  • 在一个空白目录右键选择SVN checkout，填入repository(版本库)的位置，填入用户名密码即可本地加入版本库
  • update更新、commit提交等等具体操作不再赘述，大家自行探索

三、编程工具

编程工具方面大家各有所爱，这里只讲下个人比较喜欢的一套搭配。

工作编程主用webstorm，辅用HbuilderX。另外很受大家欢迎的VSCode也为大家放入了工具集~

1，WebStorm

简介：

WebStorm是大名鼎鼎的jetbrains公司旗下的前端编辑器，号称最智能的JavaScript IDE。是不是最智能的不说，它确实是给人超级棒的开发体验。颜值是私以为最舒服的，智能代码补全、动态错误检测、迅速找到相关变量、函数的定义、断点调试器等等功能让人直呼巴适~

下载：
安装：

webstorm正常选择安装路径，想要的配置即可。

因为是收费的产品，所以想要免费使用时需要自己找方法，当然，最推荐的还是购买正版软件。

使用：

WebStorm绝对是一款优秀的，可以作为主力的编程工具。好喜欢它侧边栏的npm模块，可以自动识别package.json文件中的命令，做成一个点击的可视化面板。WebStorm哪哪都好，唯一的缺点是体积比较大，打开项目的时间略久，下面的HbuilderX可以很好的弥补这一点。

2，HbuilderX

简介：

一款国产编辑器，免费，颜值优秀，体积轻巧。它给我最大的感受就是快，很大的项目也可以做到秒开；另外它的代码提示也很齐全（你懂的）；对于用vue的同学，它的口号就是专为vue打造，可以大幅提升你的vue开发效率~

下载：
安装：

解压后直接就是一个可运行文件夹，无需安装，只要找到HbuilderX.exe文件运行即可

使用：

用vue的同学可以尝试它带来的全新开发体验，像我这样用react的，就比较喜欢用它来做一些demo,验证思路等等，就喜欢它的快和自带浏览器，验证起来非常方便。

四、联调工具

1，Postman

简介：

Postman是用于API开发、测试的协作平台，简化了构建API的每个步骤并简化了协作，可以更快地创建更好的API。

下载：
安装：

选择路径直接安装即可

使用：

2，Wireshark

简介：

是一款非常强大的网络封包分析软件，可以抓取各种网络封包，显示网络封包的详细信息。我们开发app时不能像chrome浏览器的network栏一样直观的看到请求信息，这时我们可以使用wireshark通过抓包来查看、分析请求。

下载：
安装：

选择路径直接安装即可

使用：

1,打开软件后，先选择网络连接，因为连着无线网所以选择WLAN，如下图，双击

2，此时已进入捕获网络包的页面，我们请求“人人都是产品经理来”首页来测试下。F12打开开发者工具，进入首页后，查看network网络请求，发现有一个POST请求，如下图：

记住此时的ip地址为121.40.98.114，端口80，方法为POST

3，返回Wireshark，现在有超级多的包，如下图

我们需要在上方的输入栏过滤筛选一下，输入

ip.addr==121.40.98.114 and http.request.method=="POST" and tcp.port==80

选择刚刚记住的信息进行筛选，回车，得到筛选的结果，果然只有一条了！

经过和chrome浏览器的比对，我们确定这就是要抓的包，红色框部分是该请求的请求头信息，黄色框部分是该请求携带的请求体参数。

过滤器语法如下：

  • 协议过滤，直接输入协议名即可，如

    • TCP，只显示TCP协议的数据包列表

    • HTTP，只查看HTTP协议的数据包列表

    • ICMP，只显示ICMP协议的数据包列表

  • ip过滤

    • ip.src ==192.168.1.104 显示源地址为192.168.1.104的数据包列表
    • ip.dst==192.168.1.104, 显示目标地址为192.168.1.104的数据包列表
    • ip.addr == 192.168.1.104 显示源IP地址或目标IP地址为192.168.1.104的数据包列表

  • 端口过滤

    • tcp.port ==80, 显示源主机或者目的主机端口为80的数据包列表。
    • tcp.srcport == 80, 只显示TCP协议的源主机端口为80的数据包列表。
    • tcp.dstport == 80，只显示TCP协议的目的主机端口为80的数据包列表。

  • http方法过滤，http.request.method=="GET", 只显示HTTP GET方法的。

  • 逻辑运算符 and/or/not，过滤多个条件组合时，使用and/or。比如获取IP地址为192.168.1.104的ICMP数据包表达式为ip.addr == 192.168.1.104 and icmp

五、辅助工具

1，Cmder

简介：

你一定很好奇本文的cmd截图怎么这么好看呀，原来我使用了一款高颜值的命令行工具，cmder。

它可以多开窗口，花样设置窗口主题，有了它你再也不用忍受cmd的黑屏白字了~

下载：
  • cmder.net/官网下载，可选mini版或完整版，建议完整版功能更齐全
  • 文末工具集获取cmder完整版v1.3.5
安装：

解压文件后点击cmder.exe即可使用。

使用：

为了方便在任意文件夹右键使用cmder，我们把cmder文件夹路径添加到环境变量的Path中，以管理员身份打开，执行Cmder.exe /REGISTER ALL，即可成功。

文字乱码问题：当我们使用ls命令查看文件目录时，发现，中文被显示成了一些奇怪的乱码，将以下几行代码配置在cmder/config/user-aliases下即可解决问题:

l=ls --show-control-chars
la=ls -aF --show-control-chars
ll=ls -alF --show-control-chars
ls=ls --show-control-chars -F

如果进行了以上配置还存在乱码问题时，还能尝试进行如下配置：

主题设置：内置了一些好看的主题，选择你喜欢的，位置在setting-Features-Colors-Schemes，如下：

2，Typora

简介：

开发也少不了写文档，这是一款超极棒的markdown文档编辑器。你说什么，之前的ide也支持markdown呀，你怎么不用？谁要用写代码的工具写文档呀（傲娇脸）~

而且现在好多的markdown工具都是在源码上直接写，满屏乱七八糟的语法符号，只有预览才可以看到真正的markdown状态。Typora提供了真正的的实时预览，所写立马就看到了效果，把语法符号都藏了起来，这样整个编辑器非常清爽~

使用它可以专注于你要写的东西而不必额外关心一些其他事情，悄悄告诉你，本文也是用Typora写的😄

下载：
  • www.typora.io/ 官网下载最新版
  • 文末工具集获取Typora 0.9.89版本
安装：

选择安装路径默认安装即可

使用：

Typora支持且仅支持markdown，只要做好一件事就好了~

只要你熟悉markdown的常用语法，就可以使用它专注的写文档啦，Typora本身简洁的让你感觉置身于一片白茫茫的雪地中，什么都不用多想。

结尾

最后，是大家想要的工具集，放到了下方公众号，发送 「前端工具集」 即可获得~

avatar
文章
阅读
粉丝