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 为例):
- 打开设置(
Ctrl+,
),搜索tab size
。- 设置
Editor: Tab Size
和Editor: Detect Indentation
4. 使用 ESLint 自动修复
通过命令行修复缩进问题(需确保
indent
规则已启用):eslint --fix your-file.js # 自动修复缩进:ml-citation{ref="5,6" data="citationList"}
注意事项:
配置文件优先级:
- 项目根目录的
.eslintrc.js
优先级高于全局配置,确保修改正确的文件。- 若项目使用
vue
框架,需检查vue/script-indent
等插件规则是否冲突。与 Prettier 等工具冲突:
- 若同时使用 Prettier,需在
.prettierrc
中配置"tabWidth": 2
,与 ESLint 规则保持一致67。行内禁用规则:
可在特定代码段跳过缩进检查:/* 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