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 SizeEditor: 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 在代码中声明为 letvar,但从未被重新赋值。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. 将副作用操作移至 watchmethods
若需在数据变化时触发操作(如赋值、更新 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、计算属性的设计原则

  • 若需响应数据变化并执行复杂逻辑,优先使用 watchmethods‌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

相关推荐
QTX187303 分钟前
使用 Axios 进行 API 请求与接口封装
javascript·vue.js·node.js
钮钴禄·爱因斯晨17 分钟前
深入理解 Java 内存区域与内存溢出异常
java·开发语言
_x_w19 分钟前
【16】数据结构之基于树的排序算法篇章
开发语言·数据结构·python·算法·链表·排序算法
北辰浮光27 分钟前
[SpringMVC]上手案例
java·开发语言
打野赵怀真39 分钟前
React Hooks 的优势和使用场景
前端·javascript
似水流年QC1 小时前
什么是Lodash
javascript·lodash
知心宝贝1 小时前
【Nest.js 通关秘籍 - 基础篇】带你轻松掌握后端开发
前端·javascript·架构
小叶爱吃鱼1 小时前
python-各种文件(txt,xls,csv,sql,二进制文件)读写操作、文件类型转换、数据分析代码讲解
前端·javascript·python·学习
小钰能吃三碗饭1 小时前
第八篇:【React 性能调优】从优化实践到自动化性能监控
前端·javascript·react.js