从零开始的eslint本章主要介绍eslint，及其相关配置 eslint的初始化下面开始逐步分析项目中的eslint

本章主要介绍eslint及其相关配置，后续会有prettier， stylelint结合来使用，希望能做到项目初始化后对代码格式化配置使用的掌握与理解

eslint的初始化

下面开始逐步分析项目中的eslint配置，使用vue3初始化项目, 项目初始化完成后，安装eslint

npm i eslint -D

添加配置文件.eslintrc.js,此时文件为空。

项目中的使用

// main.js
import { createApp } from 'vue' 
import App from './App.vue'

createApp(App).mount('#app')

入口文件madn.js的import会出现 Parsing error: The keyword 'import' is reservedeslint错误，因为eslint需要配置parserOptions来指定语言版本为和模块类型。这里学习到了第一个配置

// .eslintrc.js
module.exports = {
    parserOptions: { // 解析器选项设置
        ecmaVersion: 2020, // 默认设置为 3，5（默认）， 你可以使用 6、7、8、9 或 10 来指定你想要使用的 ECMAScript 版本，你也可以用使用年份命名的版本号指定为 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）或 2019 (same as 10)
        sourceType: 'module' // 设置为 `"script"` (默认) 或 `"module"`（如果你的代码是 ECMAScript 模块)。
    }
}

保存后，上面的main.js不会在报红。

当想要自己配置eslint规则时，这里使用到了第二个配置rules，可以参考eslint-rules,这里我们以no-var为例

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
var a = 1
console.log('11',a)

在没有配置eslint时，这里没有报红，现在我们设置rules。

// .eslintrc.js
module.exports = {
    parserOptions: {
        ecmaVersion: 2020,
        sourceType: 'module'
    },
    rules: {
        'no-var': ['error']
    }
}

保存后，发现main.js报红了，在var a = 1处，提示Unexpected var, use let or const instead.eslint(no-var)这里说明刚刚设置的rules生效了。在一个项目中可能用到很多的配置，我们不必每个去配置，可以使用现有的配置比如recommended，这里使用到了第三个配置extends扩展，extends可以是一个字符串，也可以是一个字符串数组，数组的话每个配置继承前面的配置。

// .eslintrc.js
module.exports = {
    extends: ['eslint:recommended'],
    parserOptions: {
        ecmaVersion: 2020,
        sourceType: 'module'
    },
    rules: {
        'no-var': ['error'],
    }
}

这时你会发现，这个文件的module报错，'module' is not defined.eslint，是因为这里用个recommended引入了no-undef这个规则:'未定义变量'，

，这里使用第四个配置env:指定环境，一个环境定义了一组预定义的全局变量，设置为node即可。

// .eslintrc.js
module.exports = {
    extends: ['eslint:recommended'],
    parserOptions: {
        ecmaVersion: 2020,
        sourceType: 'module'
    },
    env:{
         node: true
    },
    rules: {
        'no-var': ['error']
    }
}

修改main.js文件

// main.js
import { createApp } from 'vue'
import App from   './App.vue'
createApp(App).mount('#app')
var a = 1;;;
console.log('11',a)

保存，在“;;;”发现多了一条eslint的错误提示Unnecessary semicolon.eslint（no-extra-semi 这里说明我们扩展的recommended生效了。当我们想要的rules规则有个别的需要调整时，可以在配置文件的rules中修改，

// .eslintrc.js
module.exports = {
    extends: ['eslint:recommended'],
    parserOptions: {
        ecmaVersion: 2020,
        sourceType: 'module'
    },
    env:{
         node: true
    },
    rules: {
        'no-var': ['error'],
        'no-extra-semi': ['off'] // 关闭没有必要分号的校验
    }
}

这时在去main.js发现只有no-var的报错。为了方便下面演示，no-extra-semi先打开。

eslint修复

首先了解两个eslint命令:

--ext:这个选项允许你指定 ESLint 在指定的目录下查找 JavaScript 文件时要使用的文件扩展名。默认情况下，它使用 .js 作为唯一性文件扩展名
--fix:该选项指示 ESLint 试图修复尽可能多的问题在package.json中写入命令 "eslint": "eslint --fix ./src --ext .js" 这里 --ext .js可以不写，默认js文件。

终端运行，这时发现文件main.js中的var a = 1;;;修复为let a = 1; 这样就修复了eslint的报错，但每次运行命令太过麻烦，可以结合vscode，在配置文件中配置来做到保存即修复，首先打开配置文件settings.json,可以通过command + , 在打开页面搜索json

在该文件下，设置保存自动修复即可。

// settings.json
{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint":true
    }
}

自己写一个配置文件

这里参考npm的发布，生成一个自己的eslint配置文件

// package.json
{
  "name": "@nnnni/eslint-config-demo",
  "version": "1.0.0",
  "description": "一个测试eslint",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git@gitee.com:niuben999/vue-eslint-config.git"
  },
  "author": "niuben",
  "license": "ISC"
}

// index.js
module.exports = {
    rules: {
        'no-console': 'error'
      }
}

发布成功后，在项目里面使用这个配置。

这里我们使用自己写的配置文件，首先要引入

npm i @nnnni/eslint-config-demo -D

然后在配置文件中扩展

// .eslintrc.js
module.exports = {
    extends: ['@nnnni/demo'], // @nnnni/eslint-config-demo 可以简写为 @nnnni/demo
}

保存后，发现之前写的console.log('11',a)报红，说明刚才写的配置文件生效了。