vscode eslint vue 保存自动修复

news/2024/7/9 23:41:52 标签: vscode, eslint, vue, 保存自动修复

问题

接受一个vue项目,download下代码后愉快地写了个界面。然后跑起来,eslint抛了一堆书写不规范的错误,主要有2个

  • Expected " " character, but found "\t" character
  •  Strings must use singlequote

对应的校验规则是

  • quotes

  • no-mixed-spaces-and-tabs

一大堆警告输出在调试控制台,非常影响开发体验,我想禁用这两个规则,因为就我自己在弄这个项目,我想按自己的代码风格来。但遗憾的是,按照官网文档的配置,我没有成功地禁用掉这两个规则。研究了大半天,未果。

  • "no-mixed-spaces-and-tabs": "off",

  • "quotes":"off"

解决问题

在同事的工作环境上跑我的代码并没有抛出书写不规范的警告,并且IDE能够自动地修复这些不规范。于是,我意识到可以从开发环境上着手,不能用自己的风格,IDE能自动修复也可以接受。

对比了同事和我的环境的差异,我这边需要2个插件,不装Vetur插件的话格式化vue文件时会提示“没有找到格式化插件”。

  • ESLint
  • Vetur

接下来又遇到了一个麻烦,我的插件装完了,在Visual Studio Code V1.37.1版本的首选项设置页面(文件——首选项——设置)进行相关的插件设置之后,IDE在保存文件时却不能够自动地修复不规范代码。

最后解决办法是,在首选项设置页面(文件——首选项——设置)找到在settings.json中编辑,把同事的相关配置粘贴进去,覆盖掉相关设置。

配置如下

//通过界面能够修改的配置
"eslint.run": "onSave",
"eslint.autoFixOnSave": true,

//eslint.validate只能在settings.json中手动添加
//这段没有就会导致无法保存时自动修复不规范代码
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    {
        "language": "vue",
        "autoFix": true
    }
],
"eslint.run": "onSave",
"eslint.autoFixOnSave": true,


解决之后发现蛋疼的地方是,新版本的Visual Studio Code的首选项设置界面不再像以前一样左侧UI,右侧显示对应的settings.json布局,这就导致了有些配置项在UI上找不到(找的我好苦啊)。


http://www.niftyadmin.cn/n/1621551.html

相关文章

有关ORA-03135报错分析解决

近期发现生产环境一业务应用系统,不定时发生数据库连接断开,再次请求后正常连接问题。系统日志中具体错误信息如下:ORA-03135: 连接失去联系\n进程 ID: 9349\n会话 ID: 2834 序列号: 64475"。oracle版本:11.2.0.4日志信息&am…

UglifyJs 压缩 报错 Unexpected token name «i», expected punc «;»

场景 webpack中使用UglifyJs打包项目时,抛出了这个异常,导致无法打包成功。奈何失败的错误提示信息只有寥寥数语,根本无法定位到问题代码的位置 ERROR in build.js from UglifyJs Unexpected token operator , expected punc , [./node_mod…

手机2020 QQ 群文件下载存储路径

/手机存粗/Android/com.tencent.mobileqq/Tencent/QQfile_recv

【转】使用索引为什么能提高查询速度?

为什么能够提高查询速度? 索引就是通过事先排好序,从而在查找时可以应用二分查找等高效率的算法。 一般的顺序查找,复杂度为O(n),而二分查找复杂度为O(log2n)。当n很大时,二者的效率相差及其悬殊。 举个例子&#xff1…

使用LocalStorage实现Form表单内容本地存储

判断浏览器是否支持localStorage,并将值存入,推荐setItem方法。1 if(!window.localStorage) {2 console.log("浏览器不支持localstorage");3 return false;4 }else{5 var storagewindow.localStorage;6 // 查询条件localStorage本…

DevExpress的安装方法与破解教程【转】

DevExpress是一个界面控件套件,提供了一系列的界面控件套件的DotNet界面控件。DevExpress开发的控件有很强的实力,不仅功能丰富,应用简单,而且界面华丽,更可方便订制,对于编程人员来说是个不错的选择。下面…

历史的思考

2019独角兽企业重金招聘Python工程师标准>>> 从鸦片战争到丧权辱国,从国家大乱到洋务运动中模仿的苦苦挣扎, 从甲午的一场空到自我迷失的民国,从一穷二白的站起到偏激的革命运动。 哪里不是低头,失望。但你能停止努力吗…

Thrift IDL

Thrift类型 Thrift类型系统旨在允许程序员尽可能使用本机类型,无论使用何种编程语言。此信息基于并取代Thrift白皮书中的信息。Thrift IDL为每一种目标语言提供了用于生成代码的类型描述。 基本类型 基本类型是侧重于所有编程语言可用的关键类型: bool:一…