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

2023-11-29 00:10

本文主要是介绍ESLint 中的“ space-before-function-paren ”相关报错及其解决方案,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

出现的问题及其报错:

 报错原因:

解决方案:

方案一: 

方案二: 

方案三: 

 注意: 三种方案只可以使用一种,看自己的需求,三种方案会有一种适合你的报错

想知道解决方案的原理,可以阅读 space-before-function-paren 规则,如下

space-before-function-paren 规则:

规则细节

选项

“always”

“never”

{"anonymous": "always", "named": "never", "asyncArrow": "always"}

{"anonymous": "never", "named": "always"}

{"anonymous": "ignore", "named": "always"}

何时不使用

相关规则

版本


出现的问题及其报错:

在 VScode 中,在使用带有 ESLint 工具的项目中,保存会发现报错,并且修改好代码格式后,保存会发现代码格式依然出现问题:

 报错原因:

 “ space-before-function-paren ” 英文 翻译为 中文 为“函数参数前的意外空格

报这个错误的原因是 函数名称 或 function关键字 与开始参数之间缺少空格(或多出空格),可以通过修改 eslint 的配置文件来更改语法检测规则

在--fix命令行上的选项可以自动修复一些被这条规则反映的问题。

格式化函数时,函数名称或function关键字与开始参数之间允许有空格。命名函数还需要function关键字和函数名称之间的空格,但匿名函数不需要空格。

解决方案:

方案一: 

打开 .eslintrc.js 文件,并在  rules 中添加如下一行代码即可:

 "space-before-function-paren": 0,

方案二: 

 打开 .eslintrc.js 文件,并在  rules 中添加如下一行代码即可:

'space-before-function-paren': ['error', 'never', { anonymous: 'always', named: 'always', asyncArrow: 'always' }],

方案三: 

 打开 .eslintrc.js 文件,并在  rules 中添加如下一行代码即可:

'space-before-function-paren': ['error', 'never'],

以上三种方案都试过后,其中会有一种方法就可以解决问题啦 ,这是最快的解决方案,每个都尝试一遍;

 注意: 三种方案只可以使用一种,看自己的需求,三种方案会有一种适合你的报错

想知道解决方案的原理,可以阅读 space-before-function-paren 规则,如下

space-before-function-paren 规则:

在  --fix 命令行上的选项可以自动修复一些被这条规则反映的问题。

格式化函数时,函数名称或  function 关键字与开始参数之间允许有空格。命名函数还需要  function 关键字和函数名称之间的空格,但匿名函数不需要空格。例如:

function withoutSpace(x) {// ...
}function withSpace (x) {// ...
}var anonymousWithoutSpace = function() {};var anonymousWithSpace = function () {};

样式指南在  function 匿名函数的关键字之后可能需要一个空格,而另一些则不指定空白。同样,函数名称后面的空格可能需要也可能不需要。

规则细节

此规则旨在在函数括号之前强制执行一致的间距,因此,只要空格不符合指定的偏好,就会发出警告。

选项

此规则具有字符串选项或对象选项:

{"space-before-function-paren": ["error", "always"],// or"space-before-function-paren": ["error", {"anonymous": "always","named": "always","asyncArrow": "always"}],
}
  • always(默认)需要一个空格,然后(是参数。
  • never(参数后面不允许任何空格。

        字符串选项不会检查异步箭头函数表达式的向后兼容性。

        您还可以为每种类型的功能使用单独的选项。下列选项每一个都可以被设置为"always""never""ignore"。默认是"always"

  • anonymous是用于匿名函数表达式(例如function () {})。
  • named是用于命名函数表达式(例如function foo () {})。
  • asyncArrow是用于异步箭头函数表达式(例如async () => {})。

“always”

此规则的默认代码错误代码示例"always"

/*eslint space-before-function-paren: "error"*/
/*eslint-env es6*/function foo() {// ...
}var bar = function() {// ...
};var bar = function foo() {// ...
};class Foo {constructor() {// ...}
}var foo = {bar() {// ...}
};var foo = async() => 1

具有默认选项的此规则的正确代码示例"always"

/*eslint space-before-function-paren: "error"*/
/*eslint-env es6*/function foo () {// ...
}var bar = function () {// ...
};var bar = function foo () {// ...
};class Foo {constructor () {// ...}
}var foo = {bar () {// ...}
};var foo = async () => 1

“never”

此规则的错误代码示例包含以下"never"选项:

/*eslint space-before-function-paren: ["error", "never"]*/
/*eslint-env es6*/function foo () {// ...
}var bar = function () {// ...
};var bar = function foo () {// ...
};class Foo {constructor () {// ...}
}var foo = {bar () {// ...}
};var foo = async () => 1

此规则的正确代码示例包含以下"never"选项:

/*eslint space-before-function-paren: ["error", "never"]*/
/*eslint-env es6*/function foo() {// ...
}var bar = function() {// ...
};var bar = function foo() {// ...
};class Foo {constructor() {// ...}
}var foo = {bar() {// ...}
};var foo = async() => 1

{"anonymous": "always", "named": "never", "asyncArrow": "always"}

此规则的错误代码示例包含以下{"anonymous": "always", "named": "never", "asyncArrow": "always"}选项:

/*eslint space-before-function-paren: ["error", {"anonymous": "always", "named": "never", "asyncArrow": "always"}]*/
/*eslint-env es6*/function foo () {// ...
}var bar = function() {// ...
};class Foo {constructor () {// ...}
}var foo = {bar () {// ...}
};var foo = async(a) => await a

此规则的正确代码示例包含以下{"anonymous": "always", "named": "never", "asyncArrow": "always"}选项:

/*eslint space-before-function-paren: ["error", {"anonymous": "always", "named": "never", "asyncArrow": "always"}]*/
/*eslint-env es6*/function foo() {// ...
}var bar = function () {// ...
};class Foo {constructor() {// ...}
}var foo = {bar() {// ...}
};var foo = async (a) => await a

{"anonymous": "never", "named": "always"}

此规则的错误代码示例包含以下{"anonymous": "never", "named": "always"}选项:

/*eslint space-before-function-paren: ["error", { "anonymous": "never", "named": "always" }]*/
/*eslint-env es6*/function foo() {// ...
}var bar = function () {// ...
};class Foo {constructor() {// ...}
}var foo = {bar() {// ...}
};

此规则的正确代码示例包含以下{"anonymous": "never", "named": "always"}选项:

/*eslint space-before-function-paren: ["error", { "anonymous": "never", "named": "always" }]*/
/*eslint-env es6*/function foo () {// ...
}var bar = function() {// ...
};class Foo {constructor () {// ...}
}var foo = {bar () {// ...}
};

{"anonymous": "ignore", "named": "always"}

此规则的错误代码示例包含以下{"anonymous": "ignore", "named": "always"}选项:

/*eslint space-before-function-paren: ["error", { "anonymous": "ignore", "named": "always" }]*/
/*eslint-env es6*/function foo() {// ...
}class Foo {constructor() {// ...}
}var foo = {bar() {// ...}
};

此规则的正确代码示例包含以下{"anonymous": "ignore", "named": "always"}选项:

/*eslint space-before-function-paren: ["error", { "anonymous": "ignore", "named": "always" }]*/
/*eslint-env es6*/var bar = function() {// ...
};var bar = function () {// ...
};function foo () {// ...
}class Foo {constructor () {// ...}
}var foo = {bar () {// ...}
};

何时不使用

如果在函数括号之前不关心间距的一致性,则可以关闭此规则。

相关规则

  • space-after-keywords
  • space-return-throw-case

版本

此规则在ESLint 0.18.0中引入。

 如果有问题,欢迎大家评论区讨论,文章对你有用,给正在学习前端的小陈点个赞吧~~~

这篇关于ESLint 中的“ space-before-function-paren ”相关报错及其解决方案的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/430734

相关文章

Spring Boot中JSON数值溢出问题从报错到优雅解决办法

《SpringBoot中JSON数值溢出问题从报错到优雅解决办法》:本文主要介绍SpringBoot中JSON数值溢出问题从报错到优雅的解决办法,通过修改字段类型为Long、添加全局异常处理和... 目录一、问题背景:为什么我的接口突然报错了?二、为什么会发生这个错误?1. Java 数据类型的“容量”限制

Python的time模块一些常用功能(各种与时间相关的函数)

《Python的time模块一些常用功能(各种与时间相关的函数)》Python的time模块提供了各种与时间相关的函数,包括获取当前时间、处理时间间隔、执行时间测量等,:本文主要介绍Python的... 目录1. 获取当前时间2. 时间格式化3. 延时执行4. 时间戳运算5. 计算代码执行时间6. 转换为指

SpringBoot项目中报错The field screenShot exceeds its maximum permitted size of 1048576 bytes.的问题及解决

《SpringBoot项目中报错ThefieldscreenShotexceedsitsmaximumpermittedsizeof1048576bytes.的问题及解决》这篇文章... 目录项目场景问题描述原因分析解决方案总结项目场景javascript提示:项目相关背景:项目场景:基于Spring

usb接口驱动异常问题常用解决方案

《usb接口驱动异常问题常用解决方案》当遇到USB接口驱动异常时,可以通过多种方法来解决,其中主要就包括重装USB控制器、禁用USB选择性暂停设置、更新或安装新的主板驱动等... usb接口驱动异常怎么办,USB接口驱动异常是常见问题,通常由驱动损坏、系统更新冲突、硬件故障或电源管理设置导致。以下是常用解决

Windows Docker端口占用错误及解决方案总结

《WindowsDocker端口占用错误及解决方案总结》在Windows环境下使用Docker容器时,端口占用错误是开发和运维中常见且棘手的问题,本文将深入剖析该问题的成因,介绍如何通过查看端口分配... 目录引言Windows docker 端口占用错误及解决方案汇总端口冲突形成原因解析诊断当前端口情况解

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

Spring Boot循环依赖原理、解决方案与最佳实践(全解析)

《SpringBoot循环依赖原理、解决方案与最佳实践(全解析)》循环依赖指两个或多个Bean相互直接或间接引用,形成闭环依赖关系,:本文主要介绍SpringBoot循环依赖原理、解决方案与最... 目录一、循环依赖的本质与危害1.1 什么是循环依赖?1.2 核心危害二、Spring的三级缓存机制2.1 三

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

解决SpringBoot启动报错:Failed to load property source from location 'classpath:/application.yml'

《解决SpringBoot启动报错:Failedtoloadpropertysourcefromlocationclasspath:/application.yml问题》这篇文章主要介绍... 目录在启动SpringBoot项目时报如下错误原因可能是1.yml中语法错误2.yml文件格式是GBK总结在启动S