eslint基础配置说明并解决prettier冲突

Vue CLI项目中ESLint与prettier冲突解决方案

最新推荐文章于 2025-10-23 16:55:10 发布

原创最新推荐文章于 2025-10-23 16:55:10 发布 · 548 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了如何在使用Vue CLI创建项目时启用ESLint和Standardconfig，并重点讲解了如何解决ESLint与prettier在'space-before-function-paren'规则上的冲突，通过在.eslintrc.js中禁用该冲突规则。

1.在使用vue-cli 生成项目使勾选 ESLint+Standard config 在这里插入图片描述
2.默认在项目根目录生成 .eslintrc.js 文件

3…eslintrc.js基本配置说明如下
在这里插入图片描述
4.解决 eslint和prettier space-before-function-paren冲突
在.eslintrc.js 里的rules 新增规则

 'space-before-function-paren': 'off'

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

幻雪暗影

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue项目中解决eslint与prettier同时使用时校验冲突问题

cabinx的博客

04-14

5456

vue项目中解决eslint与prettier同时使用时校验冲突问题 1.需求背景最近在项目已有的代码校验校验工具eslint基础上加入了prettier，其原因也是为了约束开发团队代码风格统一，初衷是好的，但是在实际使用过程中就出现了两个代码校验工具校验冲突问题。解决方案其实冲突的根源在于两者对于校验代码格式都有参与，但是两者的校验规则又不一定相同，这就是冲突的根源。解决的思想就是让eslint专注于代码质量问题的校验，其他的代码风格问题就让prettier来处理就能够解决冲突，具体处

eslint9+prettier+commitlint+husky+lint-staged 配置实践

qelen的博客

11-26

1647

前端工程化eslint9最新配置

参与评论您还未登录，请先登录后发表或查看评论

vue的eslint和快捷键格式化的冲突、以及space-before-function-paren规则的解决方法

m0_60336681的博客

08-06

1057

问题分析：格式化代码，会增加分号和双引号，而eslint不允许。并且eslint要求，在函数方法括号前要有空格。解决方法： 1、在项目根目录下创建.prettierrc文件,写上相关配置即可 { "semi": false, "singleQuote": true } 第一行表示在语句末尾，不加分号第二行表示，使用单引号这时使用快捷键格式化代码，发现双引号变成了单引号，分号也不见了。 2、对于eslint提示在函数方法括号前要加空格的规则的处理方法问题分析：eslint要求在

关于prettier 配置的一些问题

weixin_51662487的博客

03-07

657

关于prettier 配置的一些问题

ESLint 配置文件 (.eslintrc.js) 完整指南

最新发布

weixin_42713787的博客

10-23

354

ESLint 是 JavaScript 和 TypeScript 的静态代码分析工具，用于识别和报告代码中的问题。以下是配置文件的完整指南。

如何禁用Eslint以及在配置了.prettierrc文件后仍出现“space-before-function-paren”错误？

qq_42556623的博客

08-31

1780

