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. CentOS 7 Minimal编译安装MySQL5.6

    写在前面,编译安装MySQL的优势:平台无关.可设定参数按需安装.安装的MySQL目录独立(方便清楚).更好的平台耦合及运行性能(很多运维的观点):缺点:编译安装较慢. 一.撤换系统防火墙 注:Cen ...

  2. Linux新手要了解的十个知识点

    Linux对于有的新手来说,感觉无从下手,或者不知道从哪儿学起?怎么学?针对这些问题,我给大家说说新手学习Linux需要了解的十个知识点. 注意大小写 Linux是大小写敏感的系统,举个例子,Mozi ...

  3. (记录)eclipse常用设置步骤

    代码风格文件导入: https://blog.csdn.net/wangming520liwei/article/details/53911736 注释中的author修改: https://jing ...

  4. java基础——Collections.sort的两种用法

    Collections是一个工具类,sort是其中的静态方法,是用来对List类型进行排序的,它有两种参数形式: public static <T extends Comparable<? ...

  5. js 使用事件委托

    想象一下,如果你有一个无序列表,里面有一堆<li>元素,每一个<li>元素都会在点击的时候触发一个行为.这个时候,你通常会在每一个元素上添加一个事件监听,但是如果当这个元素或者 ...

  6. 【python】\\u的字符编码问题

    Str = "\\u559c\\u6b22\\u4e00\\u4e2a\\u4eba";Str = Str.decode("unicode-escape")

  7. Ubuntu 使用文件 casper-rw 镜像文件 保存变更内容

    yumi工具本可以制作基于u盘的persistent启动盘 casper-rw是ubuntu特有的一种功能,支持liveCD启动的ubuntu系统保存用户的变更内容 那我们想同iso光盘从硬盘上启动, ...

  8. linux用户及用户组操作

    Linux用户.用户组权限管理详解 Linux用户管理三个重要文件详解: Linux登陆需要用户名.密码./etc/passwd 文件保存用户名.登录Linux时,Linux 先查找 /etc/pas ...

  9. Nginx伪静态配置和常用Rewrite伪静态规则集锦

    伪静态是一种可以把文件后缀改成任何可能的一种方法,如果我想把php文件伪静态成html文件,这种相当简单的,下面我来介绍nginx 伪静态配置方法 nginx里使用伪静态是直接在nginx.conf ...

  10. CentOS5.5环境下布署LVS+keepalived

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://kerry.blog.51cto.com/172631/401253 #!/bin ...