本文重点:

1.解决修改了Prettier默认配置,项目内格式化无法生效

2.解决Prettier缺少配置,函数名括号之间,自动添加空格

3.settings.json配置项分享

一个程序员,可能非常精通写代码,但是平时很少接触的配置项,会让他更加焦头烂额,复制这些配置项,减少不比必要的痛苦,留更多的精力在代码开发上,附心脏骤停和复苏对比图。

1.修改Prettier默认配置,格式化无法生效

问题描述:

在VUE项目根目录,不创建".prettierrc.js"文件的前提下,只通过插件——扩展设置,或settings.json进行配置后,刚刚修改的配置,格式化效果未生效

感谢本小结思路来源:云帆Plan

解决方法:

1.1由于prettier插件优先使用项目根目录下的editorconfig配置文件,所以在vscode中怎么配置有没有用

1.2进入perttier插件扩展配置

1.3取消Use Editor Config的复选框,这样就不会优先使用editorconfig配置文件了

2.Prettier缺少配置,函数名和后面的括号之间加个空格

问题描述:

ESlint的默认standard 规则要求函数名和括号之间有一个空格,这就是space-before-function-paren 规则(ESLint 本身也会默认开启这个规则)。 但是 prettier 完全没有这个规则!prettier 不会处理这个空格的问题,所以根据 ESLint 配置修改 prettier 规则不可行

感谢本小结思路来源:雪见仙尊

解决方法:

2.1安装 prettier-eslint插件

2.2进入vscode设置

2.3选择用户或者工作区,点击图形按钮,打开settings.json文件

2.4修改配置,有就修改,没有就手动添加

3.settings.json配置项分享

进入vscode设置,点一下“工作区”,再点那个图形按钮,打开settings.json文件,全部添加上去即可,有重复的手动修改一下,如果嫌麻烦的话,就全选粘贴,覆盖上去

{
// 选择vue文件的格式化工具
"[vue]": {
// 1.使用prettier,无法配置函数名后的空格
// "editor.defaultFormatter": "esbenp.prettier-vscode"
// 2.使用prettier-eslint
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// 自动修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.enable": true, //是否开启vscode的eslint
// 配置 ESLint 检查的文件类型
"eslint.validate": ["javascript", "vue", "html"],
"eslint.options": {
//指定vscode的eslint所处理的文件的后缀
"extensions": [".js", ".vue", ".ts", ".tsx"]
},
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用单引号替代双引号
"prettier.singleQuote": true,
"prettier.trailingComma": "none",
"prettier.bracketSpacing": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "prettier-eslint",
"git.enableSmartCommit": true,
"editor.quickSuggestions": {
"strings": true
},
//一定要在vutur.defaultFormatterOptions参数中设置,单独修改prettier扩展的设置是无法解决这个问题的,因为perttier默认忽略了vue文件(事实上从忽略列表移除vue也不能解决这个问题)
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false, // 格式化不加分号
"singleQuote": true // 格式化以单引号为主
},
"js-beautify-html": {
// force-aligned | force-expand-multiline
"wrap_attributes": "force-aligned"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": true
}
},
// 关于@src目录路径提示的配置
// 安装vscode插件 `Path Intellisense`
"path-intellisense.mappings": {
"@": "${workspaceRoot}/src"
}
}

