vscode中eslint插件的配置(prettier配置无效)

这篇文章主要介绍了vscode中eslint插件的配置(prettier配置无效),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。

用vue-cli构建vue项目,会有个eslint代码检测的安装

可vscode自带代码格式化是prettier格式(右键有格式化文件或alt+shift+f)

这时候要在vscode上装一个eslint插件

vscode中eslint插件的配置(prettier配置无效)

装完后在文件—–》首选项——-》设置里找到settings.json(快捷键忘了)

vscode中eslint插件的配置(prettier配置无效)

eslint配置如下,(配置的·具体详情还有待研究,我也是网上copy的,不过亲测可用)。保存配置后每次写.vue文件只要control+s保存,就可以把代码格式改成符合eslint标准

“eslint.autoFixOnSave”: true,
// 专门写Vue的eslint配置
“eslint.validate”: [
“javascript”,
“javascriptreact”,
{ “language”: “html”, “autoFix”: true },
{ “language”: “vue”, “autoFix”: true }
]

在写vue的时候很多人会选择prettier+eslint来规范代码格式

这时候有些人就很奇怪,我明明在setting.json里配置了prettier的格式化规范,怎么就不生效呢

其实用vscode做vue开发的时候都会安装一个Vetur的插件来对.vue格式的文件进行处理,Vetur自带了格式化,规范就是使用prettier

如果你有装prettier插件,并且在设置或setting.json里配置了prettier的话是无效的

vscode中eslint插件的配置(prettier配置无效)

vscode中eslint插件的配置(prettier配置无效)

如上图,在设置勾选后配置后就会在setting.json里生成对应配置代码,不过由于Vetur的存在,此时的prettier其实并未起作用(可能是优先级问题吧,我也不清楚)

正确配置看下图和Vetur官方文档

https://vuejs.github.io/vetur/formatting.html

vscode中eslint插件的配置(prettier配置无效)

所以说有两种方法配置,一种是在根目录下写一个.prettier文件,文件里的内容可以参考网上其它文章。另一种就是如上图所示,在setting.json里配置

vscode中eslint插件的配置(prettier配置无效)

eslint也是能格式化的,只是有局限性,所以要prettier来配合

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

文章转自脚本之家,原文链接:https://www.jb51.net/article/169682.htm

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:SEO优化专员,转转请注明出处:https://www.chuangxiangniao.com/p/899443.html

(0)
上一篇 2025年1月4日 01:36:57
下一篇 2025年1月4日 01:37:30

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • VSCode插件安装完成后的配置详解

    这篇文章主要介绍了VSCode插件安装完成后的配置详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。 VSCode插件安装完成后,有些插件如果你想要完整的使用其中的功…

    编程技术 2025年1月4日
    100
  • VSCode的使用配置以及VSCode插件的安装教程详解

    这篇文章主要介绍了VSCode的使用配置以及VSCode插件的安装教程详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下。 配置篇 打开设置界面 许多设置都需要在设置界面进行,所以想要配置第一步就…

    2025年1月4日 编程技术
    100
  • vscode配置setting.json文件实现eslint自动格式代码

    这篇文章主要介绍了vscode配置setting.json文件实现eslint自动格式代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 一、ESlint+Vetur 实现ESlint…

    2025年1月4日 编程技术
    200
  • vscode 配置vue+vetur+eslint+prettier自动格式化功能

    这篇文章主要介绍了vscode 配置vue+vetur+eslint+prettier自动格式化功能,本文通过实例代码图文的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 该配置用于vue开发,最终…

    2025年1月4日 编程技术
    200
  • 详解vscode使用git所遇到的坑

    这篇文章主要介绍了详解vscode使用git所遇到的坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。 今天给vscode配置git的时候,差点没把我送走,我在配置gi…

    2025年1月4日 编程技术
    200
  • 2020最新版vscode格式化代码的详细教程

    这篇文章主要介绍了2020最新版vscode格式化代码的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下。 这篇关于vscode格式化配置研究初稿,具体内容如下所示: 前言 之前用vscod…

    编程技术 2025年1月4日
    200
  • Vscode中快速创建自定义代码模板的方法

    这篇文章主要介绍了Vscode中快速创建自定义代码模板的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 Vscode中快速创建自定义代码模板 一招鲜,吃遍天,学会了…

    2025年1月4日 编程技术
    200
  • 使用VSCode如何从github拉取项目的实现

    这篇文章主要介绍了使用VSCode如何从github拉取 项目的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。 最近使用vscode进行前端编程,遇到一些问题网上…

    2025年1月4日
    200
  • 玩转VSCode插件之Remote-SSH的使用情况

    这篇文章主要介绍了玩转VSCode插件之Remote-SSH的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。 前言 每当更换电脑就要从新搭建一遍开发环境。。。 每…

    2025年1月4日 编程技术
    200
  • VSCode 格式化缩进代码的实现

    这篇文章主要介绍了VSCode 格式化缩进代码的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。 1)文件 —> 首选项 因为 VsCode 默认启用了根据文…

    2025年1月4日
    200

发表回复

登录后才能评论

联系我们

156-6553-5169

在线咨询: QQ交谈

邮件:253000106@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

联系微信