前端小白的编辑器选择和Live Server踩坑

前端小白的编辑器选择和Live Server踩坑

 

    作为一个刚入门的web敲门汉，我使用的编辑器的一直都是SublimeText3，这款编辑器超级轻量，可以快速启动，安装方便，也有丰富的插件，但是基于我自身的使用情况来看，其实并没有用到过SublimeText3中的插件。而作为一个正在深入学习前端知识的进阶小白，我深知SublimeText3这款编辑器远远不能够满足开发需要，于是我开始尝试使用其他的编辑器。

 

    VS Code应该算是我的第一个尝试，选择它的原因其实也简单:其一，我曾经使用过它编辑其他代码，对其界面布局有一定的了解；其二，VS Code的代码高亮和颜色主题看起来着实舒服；其三，VS Code被称作是披着编辑器外衣的IDE，自带debug、git模块，涵盖了前端开发的各个方面，在各种后端代码的高亮甚至调制都有相应插件支持，使用起来也异常轻便舒适。 

    而没过多久，我们开始接触移动端页面，当然，只是顺便一提。我们尝试使用HTML代码去敲出一个移动端页面，并且打包，在手机上预览。这时候Hbuilder就走进我了的视野。Hbuilder是一款国产的优秀IDE，它拥有基于eclipse上的丰富的配置选项，这区别于其他几个编辑器，另外，Hbuilder同时支持边看边改模式，还可以很方便地做移动端开发，甚至直接打包hybrid应用。而我一开始并不想再安装一个Hbuilder，于是尝试去找一个代替方案，想找到一个可以通过VSCode完成对移动应用开发的预览和打包功能的方法，但我始终没找到最优解，于是还是选择使用Hbuilder来完成打包。 

  大佬往往都是最后登场的，我最后接触到的就是WebStorm。WebStorm是企业中常用的，它的slogen是“最智能的JavaScript IDE”、“绝不在开发体验上妥协”，确实，就界面风格上来看，WebStorm与VS Code是类似的风格，而在功能上，作为一款成熟的IDE，WebStorm的强大不言而喻。而我坚持使用VS Code的原因，大体是因为WebStorm启动太慢，而Hbuilder界面也不对我的审美。

 

VS Code 的使用 

   VS Code中有相当丰富，并且实用便捷的插件，但是也恰好有人不喜这点，觉得下载插件麻烦，其实不然。当你需要某个插件的时候，你只需要点开“扩展”，搜索你需要的插件名称，然后下载就行了，当然，有一些插件还需要进行配置，这就另说，但也不是什么难事。另外，VS Code中使用的快捷键和SublimeText3中使用的大体是相同的，这对原来的SublimeText3用户来说就很友好（其他几个编辑器可能也是差不多的，但是没有用过就没有发言权）。

 

VS Code必备/常用插件指引：

https://blog.csdn.net/fed_guanqi/article/details/93190230

文章来自CSDN平台博主jcguanqi的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 

 

踩雷第一弹

    我在前面提到过，Hbuilder有一个边看边改的模式，即当你在编辑器内保存好代码之后，转换到浏览器窗口预览时不需要再次刷新，而在VSCode中，可以通过使用插件来达到达到边改边看的效果的。方法就是下载Live Server插件，这款插件可以提供http协议服务，可以使用http（有默认端口号，但可以重新配置）进行访问本地网页,也就是实时更新内容。

 

下面描述一下我的雷：

    当我使用LiveServer打开我的前端页面时，我的页面跟我预想中的效果是一样的，而当我直接在浏览器打开（不开放http端口），或者直接点击打开我的html文件的时候，我页面出现了错乱。也就是说，我的本地文件和http打开的文件虽是同一个文件，但是效果却不同。

 

找到了雷之后，开始排雷：

    排雷其实排得并不是很顺利，但是索性还是找到了一篇可以参考的文章，文章提示说，当使用http打开html文件时，绝对路径和相对路径它都可以解析，得到文件。也就是说，当我一开始就使用http来预览页面效果，并且在完善页面代码的时候写入了带有文件路径的代码，并且这个时候我使用了绝对路径，这时候在浏览器上看的效果是正常的，没有异样的。而后换成本地文件打开，这个绝对路径则解读不出，因而造成了错乱。

 

    知道是路径的问题，就可以进行代码修复了，我在检查代码的时候确实发现了有几处图片的路径，我写成了/images/01.jpg，而修改（本地文件）之后为./images/01.jpg，此时页面正常显示。

 

此时我的头发，危。。