🔥完美解决ESlint+Prettier各项配置冲突的语法报错问题(新手向)的更多相关文章

  1. 解决Vite-React项目中js使用jsx语法报错的问题

    背景 在做存量项目接入Vite测试时发现,存量(老)项目中很多是直接在js中书写jsx语法,使用Vite启动时就会抛出一堆问题Failed to parse source. 不嫌麻烦可以跑个脚本批量修 ...

  2. ESLint语法报错问题

    编写javaScript过程中ESLint语法报错问题 ESLint语法要求: 双引号""需要替换成单引号'' 分号不允许出现 ()之前需要一个空格比如 login () (VSC ...

  3. 两个由于php.ini配置错误导致的报错:ajax图片上传报错和exec报错

    遇到了两个由于php.ini配置错误导致的报错:ajax图片上传报错和exec报错 首先第一个: 在做一个用ajax图片上传的功能中,php报了这样一个错误:File upload error - u ...

  4. 01-路由跳转 安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题

    2==解决vue2.0里面控制台包的一些语法错误. https://www.jianshu.com/p/5e0a1541418b 在build==>webpack.base.conf.j下注释掉 ...

  5. 如何解决spring boot 项目导入依赖后代码报错问题

    如何解决spring boot 项目导入依赖后代码报错问题 2020-08-15  14:17:18 代码截图如图所示(由于本人问题已经解决,没来得及截图,所以在网上找了一张图片)

  6. Winform下CefSharp的引用、配置、实例与报错排除(源码)

    Winform下CefSharp的引用.配置.实例与报错排除 本文详细介绍了CefSharp在vs2013..net4.0环境下,创建Winfrom项目.引用CefSharp的方法,演示了winfro ...

  7. 解决Windows下运行php Composer出现SSL报错的问题

    解决Windows下运行php Composer出现SSL报错的问题 2015-01-14 20:05   在windows下运行composer却出现SSL报错: E:\www>php -f  ...

  8. Eclipse配置tomcat8.5.7报错:The Apache Tomcat installation at this directory is version 8.5.27. A Tomcat 8.0 installation is...

    Eclipse配置tomcat8.5.7报错:The Apache Tomcat installation at this directory is version 8.5.27. A Tomcat ...

  9. 解决Homestead yarn , npm run dev, 命令报错问题!

    解决Homestead yarn , npm run dev, 命令报错问题! 2018年06月01日 11:50:51 偶尔发发颠 阅读数:1654    版权声明:本文为博主原创,未经博主同意,不 ...

随机推荐

  1. learn git(本地仓库)

    #本地 在Windows上安装Git 在Windows上使用Git,可以从Git官网直接https://git-scm.com/downloads下载,然后按默认选项安装即可. 装完成后,在开始菜单里 ...

  2. Centos6.8阿里云linux系统下配置LAMP运行环境-mysql5.6

    1.Apache #安装apache软件 yum -y install httpd #启动httpd服务 service httpd start #设置开机启动chkconfig --list htt ...

  3. hadoop报错

    19/11/24 08:29:08 INFO qlh.MyMapreduce: ================this is job================= 19/11/24 08:29: ...

  4. 一文让你掌握软件测试工程师SQL面试题

    数据结构说明 已知有如下4张表: 学生表:student(学号,学生姓名,出生年月,性别) 成绩表:score(学号,课程号,成绩) 课程表:course(课程号,课程名称,教师号) 教师表:teac ...

  5. 『GoLang』数组与切片

    数组 数组是具有相同唯一类型的一组已编号且长度固定的数据项序列(这是一种同构的数据结构):这种类型可以是任意的原始类型例如整型.字符串或者自定义类型. 数组长度必须是一个常量表达式,并且必须是一个非负 ...

  6. P6378-[PA2010]Riddle【2-SAT】

    正题 题目链接:https://www.luogu.com.cn/problem/P6378 题目大意 给出\(n\)个点\(m\)条边的一张无向图,图中有\(k\)种颜色的点. 要求每种颜色选择一个 ...

  7. Stream聚合函数

    Stream班介绍 幼稚园开学的第一天,各们家长把小朋友送到了园里,各位小朋友都你看看我,我看看你.有的嚎啕大哭,有的呆若木鸡....这里时候园长安排我拿来小本本记录入园的小朋友.... 记录小朋友 ...

  8. java SE(未完结)

    数据类型与运算符 数据类型 基础数据类型 数值型 正整型 byte short int long 结尾加(l/L) 浮点型 float 结尾加(f/F) double 字符型 char 只能存储一个字 ...

  9. Python标准库模块之heapq – 堆构造

    Python标准库模块之heapq – 堆构造 读前福利:几百本经典书籍https://www.johngo689.com/2158/ 原文链接:https://www.johngo689.com/2 ...

  10. Go语言核心36讲(Go语言基础知识三)--学习笔记

    03 | 库源码文件 在我的定义中,库源码文件是不能被直接运行的源码文件,它仅用于存放程序实体,这些程序实体可以被其他代码使用(只要遵从 Go 语言规范的话). 这里的"其他代码" ...