vscode scss样式飘红以及eslint无法自动检测 浅浅的花香味﹌ 2021-07-25 15:23 851阅读 0赞 最近在使用vscode时,遇到了两个问题。 #### scss样式飘红 #### ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70] 类似于这样,虽然并不影响代码,但是非常不美观。 解决方法如下: 1. 安装插件 vetur 插件 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1] 2. 配置文件的处理 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2] 点击 vetur右侧的齿轮图标,选择“扩展设置”,然后自动打开设置页面。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3] 点击“在settings.json”中编辑,然后会自动打开setting.json文件,或者点击右上角的这个图标也可以进行视图与代码区域的切换。 ![在这里插入图片描述][20200709131608958.png] 在settings.json中写入"files.associations": \{ “*.vue": “vue” \}。 我本来的setting.json文件中是有这个选项的。“files.associations”:\{"*.vue”:“html”\},此处我直接把后面的"html"改为"vue",就去掉了scss样式飘红的问题。 效果如下; ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4] #### vscode eslint代码无法自动检测,导致代码提交时报错 #### eslint插件我早就安装好了,但是依然没有对我的代码进行自动检测,比如`===`我写成了`==`,字符串应该用双引号进行包裹,我写成了单引号。这种的错误应该是eslint检测出来的。 查找资料后发现,仅仅是安装了eslint插件并启用,是不够的,还需要对setting.json文件进行处理。 处理如下: 参考链接:[vscode安装eslint插件][vscode_eslint] 此文章中,我没有进行最后一步操作,能够达到预期的效果。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5] 这一步是很关键的,最后一步,我操作后发现没有效果,去掉最后一步后,反而有效。 最终效果: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 6] 该写`===`的地方,我写了`==`,此时就会有飘红报错,改正后,则报错消失。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 7] 与vscode编辑器对应的webstorm软件,在文件中右击就会有代码格式自动检测并修复的选项,但是vscode是没有的。 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/04de04f1a01248d18eb37ecf284abb48.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/64212e2936a749549e23dc32aca341d5.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20210725/2733fda385e24819b37dd849736eb867.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20210725/dbd93d55c8f04216ba29d52d6b55a0f5.png [20200709131608958.png]: /images/20210725/48cf85f6724e404fadf2390a46ec7687.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]: /images/20210725/41765abddd4145d9b5eae6c07277ca81.png [vscode_eslint]: https://www.cnblogs.com/alice626/p/11463332.html [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]: /images/20210725/afdf398ebd6d4227b0726aed0934915e.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 6]: /images/20210725/0499f34339d241feb43bacb4e5f56ad8.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 7]: /images/20210725/ebcc9a97954e4eebbfea5d620a9104f0.png
还没有评论,来说两句吧...