前端开发基础学习必须软件安装介绍

5,313 阅读5分钟

工欲善其事必先利其器,刚开始学习我们需要做好充足的准备工作,比如软件你接下来我们就带领大家安装我们学习前端基础所需的一些软件😍😍😍

bg.jpg

💖💖💖编辑器VScode

编辑器有很多比如HBuilder,vscode,DW等,我们推荐使用# Visual Studio Code也就是vscode,因为vscode有几个优点,如下

🎉vscode优点

1.轻量级

vscode是一款轻量级的编辑器,安装包小,且启动速度快,可以提高用户体验。

2.插件丰富

vscode拥有丰富的插件系统,可以编辑HTML、CSS、JS、TS、Vue、React等前端代码和JAVA、Python等后端代码。

3.具有代码跟踪功能

vscode可以对代码进行标注,可以查看更改了那些文件,文件中修改了第几行的代码等。

🎉官方下载地址

网址:code.visualstudio.com/Download

大家可以根据自己的电脑系统下载需要的版本

Snipaste_2022-08-27_08-58-55.png

🎉基础插件安装

初学者我们推荐安装3款插件, 分别是

✔01、中文语言包扩展(简体):Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

✔02、在默认浏览器或应用程序中打开当前文件:open in browser

✔03、代码格式化程序:Prettier - Code formatter

Snipaste_2022-08-27_09-01-27.png

安装步骤

🎉第一步:打开vscode软件,然后点击扩展图标

🎉第二步:在搜索框中输入自己想要下载的插件名称,将会出现一堆插件

🎉第三步:选择自己想要的插件点击Install安装即可

Snipaste_2022-08-27_09-11-09.png

注意: 安装语言汉化包,需要重启vscode后才能看到效果哦!!其他两款插件搜索安装即可;

Snipaste_2022-08-27_09-14-16.png

🎉插件的相关配置

代码格式化程序:Prettier - Code formatter

01、点击管理按钮 ----- 选择设置 ----- 02、输入“保存” 关键字 ---- 03、右侧勾选Format On Save

Snipaste_2022-08-27_10-19-15.png

open in browser 插件使用

此插件只能在.html文件中使用,在html文件右键选择浏览器打开,快捷键Alt+B可以用哪个自己电脑默认设置好的浏览器打开,快捷键Shift+Alt+B 可以自己选择响应的浏览器打开哦!

Snipaste_2022-08-27_10-24-06.png

💖💖💖Typora编辑器和阅读器

🎉Typora软件介绍

Typora是一款 Markdown 编辑器和阅读器。

是一款由 Abner Lee 开发的轻量级 Markdown 编辑器,与其他 Markdown 编辑器不同的是,Typora 没有采用源代码和预览双栏显示的方式,而是采用所见即所得的编辑方式,实现了即时预览的功能,但也可切换至源代码编辑模式。

Typora 目前采用买断制,价格为 14.99 美元/89 元人民币,支持 macOS、Windows、Windows(ARM)、Linux 系统,最多可在 3 台设备上使用, 还提供 15 天的免费试用。

2021年11月,据 Typora 官网,Markdown 编辑器 Typora 在长时间的免费测试之后,正式推出了 1.0 正式版,并开始收费。

🎉Typora软件下载

2021年11月,推出了1.0正式版开始收费,大家可以下载正式版哦,买断即可:

当然我们也可以使用以前的测试版本,不收费哦!!mac版和windows版都有哦!

百度网盘链接:pan.baidu.com/s/145D8Q6_2… 提取码:cavz

💖💖💖Snipaste截屏贴屏

Snipaste是一款简单但功能强大的剪切工具,Snipaste还可以支持你将屏幕截图固定在当前设备的显示屏幕上让你随时自由编辑。Snipaste还可以将剪切板中的各种文本信息或是颜色进行转换,转换后的图像可以想窗口一样浮动在屏幕上。另外Snipaste用许多隐藏功能可以让您的生活更加高效。

官方网址:zh.snipaste.com/

专业版功能介绍:docs.snipaste.com/zh-cn/pro

🎉软件安装

我们可以直接去官网下载自己对应的版本,然后按照教程安装即可,一下操作是windows操作哦!MAC版本的自己按照MAC方式安装:

第一步:官网下载压缩包,将压缩包解压到文件夹,并且将文件夹拷贝到自己的安装软件的硬盘中;

第二步:打开文件夹找到Snipaste.exe,鼠标右键 --- 发送到 --- 桌面快捷方式 --- 双击快捷方式图标即可使用

Snipaste_2022-08-27_11-22-01.png

🎉软件使用快捷键

双击打开桌面快捷方式,按下 F1 快捷键即可截屏,如果F1快捷键不能使用,可以同时按下F1+Fn键进行截屏操作哦!😍😍😍

💖💖💖像素大厨PxCook

从设计到代码, 让团队高效协作,高效易用的自动标注工具, 生成前端代码, 设计研发协作利器;

我们主要用来进行设计稿的测量哦!非常香😍😍😍!

官网:www.fancynode.com.cn/pxcook

下载安装,可以去官网查看快速入门教程哦 www.fancynode.com.cn/pxcook/docs

注意: 一般是UI设计师会给咱们提前标注好哦,前端只是使用就可以啦!!

💖💖💖压缩软件

压缩软件有很多,比如:好压,bandzip等,不过很多都带有广告,我们推荐使用,bandzip这一款哦,目前没有广告,苹果MAC系统应该自带解压缩,可以不用安装哦!!

官方网址:cn.bandisoft.com/

💖💖💖思维导图xmind

Xmind是一款 全功能 的思维导图和头脑风暴软件。像大脑的瑞士军刀一般,助你理清思路,捕捉创意。辅助我们整理学习知识。

官方网址:xmind.cn/