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

 更新时间:2019年09月10日 09:26:45   作者:帅气兆  
这篇文章主要介绍了vscode中eslint插件的配置(prettier配置无效),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

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

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

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

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的话是无效的

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

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

官网链接

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

------------------------------------------------------------------------------分割线---------------------------------------------------

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

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

相关文章

  • vue通过video.js解决m3u8视频播放格式的方法

    vue通过video.js解决m3u8视频播放格式的方法

    这篇文章主要给大家介绍了关于vue通过video.js解决m3u8视频播放格式的方法,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-07-07
  • 深入了解Vue组件七种通信方式

    深入了解Vue组件七种通信方式

    vue组件通信的方式,这是在面试中一个非常高频的问题。其实Vue组件的通信方式除了props和 $emit还有很多,本文将对vue组件通信方式进行一下总结,感兴趣的可以学习一下
    2021-12-12
  • vue处理emoji表情占位符的操作方法

    vue处理emoji表情占位符的操作方法

    在计算字符数时,一般情况下,英文字符、数字和大部分符号都可以被视为占一个字符长度,因为它们是单个字节,然而,对于某些特殊字符,如表情符号和部分非英文字符,会被认为占据了多个字符长度,本文给介绍了vue处理emoji表情占位符的操作方法,需要的朋友可以参考下
    2024-06-06
  • Vue前端生成UUID的方法详解

    Vue前端生成UUID的方法详解

    这篇文章主要给大家介绍了关于Vue前端生成UUID的相关资料,前端需要生成一个唯一标识符作为ID时,可以使用Vue UUID插件,比如生成订单号、用户ID等等,需要的朋友可以参考下
    2023-09-09
  • 查看vue版本号以及vue/cli脚手架版本号方式

    查看vue版本号以及vue/cli脚手架版本号方式

    这篇文章主要介绍了查看vue版本号以及vue/cli脚手架版本号方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue使用file-saver本地文件导出功能

    vue使用file-saver本地文件导出功能

    这篇文章主要介绍了vue使用file-saver本地文件导出,大家需要安装xlsx和file-saver,然后创建localExports.js文件,具体实现代码跟随小编一起看看吧
    2022-01-01
  • 详解通过JSON数据使用VUE.JS

    详解通过JSON数据使用VUE.JS

    本篇文章主要介绍了详解通过JSON数据使用VUE.JS,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 关于vue文件中index.vue的使用方法

    关于vue文件中index.vue的使用方法

    这篇文章主要介绍了关于vue文件中index.vue的使用方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue3  mixin 混入使用方法

    vue3  mixin 混入使用方法

    这篇文章主要介绍了 vue3  mixin 混入使用方法,mixin 混入,提供了一种非常灵活的方式,来分发 vue 组件中的可复用功能,一个mixin 对象可以包含任意组件选项,当组件使用 mixin 对象时,所有的 mixin 对象的选项将被混入组件本身的选项。,需要的朋友可以参考一下
    2021-11-11
  • vue项目中自定义video视频控制条的实现代码

    vue项目中自定义video视频控制条的实现代码

    这篇文章主要介绍了vue项目中自定义video视频控制条的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04

最新评论