eslint

什么是eslint

ESLint 是一个根据方案识别并报告 ECMAScript/JavaScript 代码问题的工具，其目的是使代码风格更加一致并避免错误。

安装eslint

npm init @eslint/config

执行后会有很多选项，按照自己的需求去选择就好，运行成功后会生成 .eslintrc.js 或者 .eslintrc.json 或者 .eslintrc.yml 的文件，看自己的选择

配置eslint

以.eslintrc.js文件为例

module.exports = {
    "env": {
        "browser": true,
        "es2021": 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": {
    }
}

我们只需要关注 rules 即可，这个也是十分重要配置选项
选项的配置规则如下

• "off"或者0- 关闭规则
• "warn"或1- 打开规则作为警告（不影响退出代码）
• "error"或者2- 将规则作为错误打开（退出代码将为 1

常用的配置选项，后面可以根据团队中相互规定即可，没有十分明确的答案

		eqeqeq: 2,
		'no-dupe-args': 'error',
		'no-dupe-keys': 'error',
		'no-self-compare': 'error',
		'no-self-assign': 'error',
		'no-unused-vars': 'error',
		'no-const-assign': 'error',
		'no-func-assign': 'error',
		camelcase: 'error',
		'no-mixed-spaces-and-tabs': 'error',
		quotes: ['warn', 'single'],
		'vue/multi-word-component-names': 0,
		camelcase: 0,
		'no-unused-vars': 0,

更多配置选项

编辑器配置eslint校验

在开发中eslint不能够实时的反馈出错误信息，导致很无用，或者就是写完了代码，然后在使用eslit去校验很不方便，所以各大编辑器对此都有用各自的插件配置

1.VScdoe

打开插件中搜索eslint下载安装即可

2.HBuilder X

下载插件eslint-js,如果你是需要检查vue的文件还需要下载eslint-plugin-vue

3. WebStorm

这个不需要安装，貌似是自带了，只要项目的更目录下有**.eslintrc.js** 或者 .eslintrc.json 或者 .eslintrc.yml ，就会自动的去匹配，右击使用eslint 格式化即可

搭配vite

在搭配vite的时候可以随时将错误信息展示在浏览器的页面上

1.@nabla/vite-plugin-eslint

下载插件

yarn add --dev @nabla/vite-plugin-eslint

使用

import { defineConfig } from "vite";
import eslintPlugin from "@nabla/vite-plugin-eslint";

export default defineConfig({
  plugins: [eslintPlugin()],
});

插件地址

2.vite-plugin-eslint

下载插件

npm install eslint vite-plugin-eslint --save-dev
# or
yarn add eslint vite-plugin-eslint -D

使用

import { defineConfig } from 'vite'
import eslint from 'vite-plugin-eslint'

export default defineConfig({
  plugins: [eslint()]
})

插件地址