Eslint初体验

前言

因不喜编译器格式化处理的代码风格，且遇到多人协同开发项目时个人习惯对代码风格影响较大，为解决此问题故用上了Eslint语法检查。

Eslint介绍

ESLint 是一个开源的 JavaScript 代码检查工具,。代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。

但是由于javascript的动态弱类型语言特性，导致在开发中如果不加以约束会容易出错，也正是因为这种特性导致当程序出现错误的时候，我们需要花费更多的时间在执行的过程中不断去调试，Eslint的出现就是为了让开发人员可以在开发的过程中就发现错误而非在执行过程中。

Eslint保持其插件的特性，让开发人员自定义定制属于自己的规则，也可以去遵循一些大的社区或者团队的规范直接继承下来用于使用，其所有规则都是可插入的，同时为了方便使用，也对其内置了一些规则。

使用步骤

初始化Eslint配置文件

npm init @eslint/config

输入此命令，还需在控制台选择配置项，按需安装即可。
我使用的是.js文件，因为这样可以在配置项里添加注释。
运行后它会给你的项目安装 eslint 依赖。
因为我选择的是 Vue 项目，因此还额外安装了 eslint-plugin-vue。
如果你的项目根目录多出一个.eslintrc.{js,cjs,yml,json}则表示成功安装，接下来即可使用。

---

初始化后配置文件的内容如下，你可以在rules属性里配置规则，规则列表详见

// .eslintrc.cjs
module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential"
    ],
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
}

编译器（WebStorm）配置-根据配置规则格式化代码

• 前提

请确保你的WebStorm安装了ESLint Restart Service Action、Prettier。如果没有请前往 设置-插件 进行搜索和安装。

• 配置ESlint

开启ESLint校验：设置-语言和框架-JavaScript-代码质量工具-ESLint-勾选手动EALint配置-勾选保存时运行eslint -fix

• 配置Prettier

开启Prettier：设置-语言和框架-JavaScript-Prettier-勾选自动-勾选运行

• 配置编译器保存时操作

步骤：设置-工具-保存时的操作-勾选并保存