一、问题

vscode的默认的代码格式化ctrl+shift+f 无法通过eslint的代码风格检查是一个非常蛋疼的问题

同样在进行vue项目开发的时候,使用eslint代码风格检查是没啥问题的,但是eslint自动格式化是我想去搞出来的。

在保存的时候,能够使得vscode代码自动格式化成eslint风格的代码,并且支持在html和vue中的代码

二、解决

1、安装 eslint 插件

2、打开用户配置

在用户设置中填写如下配置:

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

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

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

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

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

  1. vscode 代码保存时自动格式化成 ESLint 风格

    vscode 的默认的代码格式化 alt+shift+f (windows) 无法通过 eslint 的代码风格检查,,, 比如: 4个空格和2个空格(ESLint) 字符串用单引号(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. hdu 6071 Lazy Running 最短路建模

    Lazy Running Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/Others) P ...

  2. MAC office2016 安装及激活

    Office 下载地址: http://www.xitongtiandi.net/soft_yy/4285.html 破解补丁下载地址: https://bbs.feng.com/tencentdow ...

  3. [原][粒子特效][spark]发射器emitter

    深入浅出spark粒子特效连接:https://www.cnblogs.com/lyggqm/p/9956344.html group添加emitter的方式: eimtter: 上图是spark源码 ...

  4. Rancher中的服务升级实验

    个容器副本,使用nginx:1.13.0镜像.假设使用一段时期以后,nginx的版本升级到1.13.1了,如何将该服务的镜像版本升级到新的版本?实验步骤及截图如下: 步骤截图: 个容器,选择镜像ngi ...

  5. Spring 的@@Autowired 和 @Qualifier注释

    @Autowired spring2.1中允许用户通过@Autowired注解对Bean的属性变量.属性Setter方法以及构造方法进行标注,配合AutowiredAnnotationBeanProc ...

  6. git批量删除文件和批量提交

    1. 单个删除文件: ① 通常直接在文件管理器中把没用的文件删了,或者用rm命令删了:(可选操作,可直接执行②删除) $ rm test.txt ② 确实要从版本库中删除该文件,那就用命令git rm ...

  7. 优雅地记录Python程序日志1:logging模块简介

    本文摘自:https://zhuanlan.zhihu.com/p/31893724 本篇涉及: logging模块的调用: 保存log日志为文件: 调整输入日志等级: 修改日志消息格式: 前言 在使 ...

  8. 动态规划-最大的正方形面积 Maximal Square

    2018-09-13 19:19:44 问题描述: 问题求解: 方法一: 使用动态规划来求解,算法时间复杂度O(n^2). dp[i][j] : 以(i, j)为右下角的面积最大的正方形的边长. 初始 ...

  9. learn python the hard way 习题1~5总结

    习题1 print 语句print('Yay! Printing.')print('I "said" do not touch this') 习题2:注释和 # 号 #(octot ...

  10. 雷林鹏分享:现实生活中的 XML

    现实生活中的 XML 如何使用 XML 来交换信息的一些实例. 实例:XML 新闻 XMLNews 是用于交换新闻和其他信息的规范. 对新闻的供求双方来说,通过使用这种标准,可以使各种类型的新闻信息通 ...