Eslint在Jsx中的使用（2）

开始配置 Eslint

/* 在项目根目录运行 下载配置Eslint*/
npm init @eslint/config

/*选择提示方式，选第二个*/
? How would you like to use ESLint? ...
  To check syntax only
> To check syntax and find problems
  To check syntax, find problems, and enforce code style

/*配置导出导入方式  这里选择第一个，第二个多用于nodejs*/
? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

/* 选择语言 Vue */
? Which framework does your project use? ...
  React
> Vue.js
  None of these

/* 是否需要TypeScript 选择不需要no */
? Does your project use TypeScript? » No / Yes

/* 选择在哪里运行 这里选择第一个，如果要多选可以键盘上下键+空格确定/取消即可*/
? Where does your code run? ...
(Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node

/* 这里说eslint文件要设置为什么文件 这里我选择JSON*/
? What format do you want your config file to be in? ...
  JavaScript
  YAML
> JSON

/*这里问我们是否立刻安装eslint-plugin-vue插件，我们选择是的  */
eslint-plugin-vue@latest eslint@latest
? Would you like to install them now? » No / Yes

/*选择npm包管理  */
? Which package manager do you want to use? ...
> npm
  yarn
  pnpm

这样我们就得到了 eslintrc.json 文件

里面存放着 eslint 的基本配置

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
}

Eslint 各个配置项含义

env

配置环境

"env": {
        "browser": true,/* 这样设置就可以支持browser */
        "es2021": true,
        "es6": true  //  这样设置之后，就支持新的 ES6 全局变量和类型了
    },

extends

用于继承某些基础配置。值可以是字符串/数组。值为数组时，每个配置继承它前面的配置。就是使用别人写好的规则。

 "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential"
    ],

parserOptions

指定你想支持的语言

"parserOptions": {
        "ecmaVersion": "latest",/* z支持最新es语法 */
        "sourceType": "module"/* 模块化的代码要写：module */
    },

plugins

使用第三方插件,要安装

 "plugins": [
        "vue"/* 让 eslint 拥有和 vue 一样的代码格式化能力。 */
    ],

rules

自定义规则，可以在官网找到需要的规则

 "rules": {

    }

到这里我们完成Eslint的基本配置。