解决办法：创建与src同层级的配置文件vue.config.js* 代码如下 module.exports = { lintOnSave:false,//这里禁止使用eslint-loader }

vue格式报错--space-before-function-paren

qq_43799531的博客

06-26

460

错误描述：由于vue中格式规则不允许方法名与括号中间有空格，但是保存时，设置好的prettier，会删掉空格，造成错误。，修改.eslintrc.js文件。1.右键错误，得到错误的名称。

Vue编译时出现 “space-before-function-paren“: 报错

qq_45104931的博客

03-29

4872

问题：Vue编译时出现 "space-before-function-paren": 报错意思是在方法名和括号之间需要有一格空格。解决方法：在vue项目根目录文件下的.eslintrc.js文件中的rules节点中添加"space-before-function-paren":0 即可。 ...

Vue 3与ESLint、Prettier：构建规范化的前端开发环境

https://blog.cmdragon.cn/

06-11

1561

这篇文章介绍了如何在Vue 3项目中配置ESLint和Prettier以统一代码风格，实现代码规范性与可读性的提升。通过设置规则、解决冲突、以及将配置融入持续集成流程和代码审查过程，确保团队协作时代码风格的一致性，提升开发效率与项目维护性。

React Native代码规范：ESLint+Prettier统一团队风格

移动开发前沿的博客

06-22

1082

想象一下：你们团队8个人一起写一本小说，有人用「。」结尾，有人用「。」+空格，有人喜欢大段长句，有人爱用倒装句——读者读起来是不是像坐过山车？代码同理：不同人写的组件可能缩进是2空格/4空格混用，变量名有的用驼峰（userName）有的用下划线（user_name），甚至同一个逻辑有人用if-else有人用三元表达式……这些「风格差异」会让后续维护变成「拆盲盒」：改一行代码可能要花10分钟理解前人的写法。本文聚焦React Native项目统一代码风格（缩进、引号、分号等）

Vue3中方法后面的空格引起的space-before-function-paren“: 报错

weixin_57649833的博客

10-14

2662

主要是prettier格式化和eslint代码检查的规则冲突引起的，eslint需要添加空格，prettier格式化会去掉空格，引起eslint报错。解决方法，在根目录下的eslintrc.js中的reles{}中添加： 'space-before-function-paren': 0 保存后需要重启编辑器vscode才可以生效哦。 ...

vscode格式化文档与eslint冲突解决方案

Komorebi_00的博客

12-29

969

vscode格式化文档与eslint冲突在vue项目中新建一个.prettierrc.json的文件配置如下： { //关闭格式化文档时自动加分号 "semi": false, //使用单引号 "singleQuote": true, //最后一行自动加逗号问题 "trailingComma": "none" } 关闭eslint中函数名与括号之间加空格的报错：打开.eslintrc.js文件，在rules里面添加一行代码： ‘space-before-function-paren’:

ESLint 中的“ space-before-function-paren ”相关报错及其解决方案

IT枫斗者的博客

09-02

1670

字符串选项不会检查异步箭头函数表达式的向后兼容性。下列选项每一个都可以被设置为"always"，“never"或"ignore”。匿名函数的关键字之后可能需要一个空格，而另一些则不指定空白。同样，函数名称后面的空格可能需要也可能不需要。asyncArrow是用于异步箭头函数表达式（例如async () => {}）。named是用于命名函数表达式（例如function foo () {}）。关键字和函数名称之间的空格，但匿名函数不需要空格。always（默认）需要一个空格，然后(是参数。

VSCode中Prettier插件&依赖安装及冲突解决

小洋人最happy的专栏

11-24

6647

Prettier 一个“有态度”的代码格式化工具，在VSCode中插件安装和依赖安装使用

前端开发规范03-ESLint 与 Prettier 配合解决代码格式问题

qq956457912的博客

08-20

1193

前端开发规范03-ESLint 与 Prettier 配合解决代码格式问题

prettier 和ESlint格式冲突问题解决-Unexpected space before function parentheses

qq_36722315的博客

06-02

3435

描述一下问题： 1.本来prettier和eslint 用的好好的，今天做黑马头条的案例，写到一个匿名函数，prettier又开始加空格了，但是eslint只能设置忽略空格或者不忽略空格，没办法做到两全，我这里改了规则怕是前面的都要翻了天 2.妄想通过修改rules或者settings.json来实现，未遂1.安装插件prettier-eslint 2.配置：说明： 1.首先原来的eslint和prettier属于是开发者都很傲娇，谁也不惯着谁，不妥协不将就，所以目前没有找到特别完...

prettier 函数function 后面空格移除，.prettierrc与.eslintrc.js冲突

wuyulkl的博客

02-14

1926

链接：https://www.jianshu.com/p/53a7fbee7acf。商业转载请联系作者获得授权，非商业转载请注明出处。选择：prettier-eslint。设置了函数与括号之间有空格，而。

Eslint与Prettier配合解决代码格式问题

桂如的博客

08-07

541

Eslint 与Prettier配合解决代码格式问题

使用Prettier规范

sunnyboysix的博客

11-25

205

代码规范

如何解决 Prettier 和 ESLint 规则之间的冲突？

06-07

### 配置 Prettier 和 ESLint 以避免规则冲突为了确保 Prettier 和 ESLint 在项目中协同工作，同时避免规则冲突，可以按照以下方法进行配置： #### 1. 安装必要的依赖在项目中安装 Prettier 和 ESLint 的相关依赖，包括 `eslint-config-prettier` 和 `eslint-plugin-prettier`。这些工具可以帮助禁用与 Prettier 冲突的 ESLint 规则，并将 Prettier 的格式化规则集成到 ESLint 中。 ```bash pnpm add eslint prettier eslint-config-prettier eslint-plugin-prettier -D ``` #### 2. 创建 Prettier 配置文件在项目根目录下创建 `.prettierrc` 文件，并定义所需的格式化规则。例如： ```json { "singleQuote": true, // 使用单引号 "semi": false, // 移除分号 "printWidth": 80, // 每行字符的最大宽度 "trailingComma": "es5" // 对象和数组末尾添加逗号 } ``` 此配置文件将作为 Prettier 的规则基础[^2]。 #### 3. 配置 ESLint 在项目的 `.eslintrc.json` 文件中，扩展 `eslint-config-prettier` 并安装 `eslint-plugin-prettier` 插件。这种配置可以确保 ESLint 不会覆盖 Prettier 的规则，并将 Prettier 的格式化错误标记为 ESLint 错误。示例 `.eslintrc.json` 配置如下： ```json { "extends": [ "eslint:recommended", // 使用 ESLint 推荐规则 "plugin:prettier/recommended" // 启用 Prettier 插件并禁用冲突规则 ], "plugins": ["prettier"], // 添加 Prettier 插件 "rules": { "prettier/prettier": "error" // 将 Prettier 格式化错误标记为 ESLint 错误 } } ``` 通过这种方式，ESLint 和 Prettier 的规则可以无缝协作[^1]。 #### 4. 确保 VSCode 配置正确如果使用 VSCode 作为开发环境，确保安装了 `Prettier - Code formatter` 扩展，并在 `settings.json` 中配置以下内容： ```json { "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置默认格式化工具为 Prettier "editor.formatOnSave": true, // 开启保存时自动格式化 "prettier.requireConfig": true // 确保 Prettier 使用项目中的配置文件 } ``` 这将确保代码在保存时自动应用 Prettier 的格式化规则[^3]。 #### 5. 测试配置有效性创建一个简单的 JavaScript 文件并测试配置是否生效。例如： ```javascript function test(a, b) { return a + b; } ``` 保存文件后，检查是否根据 `.prettierrc` 中的规则进行了格式化。此外，运行以下命令以验证 ESLint 是否正确检测 Prettier 的格式化错误： ```bash pnpm run lint ``` 如果一切配置正确，ESLint 应该不会报告与 Prettier 冲突的格式化问题。 --- ### 注意事项 - 如果团队中有成员未安装 `eslint-config-prettier` 或未正确配置，可能会导致格式化不一致。建议在项目初始化时明确文档化配置步骤。 - 确保所有开发者使用的 Prettier 和 ESLint 版本一致，以避免因版本差异导致的冲突。 ---