ESLint入门配置

---

前言

JS 语言是弱语言，我们在编写时，只有运行时才能知道错误的地方，无法在编译时就知道，这就导致了我们会浪费大量的时间去排错。
ESLint 就是使 JS 在编译时就让错误暴露出来，这也是它存在的意义。

---

一、安装 ESLint

由于我是使用 Vue CLI 创建的 Vue 项目，所以就自带了 ESLint 。
这边主要是讲 ESLint 的配置，安装这一部分，大家可以去看下官网。

二、添加 ESLint 配置文件

// 通过 cmd 进入项目根目录执行
eslint --init

三、ESLint 配置

module.exports = {
  // 找查到该文件时，就不继续往下找了
  root: true,

  // 环境配置
  env: {
    browser: true,
    commonjs: true,
    es2021: true,
  },

  // 继承推荐规则
  extends: ["eslint:recommended", "plugin:vue/essential"],

  // 解析器配置
  parserOptions: {
    ecmaVersion: 12,
 	
 	// 解析器
  	parser: "@babel/eslint-parser",
  },

  // 第三方插件
  plugins: ["vue"],

  // 规则
  rules: {
    semi: ["error", "always"],
    quotes: ["error", "double"],
  },
};

如果你是 Vue 项目，只需要 Copy 下来就行了，我这边只是简单记录了下配置，方便自己日后再次使用时，快速 Copy 使用。
主要是因为官网已经讲的很详细了，我觉得我再去说明的话，反而会让你们觉得更加困扰。

总结

其实 ESLint 只是一个辅助工具，用来帮助我们在写前端代码时，能够遵循统一的代码风格。我们只需要知道怎么用即可，不要像我当初，对着官方文档就一直在磕，没多大的意义。