项目中配置了eslint后,在使用vue界面里格式化的时候总是不一致。然后在配置中加了配置也无效(File - Preference - Setting)

查了下原因是在vue开发的时候我们一般都安装了Vetur的插件来对.vue格式的文件进行处理,Vetur自带了格式化,规范就是使用prettier

这时候装prettier插件,并且在设置或setting.json里配置了prettier的话是无效的

解决方法:在setting.json中加入下面的配置就可以了

{
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false,
"singleQuote": true
},
"wrap_attributes": "force-aligned"
},
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.html": "js-beautify-html"
}

但是这个时候会发现vue文件是可以了,可以js文件还是无效,找到以下方法解决之:

1、安装prettier插件

npm install --save-dev  prettier

2、在根目录新增 .prettierrc.json文件,配置如下:

{
"singleQuote":true,//使用单引号而不是双引号,true就是对
"semi":false//在语句结尾处打印分号,false就是不打印
}

亲测有效,直接Shift + Alt +F就可以美滋滋的格式化代码不会加上冒号和分号啦~

vscode 格式化代码 与 eslint 有冲突的问题解决的更多相关文章

  1. vue项目中vscode格式化配置和eslint配置冲突

    问题描述 使用vscode开发vue项目的时候,从远端拉下一个新的项目后,安装完依赖后跑起项目时,发现直接报了一堆语法错误:包括换行.空格.单双引号.分号等各种格式问题 因为我的 vscode 安装使 ...

  2. vscode格式化代码插件Beautify

    vscode格式化代码安装 VsCode 格式化代码插件搜索并安装 Beautify 格式化代码插件使用:打开要格式化的文件 —> F1 —> Beautify file —> 选择 ...

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

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

  4. vscode格式化代码无效--可能的解决方法

    因为vscode默认启用了根据文件类型自动设置tabsize的选项,因此,可以通过关闭自动设置选项,防止格式覆盖.在用户设置里添加如下配置即可: "editor.detectIndentat ...

  5. vscode如何配置ts的lint,如何配置才能让eslint和prettier不冲突一键格式化代码(vue开发使用)

    最近在使用ts,发觉tslint在vscode上使用很不方便,不如eslint一键格式化高效,就想着能不能配置下vscode让其像写js一样爽 这篇文章主要解决2个问题,第一个是如何让vscode使用 ...

  6. vscode保存代码,自动按照eslint规范格式化代码设置

    # vscode保存代码,自动按照eslint规范格式化代码设置 编辑器代码风格一致,是前端代码规范的一部分.同一个项目,或者同一个小组,保持代码风格一致很必要.就拿vue项目来说,之前做的几个项目, ...

  7. vsCode 设置vue 保存自动格式化代码

    setting { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tab ...

  8. VScode格式化ESlint

    打开 文件-首选项- 设置 mac可以按快捷键(command和,) 然后在右上角的省略号选择open setting json { // vscode默认启用了根据文件类型自动设置tabsize的选 ...

  9. 03.ElementUI源码学习:代码风格检查和格式化配置(ESlint & Prettier)

    书接上文.在团队协作中,为避免低级Bug.以及团队协作时不同代码风格对彼此造成的困扰与影响,会预先制定编码规范.使用 Lint工具和代码风格检测工具,则可以辅助编码规范执行,格式化代码,使样式与规则保 ...

随机推荐

  1. 线程中put(None)和主函数中put(None)的区别和用法

    ''' 初试生产者消费者模型代码 分析: 对象含有生产者.队列.消费者 Queue队列模块,不适合传大文件,通常传一些消息. ''' '''多生产者进程和多消费者进程''' #导入模块 from mu ...

  2. scrapy框架(二)

    scrapy框架(二) 一.scrapy 选择器 概述: Scrapy提供基于lxml库的解析机制,它们被称为选择器. 因为,它们“选择”由XPath或CSS表达式指定的HTML文档的某部分. Sca ...

  3. abp模块生命周期设计思路剖析

    abp中将生命周期事件抽象为4个接口: //预初始化 public interface IOnPreApplicationInitialization { void OnPreApplicationI ...

  4. monkey测试跑多个apk|monkey命令

    1.如何跑多个apk的monkey? 黑名单:执行除了黑名单中以外的apk: 白名单:只执行在白名单中的apk. 黑名单的设置方法: a.创建一个名称为blacklist的txt文档,在文件中输入应用 ...

  5. CentOS 7上的进程管理

    一些杂乱的基础概念 程序是一种静态的文件,躺在磁盘上.而进程则是将程序运行起来放置于内存中.因此进程就是运行中的程序,是程序运行起来的一个实例.同一个程序可以运行为多个进程/实例. 进程之间有父子关系 ...

  6. Appium(七):Appium API(一) 应用操作

    1. 应用操作 本章所罗列的方法主要针对应用的操作,如应用的安装.卸载.关闭.启动等. 把前面的启动代码放在这里,后面只展示不同的部分. # coding:utf-8 from appium impo ...

  7. latex 对中文字体设置的一些解决

    latex 对中文字体设置的一些解决 直接使用Xelatex编译带中文的文件时,会出现无法识别的错误,这是因为latex默认的环境不支持中文,这时可以使用CTex 宏集.ctex 宏包或xeCJK 宏 ...

  8. Vscode LeetCode 教程

    1: 题目选区 商店安装LeetCode 以后, 选择地球确认选区 2: 选择题目 选择Code Now 进行编码 默认路径为$HOME/.leetcode/ 你可以通过更新配置项 leetcode. ...

  9. Skulpt在线模拟运行Python工具

    1. Skulpt是一个完全依靠浏览器端模拟实现Python运行的工具 2. 不需要预处理.插件或服务器端支持,只需编写python并重新载入即可. 3. 由于代码完全是在浏览器中运行的,所以不必担心 ...

  10. 在 Python 3.x 版本后,ConfigParser.py 已经更名为 configparser.py 所以出错!

    在 Python 3.x 版本后,ConfigParser.py 已经更名为 configparser.py 所以出错!