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. 关于矢量图片资源向后兼容:CompatVectorFromResourcesEnabled标志的使用

    StackOverflow上摘抄的: some things have changed since I asked this question so I will answer it myself.W ...

  2. 【C#】【MySQL】C# 查询数据库语句@Row:=@Row+1以及执行存储过程失败解决方案

    如何实现数据库查询产生虚拟的一列序号的功能: ) )AS r; 该语句可以实现产生虚拟的一列数据在MySQL中运行没有问题. 但是在C#里面调用去出现了错误"Parameter '@ROW' ...

  3. 第二百九十六节,python操作redis缓存-Hash哈希类型,可以理解为字典类型

    第二百九十六节,python操作redis缓存-Hash哈希类型,可以理解为字典类型 Hash操作,redis中Hash在内存中的存储格式如下图: hset(name, key, value)name ...

  4. php -- 取日期

    1.获取当前时间方法date()很简单,这就是获取时间的方法, 格式为:date($format, $timestamp), format为格式 - 必需 timestamp为时间戳–可填参数. 比如 ...

  5. 【Java面试题】50 垃圾回收器的基本原理是什么?垃圾回收器可以马上回收内存吗?有什么办法主动通知虚拟机进行垃圾回收?

    1.对于GC来说,当程序员创建对象时,GC就开始监控这个对象的地址.大小以及使用情况. 通常,GC采用有向图的方式记录和管理堆(heap)中的所有对象.通过这种方式确定哪些对象是"可达的&q ...

  6. 【Java面试题】36 List、Map、Set三个接口,存取元素时,各有什么特点?

    List与Set都是单列元素的集合,它们有一个功共同的父接口Collection. Set里面不允许有重复的元素, 存元素:add方法有一个boolean的返回值,当集合中没有某个元素,此时add方法 ...

  7. 【C++基础 05】友元函数和友元类

    友元是一种定义在类外部的普通函数或类,但它须要在类体内进行说明,为了与该类的成员函数加以差别,在说明时前面加以keywordfriend. 友元不是成员函数,可是它能够訪问类中的私有成员. 友元的作用 ...

  8. 笔记:写Java程序,并输出

    建一个文件名为 demo.java的文件 //写框架文件 public class Demo{ //写入口文件 public static void main(String[] args){ Syst ...

  9. mongoDB的shell数组操作器

    http://www.2cto.com/database/201304/205024.html mongoDB数组操作器   $push会向数组末尾加入一个元素,如果数组不存在,则会创建这个数组. 增 ...

  10. ios开发之--ios11适配:TableView的heightForHeaderInSection设置高度无效/UISearchBar消失

    更新到ios11,然后使用x-code9运行项目,发现tableview的-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInS ...