ESLint常见错误

1、Strings must use singlequote  —— 字符串必须使用单引号

2、Extra semicolon semi——额外的分号:一行语句结尾不能添加分号

 3、'Unexpected trailing comma' —— 行尾多了一个逗号

4、Newline required at end of file but not found  ——文件结尾必须要新加一行

5、'xxx' is assigned a value but never used  no-unused-vars —— ’xxx‘’变量已经声明了,但是从未被使用

6、Missing space before =>  ——箭头函数前(括号后)缺少一个空格(箭头 => 前后都要加)

错误示例‌:(x)=>{...}
正确应为:(x) => { ... }(箭头前后均需空格)
涉及规则:arrow-spacing

7、Trailing spaces not allowed —— 存在多余空格,删除多余的空格

8、A space is required after/before 'x'  ——在某个符号前面/后面需要加一个空格

错误示例‌:const arr = [1,2,3]
正确应为:const arr = [1, 2, 3](逗号后需添加空格)
涉及规则:comma-spacing

9、Missing space before value for key 'x'  ——对象的值与键值对之间的冒号间缺少一个空格

错误示例‌:{ a:1 }
正确应为:{ a: 1 }(冒号后需添加空格,冒号前无需空格)
涉及规则:key-spacing

10、Missing space before function parentheses  ——函数圆括号前缺少空格

// 错误示例(命名函数)

function demo(){...}   // 缺少空格

const obj = {demo:function(){...}}  // `function` 关键字后缺少空格

// 正确示例  

function demo () {...}  

const obj = {demo: function () {...}}  

解决方案
1. 调整 ESLint 配置(推荐)

在项目根目录的 .eslintrc.js 文件中修改规则配置:

