vscode 的默认的代码格式化 alt+shift+f (windows) 无法通过 eslint 的代码风格检查,,,

比如:

  • 4个空格和2个空格(ESLint)
  • 字符串用单引号(ESLint)

这样在进行vue项目开发的时候,使用 eslint 代码风格检查就会报错:

所以需要在保存的时候,使 vscode 代码自动格式化成 eslint 风格的代码,并且支持在 html 和 vue 中的代码;

首先装下 ESlint 插件

然后配置项:文件 -> 首选项 -> 设置,加上下面设置:

  "eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
]

eslint.autoFixOnSave 用来进行保存时自动格式化,但是默认只支持 javascript .js 文件

eslint.validate 用来配置作用的文件类型。

  • eslint插件的配置说明中,直接写的是"eslint.validate": [ "javascript", "javascriptreact", "html" ],因此我想当然一开始写的是"eslint.validate": [ "javascript", "javascriptreact", "html", "vue" ],结果是不起作用的,必须要写成上面那样;
  • autoFixOnSave 对于 .vue 文件,自动保存时(我是失焦保存)不会 autoFix ,必须要手动保存 ctrl+s 才会 autoFix;对于 .js 文件,我失焦保存后,会 autoFix;不过对于一些无法 autoFix 的,是不会 autoFix 的(譬如:多余的分号会去掉,4个空格变2个,但是语法错误还是会放那边);

参考文档:

http://www.ptbird.cn/vscode-autosave-eslint-support-vue.html

vscode 代码保存时自动格式化成 ESLint 风格的更多相关文章

  1. vscode代码保存时自动格式化成ESLint风格(支持VUE)

    一.问题 vscode的默认的代码格式化ctrl+shift+f 无法通过eslint的代码风格检查是一个非常蛋疼的问题 同样在进行vue项目开发的时候,使用eslint代码风格检查是没啥问题的,但是 ...

  2. VScode 格式化代码保存时使用ESlint修复代码

    前言 eslint  vs code 新买的电脑啊啊西 装VScode 配置格式化代码保存时使用ESlint修复代码头快炸了,不建议初学者用,太费时间了: 终于搞定---再也不要担心缩进,函数(名)和 ...

  3. vscode代码格式化快捷键及保存时自动格式化

    一.实现vs code中代码格式化快捷键:[Shift]+[Alt]+ F 二.实现保存时自动代码格式化: 1)文件 ------.>[首选项]---------->[设置]: 2)搜索  ...

  4. 设置Myeclipse中的代码格式化、注释模板及保存时自动格式化

    1:设置注释的模板: 下载此模板:  codetemplates.xml 搜索Dangzhang,将其改为你自己的姓名,保存 打开eclipse/myeclipse选择 window-->Pre ...

  5. Myeclipse学习总结(3)——Myeclipse中的代码格式化、注释模板及保存时自动格式化

    设置Myeclipse中的代码格式化.注释模板及保存时自动格式化 1:设置注释的模板: 下载此模板:  codetemplates.xml This XML file does not appear ...

  6. Intellij IDEA 代码格式化/保存时自动格式化

    这里介绍使用google style 一.安装插件 1.settings -> plugins 选择 Browse repositories… 2.搜索google-java-format 和 ...

  7. 关于visocode 自动保存时自动添加分号问题

    先下载插件:  Vueter 打开设置的配置文件,写入一下代码: // //是否需要保存时自动格式化 "editor.formatOnSave": true, //使js 文件保存 ...

  8. vscode 使用ESLint 自动检查,保存时自动格式化

    1:全局安装eslint `npm install -g eslint`2: 打开vscode 点击 “文件”----->“首选项”---->“设置”,在右侧“用户设置/settings. ...

  9. Eclipse设置保存时自动格式化代码

    在使用eclipse时,经常需要使用到Ctrl+Shift+F来格式化代码,可以打开保存时格式化,会更方便. 打开方式:Window-->Preferences-->Java --> ...

随机推荐

  1. Python 字符串切片

    #-*- coding:utf-8 -*- #字符串切片 names = "abcdefgh" ''' 切片语法 names[起始位置:终止位置:步长] 起始位置:即字符串的下标, ...

  2. relation 关联模型

    关联关系必然有一个参照表,例如:有一个员工档案管理系统项目,这个项目要包括下面的一些数据表:基本信息表.员工档案表.部门表.项目组表.银行卡表(用来记录员工的银行卡资料).这些数据表之间存在一定的关联 ...

  3. Struts2学习笔记(OGNL表达式)

    Struts 2支持以下几种表达式语言: OGNL(Object-Graph Navigation Language),可以方便地操作对象属性的开源表达式语言: JSTL(JSP Standard T ...

  4. Hibernate Query Language查询:

    Hibernate Query Language查询: Criteria查询对查询条件进行了面向对象封装,符合编程人员的思维方式,不过HQL(Hibernate Query Language)查询提供 ...

  5. LINUX下CPU Load Average的一点研究

    背景: 公司的某个系统工作在基于Linux的Cent OS下,一个host下同时连接了许多client, 最近某台Host总是显示CPU Load Average过高,我们单纯的以为是CPU的占用过高 ...

  6. 后序线索二叉树中查找结点*p的后继

    在后序线索二叉树中查找结点*p的后继: 1.若结点*p为根,则无后继:2.若结点*p为其双亲的右孩子,则其后继为其双亲:3.若结点*p为其双亲的左孩子,且双亲无右子女,则其后继为其双亲:4.若结点*p ...

  7. JavaSE集合(八)之Map

    前面给大家介绍了集合家族中的Collection家族,这一篇给大家分享的是集合中的另一个家族就是Map家族.以前的时候学习Map的时候没有很认真的去学习,我觉得很多东西还是不是很清楚. 这次我将总结的 ...

  8. kafka学习之-文件存储机制

    Kafka是什么 Kafka是最初由Linkedin公司开发,是一个分布式.分区的.多副本的.多订阅者,基于zookeeper协调的分布式日志系统(也可以当做MQ系统),常见可以用于web/nginx ...

  9. 调用外部 DLL 中的函数(2. 晚绑定)

    , b, t, );end; procedure TForm1.FormDestroy(Sender: TObject);begin  FreeLibrary(inst);  {记得释放}end; e ...

  10. 感恩节MathType公式编辑器6折优惠启动

    MathType是由美国Design Science公司开发功能强大的公式编辑器,专门用来对数学公式的编辑,与常见的文字处理软件和演示程序配合使用,能够在各种文档中加入复杂的数学公式和符号.感恩节期间 ...