eslint代码校验及修复(Vue项目快速上手)

项目中配置eslint校验

---

---

前言

1. webpack5搭建 Vue项目如下🔗（可以查看）

搭建Vue项目（基础版）🔗

2. eslint+prettier Vue项目如下🔗（暂时未更新）

尽情期待💪💪

一、什么是 ESLint？

ESLint 是一个开源的 JavaScript 代码检查工具，旨在识别和报告 JavaScript 代码中的模式或代码片段，从而确保代码的一致性和避免潜在错误。

二、为什么要使用 ESLint？

①、代码一致性：确保整个团队遵循相同的编码风格和规范，使代码更易于阅读和维护。

②、避免错误：通过静态代码分析，提前发现代码中的潜在错误或不良实践。

③、集成到 CI/CD：自动检查代码质量，并确保只有满足规范的代码才能进入生产环境。

三、如何在 Vue 项目中集成 ESLint？

3.1.安装依赖

代码如下：

// 安装 eslint 依赖
npm install eslint eslint-plugin-vue --save-dev

依赖版本如下：
   "eslint": "^8.49.0",
   "eslint-plugin-vue": "^9.17.0",

如下图所示

3.2.配置.eslintrc文件

一键化配置

npx eslint --init  或者 npm init @eslint/config

例如下面的配置

规则配置如下