module.exports = {rules: {'space-before-function-paren': ['error', 'always']  // 强制添加空格‌:ml-citation{ref="1,4" data="citationList"}// 或关闭规则检查  'space-before-function-paren': 0                   // 禁用规则‌:ml-citation{ref="1,2" data="citationList"}}
};
  • 需重启项目‌:修改配置后必须重启项目才能生效‌。
  • 匿名函数与命名函数差异‌:匿名函数(如对象方法)的 function 关键字后需空格,命名函数需在函数名后加空格‌
2. 修复代码格式

手动在函数声明或表达式处添加空格:

// 命名函数  
function demo () { ... }  // 匿名函数(对象方法)  
const obj = {demo: function () { ... }   // `function` 后需空格‌:ml-citation{ref="8" data="citationList"}
};  // 箭头函数(若适用其他规则)  
const demo = () => { ... };  
3. 处理格式化工具冲突

若使用 Prettier 等工具自动格式化导致冲突,需调整其配置与 ESLint 规则一致。例如在 .prettierrc 中配置:

{"spaceBeforeFunctionParen": true  
}
4. 使用 ESLint 自动修复

通过命令行修复代码(需确保规则未禁用):

eslint --fix your-file.js  
其他注意事项

(1)行内禁用规则‌:在特定代码段跳过检查:

/* eslint-disable space-before-function-paren */  
function demo(){ ... }  // 不触发规则  
/* eslint-enable space-before-function-paren */  

(2)配置优先级‌:项目级 .eslintrc.js 优先级高于全局配置,确保修改正确文件‌

11、Missing space before opening brace   —— 左大括号后换行

// 错误示例  
function demo(){ ... }  
if (condition){ ... }  

// 正确示例  
function demo() { ... }  
if (condition) { ... }  

13、Expected indentation of 2 spaces but found 4 —— ESLint 默认要求使用 ‌2 个空格‌ 作为缩进,但实际检测到 ‌4 个空格‌‌

// 错误示例(4 空格缩进)
function demo() {
    console.log("test");  // 缩进为 4 空格
}

// 正确示例(2 空格缩进)
function demo() {
  console.log("test");    // 缩进为 2 空格
}

解决方案 
1. 关闭 ESLint 缩进检查(快速修复)

在 .eslintrc.js 中禁用 indent 规则:

module.exports = {rules: {'indent': 'off'  // 关闭缩进检查‌:ml-citation{ref="1,2" data="citationList"}}
};

此方法可快速消除报错,但会导致代码风格不一致,建议团队项目慎用。

2. 调整缩进规则为 4 空格(推荐)

若需保持 4 空格缩进,可修改 indent 规则配置:

module.exports = {rules: {'indent': ['error', 4]  // 强制使用 4 空格缩进‌:ml-citation{ref="3,7" data="citationList"}}
};

需注意:部分 ESLint 插件(如 vue)可能需单独配置缩进规则‌

3. 配置编辑器自动缩进

在编辑器中设置 ‌Tab 转换为 2 个空格‌(以 VS Code 为例):

  1. 打开设置(Ctrl+,),搜索 tab size
  2. 设置 Editor: Tab Size 和 Editor: Detect Indentation

4. 使用 ESLint 自动修复

通过命令行修复缩进问题(需确保 indent 规则已启用):

eslint --fix your-file.js  # 自动修复缩进‌:ml-citation{ref="5,6" data="citationList"}
注意事项:
  1. 配置文件优先级‌:

    • 项目根目录的 .eslintrc.js 优先级高于全局配置,确保修改正确的文件‌。
    • 若项目使用 vue 框架,需检查 vue/script-indent 等插件规则是否冲突‌。
  2. 与 Prettier 等工具冲突‌:

    • 若同时使用 Prettier,需在 .prettierrc 中配置 "tabWidth": 2,与 ESLint 规则保持一致‌67。
  3. 行内禁用规则‌:
    可在特定代码段跳过缩进检查:

/* eslint-disable indent */
function demo() {console.log("test");  // 临时允许 4 空格缩进
}
/* eslint-enable indent */

14、 'Unexpected template string expression'——  使用了不必要的模板字符串表达式

(1)模板字符串未使用反引号‌:使用单引号或双引号包裹模板字符串,导致 ${} 表达式被 ESLint 识别为错误语法‌

// 错误示例(单引号)
const message = 'Hello, ${name}';  
// 正确示例(反引号)
const message = `Hello, ${name}`;  

(2)未闭合的反引号‌:模板字符串缺少闭合的反引号,导致语法解析失败‌

// 错误示例(未闭合)
const message = `Hello, World;
// 正确示例
const message = `Hello, World`;

(3)表达式语法错误‌:模板字符串中的 ${} 内变量未定义或存在语法问题‌

// 错误示例(变量未定义)
const text = `Value: ${undeclaredVar}`;  
// 正确示例(变量已声明)
const declaredVar = 100;
const text = `Value: ${declaredVar}`;  

15、'"XXX" is never reassigned. Use 'const'' ——  此错误由 ESLint 的 prefer-const 规则触发,表示变量 XXX 在代码中声明为 let 或 var,但从未被重新赋值。ESLint 建议改用 const 声明,以提高代码可读性和安全性(const 声明后不可重新赋值)‌

// 错误示例
let name = "Alice";  // 未重新赋值,却使用 let
console.log(name);// 正确示例
const name = "Alice";  // 使用 const 声明
console.log(name);

16、 'Unexpected side effect in "submitParams" computed property' —— 表示在计算属性 submitParams 中进行了‌副作用操作‌(如修改 data 变量、操作 DOM 或执行异步任务),而计算属性应仅用于‌纯计算逻辑‌(仅返回依赖数据的计算结果)

// 错误示例:在计算属性中修改 data 变量
computed: {submitParams() {this.selectedValue = 100;  // 副作用操作(修改 data 变量)return this.value * 2;}
}

 ‌解决方案

1. 将副作用操作移至 watch 或 methods
若需在数据变化时触发操作(如赋值、更新 DOM),使用 watch 替代 computed
// 正确示例:用 watch 监听变化
data() {return { selectedValue: 0 };
},
computed: {submitParams() {return this.value * 2;  // 仅返回计算结果}
},
watch: {submitParams(newVal) {this.selectedValue = newVal;  // 副作用操作移至 watch}
}
2. 避免在计算属性中修改 data 变量

确保 computed 仅依赖其他数据并返回值,不直接修改状态‌

// 错误:在 computed 中修改 data
computed: {submitParams() {this.list.push(1);  // 修改 data 数组return this.list;}
}// 正确:返回新数组但不修改原数据
computed: {submitParams() {return [...this.list, 1];  // 返回新数组}
}
注意事项

‌1、计算属性的设计原则

  • 若需响应数据变化并执行复杂逻辑,优先使用 watch 或 methods‌56。
  • 计算属性应为‌纯函数‌,仅根据依赖项返回计算结果,避免修改外部状态或触发异步操作‌37。

2‌、与 watch 的区别

  • computed:适用于同步计算,依赖缓存优化性能。
  • watch:适用于异步操作或需要执行副作用的场景‌

17、 'Identifier 'col_names' is not in camel case' —— 没有使用驼峰方式命名

      // 修改前const col_names = ["id", "name"];// 修改后const colNames = ["id", "name"];

18、'Unnecessary use of conditional expression for default assignment' —— 默认赋值不必要地使用条件表达式

 (1) 在 JavaScript 中,使用条件表达式在两个布尔值之间进行选择,而不是使用将测试转换为布尔值,这是一个常见的错误

// Bad
const isYes = answer === 1 ? true : false;// Good
const isYes = answer === 1;// Bad
const isNo = answer === 1 ? false : true;// Good
const isNo = answer !== 1;

(2) 另一个常见错误是将单个变量同时用作条件测试和结果。在这种情况下,可以使用 logical 来提供相同的功能

// Bad
foo(bar ? bar : 1);// Good
foo(bar || 1);

(3)当存在更简单的替代方案时,此规则不允许使用三元运算符

//此规则的错误代码示例
/*eslint no-unneeded-ternary: "error"*/const a = x === 2 ? true : false;const b = x ? true : false;//此规则的正确代码示例/*eslint no-unneeded-ternary: "error"*/const a = x === 2 ? "Yes" : "No";const b = x !== false;const c = x ? "Yes" : "No";const d = x ? y : x;f(x ? x : 1); // default assignment - would be disallowed if defaultAssignment option set to false. See option details below.

官方地址:no-unneeded-ternary - ESLint - 可插拔的 JavaScript Linter

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/75884.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows进行磁盘分区/扩容

Windows进行磁盘分区/扩容 导航 文章目录 Windows进行磁盘分区/扩容导航分区教程压缩卷教程 用Windows自带的磁盘管理进行分区/扩容,但有个东西需要说明下是: 物理特性限制 磁盘分区的物理特性决定了扩容操作的方向。在磁盘上,数据是线性存储…

获取类路径

分析 String pathThread.currentThread().getContextClassLoader().getResource("log").getPath(); 这行代码用于获取类路径(classpath)下名为"log"的资源的文件系统路径,我来详细解析它的执行过程和潜在问题: 1. 代码分解解析 j…

安装fvm可以让电脑同时管理多个版本的flutter、flutter常用命令、vscode连接模拟器

打开 PowerShellfvm安装 dart pub global activate fvm安装完成后,如果显示FVM无法识别,那么需要去添加环境变量path添加这个:C:\Users\Administrator\AppData\Local\Pub\Cache\bin 常用命令 fvm releases 查看用户可以装的flutter版本fvm l…

Kaggle-Disaster Tweets-(二分类+NLP+模型融合)

Disaster Tweets 题意: 就是给出一个dataframe包含text这一列代表着文本,文本会有一些词,问对于每条记录中的text是真关于灾难的还是假关于灾难的。 比如我们说今天作业真多,这真是一场灾难。实际上这个灾难只是我们调侃而言的。…

Flutter 2025 Roadmap

2025 这个路线图是有抱负的。它主要代表了我们这些在谷歌工作的人收集的内容。到目前为止,非Google贡献者的数量超过了谷歌雇佣的贡献者,所以这并不是一个详尽的列表,列出了我们希望今年Flutter能够出现的所有令人兴奋的新事物!在…

如何通过API接口获取淘宝商品价格?实操讲解

要通过API接口获取淘宝商品价格,需使用淘宝开放平台(Taobao Open Platform, TOP)提供的商品详情API(如taobao.item.get或taobao.item_get)。以下是完整的实操步骤: 一、前期准备 注册淘宝开放平台账号 访问…

按键精灵安卓/ios脚本辅助工具开发教程:如何把界面配置保存到服务器

在使用按键精灵工具辅助的时候,多配置的情况下,如果保存现有的配置,并且读取,尤其是游戏中多种任务并行情况下,更是需要界面进行保存,简单分享来自紫猫插件的配置保存服务器写法。 界面例子: …

DP34 【模板】前缀和 -- 前缀和

目录 一&#xff1a;题目 二&#xff1a;算法原理 三&#xff1a;代码实现 一&#xff1a;题目 题目链接&#xff1a;【模板】前缀和_牛客题霸_牛客网 二&#xff1a;算法原理 三&#xff1a;代码实现 #include <iostream> #include <vector> using namespac…

关于我的服务器

最近我买了台腾讯云服务器&#xff0c;然后新手小白只会用宝塔。。。 安装完之后默认的端口是8888&#xff0c;打开面板就会提示我有风险。然后 我改了端口之后&#xff0c;怎么都打不开。 于是 学到了几句命令可以使用&#xff1a; //查看端口是否已经修改成功 cat www/se…

机器学习常用算法总结

1. 概述 机器学习的定义是对于某类任务T和性能度量P&#xff0c;如果一个计算机程序在T上其性能P随着经验E而自我完善&#xff0c;那么我们就称这个系统从经验E中学习&#xff0c;机器学习是人工智能的一种方法&#xff0c;它通过在大量数据中学习隐藏的规则&#xff0c;模式和…

ns-3中UDP饱和流发包时间间隔设置最合理值

ns3的官方手册很全&#xff0c;相关书籍也是有的&#xff0c;官网先贴在这里&#xff1a; ns-3 | a discrete-event network simulator for internet systemsa discrete-event network simulator for internet systemshttps://www.nsnam.org/相关的脚本介绍也都有一些&#xf…

Windsurf代码依赖检查导入

目录 1. 在全局配置中根据需求设置检查的文件&#xff0c;以python为例 2. 执行命令生成requirements.txt文件&#xff0c;此操作可以将当前代码所需的依赖全部写入 3. 在Cascade对话窗口输入detect-dependencies查询 4. 根据查询出来的结果优化requirements.txt&#xff0c;可…

复变函数摘记3

复变函数摘记3 5. 留数5.1 可去奇点、极点、本性奇点5.2 零点与极点的关系5.3 在无穷远点处的情形5.4 留数 5. 留数 \quad 如果函数 f ( z ) f(z) f(z) 在 z 0 z_0 z0​ 及 z 0 z_0 z0​ 的邻域内处处可导&#xff0c;那么称 f ( z ) f(z) f(z) 在点 z 0 z_0 z0​ 处解析。…

vscode格式化为什么失效?自动保存和格式化(Prettier - Code formatter,vue-format)

vscode自动格式化保存最终配置 博主找了好多的插件&#xff0c;也跟着教程配置了很多&#xff0c;结果还是没有办法格式化&#xff0c;最终发现了一个隐藏的小齿轮&#xff0c;配置完后就生效了 关键步骤 关键配置 一定要点小齿轮&#xff01;&#xff01;&#xff01; 这个小…

Framer Motion简介

Framer Motion 是什么&#xff1f; Framer Motion 是一个 用于 React 的现代动画库&#xff0c;专为创建流畅、高性能且富有表现力的动画而设计。它不仅适合简单的 UI 动效&#xff0c;也能优雅地实现复杂的动画编排与手势交互。 &#x1f680; 为什么选择 Framer Motion&…

多种方案对比实现 Kaggle 比赛介绍进行行业分类

Kaggle 平台汇集了大量来自不同行业的数据科学竞赛&#xff0c;但这些比赛的标题或简介往往表述多样、不易直接归类。无论是做项目归档、行业研究&#xff0c;还是搭建竞赛推荐系统&#xff0c;都需要一个可靠的方法来将比赛自动归入对应行业标签。 本教程提供使用 HuggingFac…

Android Jni(二)加载调用第三方 so 库

文章目录 Android Jni&#xff08;二&#xff09;加载调用第三方 so 库前置知识CPU架构 ABI 基本步骤1、将第三方 SO 库文件放入项目中的正确位置&#xff1a;2. 创建 JNI 接口3. 实现 JNI 层代码4、配置 CMake 常见问题解决1、UnsatisfiedLinkError&#xff1a;2、函数找不到&…

服务器本地搭建

socket函数 它用于创建一个新的套接字&#xff08;socket&#xff09;。 函数原型 #include <sys/socket.h> int socket(int domain, int type, int protocol);参数解释 domain&#xff1a;它指定了通信所使用的协议族&#xff0c;常见的取值如下&#xff1a; AF_INET…

MIP-Splatting:全流程配置与自制数据集测试【ubuntu20.04】【2025最新版】

一、引言 在计算机视觉和神经渲染领域&#xff0c;3D场景重建与渲染一直是热门研究方向。近期&#xff0c;3D高斯散射&#xff08;3D Gaussian Splatting&#xff09;因其高效的渲染速度和优秀的视觉质量而受到广泛关注。然而&#xff0c;当处理大型复杂场景时&#xff0c;这种…

Redis 高可用集群搭建与优化实践

在分布式系统中,缓存技术用于提升性能和响应速度。 Redis 作为一款高性能的键值存储系统,广泛应用于缓存、消息队列和会话管理等场景。随着业务规模的扩大,单机 Redis 的性能和可用性逐渐无法满足需求。 因此,搭建高可用的 Redis 集群可以解决这一问题。我将详细介绍 Red…