eslint的安装和使用（eslint-loader）

参考网址

（1）https://eslint.vuejs.org/user-guide/#installation (eslint-plugin-vue)

（2） https://eslint.org/docs/user-guide/configuring/plugins#specifying-parser (eslint配置项)

（3）x

https://eslint.bootcss.com/docs/user-guide/getting-started （快速开始）

一、安装

1。如果是通过vue-cli 而不是vite创建的项目

vue add @vue/cli-plugin-eslint

通过vite

npm install --save-dev eslint eslint-plugin-vue

二、其它依赖

1.eslint-config-airbnb-base

airbnb通过可共享配置的方式共享他们的eslint 规则。可共享配置 是一个npm包，它输出一个配置对象。

# 首先 通过npm info命令查询依赖

npm info "eslint-config-airbnb-base@latest" peerDependencies

安装airbnb配置

npm install eslint-config-airbnb-base@latest

安装 eslint-plugin-import

cnpm install eslint-plugin-import@^2.22.1 -D

2.Babel-eslint

总的来说babel-eslint就是将不能被常规linter解析的代码转换为能被常规解析的代码

cnpm install babel-eslint --dev

3.@typescript-eslint/parser (typescript支持)

https://www.npmjs.com/package/@typescript-eslint/parser

安装

yarn add -D typescript @typescript-eslint/parser  
npm i --save-dev typescript @typescript-eslint/parser

将 TypeScript 转换为 ESTree 兼容形式的解析器，以便它可以在 ESLint 中使用。

安装 @typescript-eslint/eslint-plugin

cnpm install @typescript-eslint/eslint-plugin -save-dev

4.elisnt-config-prettier

https://github.com/prettier/eslint-config-prettier

5. @vue/cli-plugin-typescript

如果是通过 vue add typescirpt 方式安装的typescirpt 会安装 @vue/cli-plugin-typescript

https://cli.vuejs.org/core-plugins/typescript.html#injected-commands

三、配置 .eslintrc.js

1.env

环境定义了预定义的全局变量。

2.parser

ESLint 默认使用Espree作为其解析器，平常项目中我一般使用babel-eslint作为parser。

3. plugins

ESLint 支持使用第三方插件。在使用插件之前，你必须使用 npm 安装它。

plugin是一个npm包，通常输出规则。一些插件也可以输出一个或多个命名的配置。
ESLint 支持使用第三方插件。在使用插件之前，你必须使用 npm 安装它。插件名称可 以省略 eslint-plugin- 前缀。

4.rules

ESLint 附带有大量的规则。你可以通过配置文件修改你项目中使用的规则。改变一个规则设置，你必须设置规则 ID 等于这些值之一：
"off" 或 0 - 关闭规则
"warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
"error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

5.parserOptions

ESLint 允许您指定要支持的 JavaScript 语言选项。默认情况下，ESLint 需要 ECMAScript 5 语法。您可以使用解析器选项覆盖该设置以启用对其他 ECMAScript 版本以及 JSX 的支持。

ecmaVersion：指定ECMAScript版本
sourceType：设置为 "script" (默认) 或 "module"

• ecmaFeatures:
• jsx：true 启用jsx

6.extends.

官方说明网址：https://eslint.org/docs/user-guide/configuring/configuration-files#extending-configuration-files

extends可以看做是去集成一个个配置方案的最佳实践。

虽然说需要根据不同的需求、风格、规范去配置不同的eslint规则，但往往相似的项目之间需要配置的规则都是大同小异的。如果每一个项目都是重新一步步开始选择配置规则就比较显得不太人性了；这个时候就是extends体现作用的时候。

个人比较喜欢把extends理解为去集成eslint风格或者eslint插件的最佳实践，它配置的内容实际就是一份份别人配置好的.eslintrc.js。

如果使用的是vue2 建议 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.

如果使用的是vue3建议 'plugin:vue/vue3-recommended',

7.root

如果配置文件里没有"root": true这个属性，ESLint就会继续向外寻找配置文件，直到找到有"root": true的为止，所有这些配置文件的规则都会被层叠应用。若有重复的属性配置，则离文件更近的配置文件具有更高的优先级。
当想要所有项目都遵循一个特定的约定时会很有用，但还是建议给项目根目录的.eslintrc.js加上root: true

四、注意项

1.确保您eslint-plugin-html的配置中没有。该eslint-plugin-html提取从内容<script>的标签，但eslint-plugin-vue需要<script>标签和<template>标记，以区分模板和脚本在单个文件组件。

2.如果你安装了@vue/cli-plugin-eslint （打开新窗口），您应该将lint脚本添加到您的package.json. 这意味着您可以只运行yarn lint或npm run lintv

五、命令操作

参考网址：https://eslint.bootcss.com/docs/user-guide/command-line-interface

1.设置一个配置文件

./node_modules/.bin/eslint --init
运行eslint
 ./node_modules/.bin/eslint yourfile.js

eslint配置。rules规则自行补充

 // 参考网址
// vue 上eslint  https://eslint.vuejs.org/user-guide/#installation
// 官方配置网址 https://eslint.org/docs/user-guide/configuring/plugins#specifying-parser
// vue cli https://cli.vuejs.org/core-plugins/eslint.html#configuration
module.exports = {
  // 环境定义了预定义的全局变量。
  env: {
    browser: true,
    node: true,
    es6: true,
    es2021: true,
    commonjs: true,
  },
  root: true,
  extends: [
    'airbnb-base',
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    // 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
  ],
  parserOptions: {
  // "ecmaVersion": 6,//?
    ecmaVersion: 12,
    sourceType: 'module', // 设置为 "script" (默认) 或 "module"
    // ecmaFeatures:false,// 启用jsx
    // parser:"Espree"
    parser: 'babel-eslint', // ESLint 默认使用Espree作为其解析器，平常项目中我一般使用babel-eslint作为parser。
    // parser: '@typescript-eslint/parser',
  },

  plugins: [
    'vue',
    // '@typescript-eslint'
  ], // https://eslint.vuejs.org/user-guide/#faq

  //     plugin是一个npm包，通常输出规则。一些插件也可以输出一个或多个命名的配置。
  // ESLint 支持使用第三方插件。在使用插件之前，你必须使用 npm 安装它。插件名称可以省略 eslint-plugin- 前缀。
  //  "off" 或 0 - 关闭规则
  // "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
  // "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
  rules: {
  // "semi": "error",
  //   "indent": [
  //     "error",
  //     4
  //   ],
  //     "quotes": [
  //       "error",
  //       "double"
  //     ]
    // 可以用这个来实验eslint规则是否生效
    'no-console': 'error',
  },
};

六、其它

https://github.com/vuejs/eslint-config-typescript