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. Android代码的几点小技巧

     1)View的状态保存与恢复dispatchRestoreInstanceStateonRestoreInstanceStateonSaveInstanceState 2)Service的前台服务使 ...

  2. sixxpack破解的文章!【转】

    星期天闲着没事玩游戏,玩游戏不能无外挂.于是百度了半天,找到了一个,看介绍貌似不错,就下载了下来.一看,竟然是用.net写的,下意识地Reflector了一下.发现竟是一个叫actmp的程序集.如图: ...

  3. OpenGL模板缓冲区与模板测试

    原文地址:http://www.blogjava.net/qileilove/archive/2014/01/23/409269.html 帧缓冲区有许多缓冲区构成,这些缓冲区大致分为: 颜色缓冲区: ...

  4. Spring-注入外部值

    Spring注入需要初始化,但前面均使用硬编码注入,如: JavaConfig配置: package soundSystem; import org.springframework.stereotyp ...

  5. 演示--Jquery核心选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 设置div滚动条

    这个是很常见的一个任务了,基本是通过CSS去实现滚动条. 滚动条 设置是否显示滚动条主要是在CSS中设置下列的属性: 代码如下: overflow:visible|auto|hidden|scroll ...

  7. TTreeView TTreeNodes TTreeNode

    TTreeView 填写 TTreeView 的内容一般是这样开始的(下图), 不过我觉得最好习惯用动态建立. 打个比方: 譬如 TreeView 是一个军营的"营部"! 这里会有 ...

  8. Python学习笔记(二)——高级特性

    知识点 切片 切片 取一个list或tuple的部分元素. 原理:调用__getitem__,__setitem__,__delitem__和slice函数. 根据官方的帮助文档(https://do ...

  9. java 正则表达式验证

    package com.fsti.icop.util.regexp; import java.util.regex.Matcher; import java.util.regex.Pattern; p ...

  10. wm_concat函数 用法

    首先让我们来看看这个神奇的函数wm_concat(列名),该函数可以把列值以","号分隔起来,并显示成一行,接下来上例子,看看这个神奇的函数如何应用 准备测试数据 SQL>  ...