您的位置:首页 > 科技 > IT业 > 深圳搜索引擎_免费动图制作app_卡一卡二卡三入口2021_2023年12月疫情又开始了吗

深圳搜索引擎_免费动图制作app_卡一卡二卡三入口2021_2023年12月疫情又开始了吗

2025/4/16 10:49:51 来源:https://blog.csdn.net/qq_46703452/article/details/147224964  浏览:    关键词:深圳搜索引擎_免费动图制作app_卡一卡二卡三入口2021_2023年12月疫情又开始了吗
深圳搜索引擎_免费动图制作app_卡一卡二卡三入口2021_2023年12月疫情又开始了吗

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com