从零开始学前端（第一节工欲善其事必先利其器）

以你之姓@ 2024-03-17 18:40 61阅读 0赞

**古人云：工欲善其事，必先利其器**

**要想成为一个优秀的前端开发工程师，必须得有一件自己称心如意的兵器**

目前，市面上有很多的开发编辑器，比如 **WebStorm、Sublime、Notepad++、VS Code**。  
![c14698426b254ae986aa0da66893f38c.png_pic_center][]

在这些编辑器里，我觉得比较好用的是**VS Code**，当然这取决于个人喜好。

**下面给大家介绍一下VS Code 的几个必备插件，大家可以试着安装一下试试，真的非常好用**

1.Chinese(Simplified)(简体中文) ————VS Code在安装时默认的界面语言是英文的，这对于英语不好的小伙伴是机器不友好的。但是，有了这个插件就可以轻松应对看不懂英文的难题了。  
![在这里插入图片描述][076bc36c528a430e86fd4222a858b229.png]

2.Open in browser————本地浏览器加载的插件。在我们编写页面的时候总是要找到文件，然后再通过浏览器打开，这个过程过于繁琐，浪费时间，有了它我们就可以在VS Code里直接跳转到浏览器，进行页面访问。  
![在这里插入图片描述][f8be1aff95a34a86b6ef72cfe5edb796.png]

3.Live Server————本地热加载的插件。这个插件相比于上一个的好处是可以自动刷新修改的内容，不需要开发者每次进行页面刷新。  
![在这里插入图片描述][f2b1c82b5c70420088022ea929301084.png]

4.Carbon-now-sh————将代码打印为代码图片的插件。方便交流问题解决问题。  
![在这里插入图片描述][341a2442d7004665a9a1c56c2f0fb965.png]

**使用方法**  
选择需要生成的代码,Ctrl+A全选。  
然后再代码中点击右键,找到open in carbon.now.sh 弹出网页。  
已经成功生成美丽的代码图片。  
保存图片到本地.选择Export(导出)–>PNG(图片格式) 成功后。

**存在问题：网页打不开**

**解决办法：**  
进入网站https://github.com.ipaddress.com/  
搜索carbon.now.sh  
将网址和ip加入到host文件中

5.Material Icon Theme————文件图标主题插件。这套图标看起来很好看，可以改善写代码时的心情，写多了你就会明白了  
![在这里插入图片描述][486c7fcffef04265a6aa072c07000f87.png]

6.Auto Rename Tag————自动修改重命名标签。你修改了这个标签的前一半，它的后一半会自动进行修改。有效提高开发效率。  
![在这里插入图片描述][70f3ede5c66b4ebfb9333ac6e97342b4.png]

7.Prettier - Code Formatter————代码自动格式化工具。在保存的时候自动将代码进行跟行格式化，更加美观。  
![在这里插入图片描述][33b223a71bc648ad979025df5ff53b5d.png]  
安装之后需要将其配置为默认格式化程序，在页面右键找到使用格式化文档，然后进行下列配置。![在这里插入图片描述][43297d8cd8474041ac55a0f66b8ccfda.png]  
在设置中找到格式化，在里面将下列勾选，你就能得到保存时自动格式化啦，简单好用嘎嘎滴  
![在这里插入图片描述][ef771eca71f743fd9b2a28ddbb66711e.png]

**最后推荐一个字体————JetBrains Mono**  
官方网址：https://www.jetbrains.com/lp/mono/  
下载完成之后将其安装，在VS Code里面进行添加就可以使用了。  
![在这里插入图片描述][023985cc48b74c62b40713432ea259f6.png]  
它最大的区别就是 l 和 i 可以很好的区分  
![在这里插入图片描述][57f984dcfee9439394d7e69b28a11b9c.png]

**好啦，看到这里，觉得有用的小伙伴们，记得收藏起来避免下次找不到哟**

**最后，点个赞支持一下吧**

[c14698426b254ae986aa0da66893f38c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/d36d9d3353ef4bc79c492ec1038471f9.png
[076bc36c528a430e86fd4222a858b229.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/257e00d9902f4ca893b57f3bf0e3d3be.png
[f8be1aff95a34a86b6ef72cfe5edb796.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/eb7b4e27ef80438a9a0dad831ccb3f8e.png
[f2b1c82b5c70420088022ea929301084.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/59c2ec42c7214712858c2875c5e1df99.png
[341a2442d7004665a9a1c56c2f0fb965.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/a448aa8b87ce43da970cf1838676f33b.png
[486c7fcffef04265a6aa072c07000f87.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/e9e1414d4040408d832a3ea77ce2f345.png
[70f3ede5c66b4ebfb9333ac6e97342b4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/068138fa880e493090d5e602edf3c41f.png
[33b223a71bc648ad979025df5ff53b5d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/55d5a7ef34904679928519ed2cdea790.png
[43297d8cd8474041ac55a0f66b8ccfda.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/fd42e819875e4e26ab1e4ebe27739f40.png
[ef771eca71f743fd9b2a28ddbb66711e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/7083ea8851b842478a0c71a86d31dcde.png
[023985cc48b74c62b40713432ea259f6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/37ca91e2cb9c444fb1ef593069e6209e.png
[57f984dcfee9439394d7e69b28a11b9c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/13ccb959cff644779cdc0dd843530df1.png