js：ESLint

开始

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。

• ESLint 使用 Espree 解析 JavaScript。
• ESLint 使用 AST 去分析代码中的模式。
• ESLint 是完全插件化的。每一个规则都是一个插件并且可以在运行时添加更多的规则。

使用

• 1、安装依赖

  npm install eslint babel-eslint eslint-plugin-import eslint-config-airbnb-base -D
  

  其中，
  babel-eslint 是一个对Babel解析器的包装，使其能够与 ESLint 兼容；
  eslint-plugin-import 是运行规则集所必须的，对于 Vue 项目，可以额外添加 eslint-plugin-vue。

  注意：为了更好的体验，建议安装 ESLint 插件。

• 2、创建配置文件 .eslintrc.js 并放置在项目的根目录下面：

  module.exports = {
    root: true,
    parserOptions: {
        parser: "babel-eslint"
    },
    env: {
        browser: true
    },
    extends: ["airbnb-base"]
  }
  

对于 Vue3 + TS 可以使用以下配置：

  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  }

• 3、在 package.json 的 scripts 字段里面添加三个脚本：

  "lint": "eslint **/*.js",
  "lint-html": "eslint **/*.js -f html -o ./reports/lint-results.html",
  "lint-fix": "eslint --fix **/*.js"
  

  lint：检查所有 js 文件的代码；
  lint-html：将检查结果写入一个网页文件./reports/lint-results.html；
  lint-fix：自动修正某些不规范的代码。

  运行静态检查命令：

  npm run lint
  

  运行自动修正错误：

  npm run lint-fix
  

• 4、修改 ESLint 规则，编辑 .eslintrc.js：

  module.exports = {
    root: true,
    parserOptions: {
        parser: "babel-eslint"
    },
    env: {
        browser: true
    },
    extends: ["airbnb-base"],
    rules: {
        semi: [2, "never"],
        "no-console": "off"
    }
  }
  

• 5、在项目根目录创建一个 .eslintignore 文件告诉 ESLint 去忽略特定的文件和目录。

  # /node_modules/* and /bower_components/* in the project root are ignored by default
  # Ignore built files except build/index.js
  
  build/*
  !build/index.js