Webpack5学习 --- ESLint

ESLint

ESLint是一个静态代码分析工具(Static program analysis，可以在没有任何程序执行的情况下，对代码进行分析)

ESLint可以帮助我们在项目中建立统一的团队代码规范，保持正确、统一的代码风格，提高代码的可读性、可维护 性

ESLint的规则是可配置的，我们可以自定义属于自己的规则

ESLint在分析的时候，是依赖JS编译器的，通过JS编辑器，ESLint将我们编写的代码进行词法分析和语法分析

生成对应的AST树，ESLint通过遍历AST树对代码进行合法性校验，并将对应的警告和错误提示给我们

安装

# 安装
npm install eslint -D

# 创建ESLint的配置文件 --- 也就是ESLint按照什么样的规则进行校验
# 根据指示 一步步配置，会在项目的根目录下生成.eslintrc.js（后缀还可以是yaml，json）
# .eslintrc.js是一个配置文件，其中记录这我们之前所有选择的配置项
npx eslint --init

.eslintrc.js

module.exports = {
  env: { // 项目运行环境
    browser: true, // 浏览器端
    commonjs: true, // 支持CJS
    es2021: true, // 支持ES2021及之前的所有语法
  },
  
  // 值可以是字符串或者数组(多个)
  extends: [ // 继承，即规则继承自那些规则（这些规则会被合并到自定义的规则中，可以认为是规则的扩展）
    'plugin:vue/essential', // vue的基本规则
    'airbnb-base', // Airbnb的校验规则
  ],
  
  // 使用什么解释器，可以作为顶层属性配置也可以作为parserOptions的子属性进行配置
  // parser: '@typescript-eslint/parser',
  
  // 解析器的相关信息， 可以指定ESMAScript的版本、sourceType的类型
  parserOptions: { 
    ecmaVersion: 12, // 使用的ECMA的版本
    // 使用什么样的解释器，默认是espree，这里是@typescript-eslint/parser，因为要对TS规则进行校验
    parser: '@typescript-eslint/parser', 
  },
  
  plugins: [ // 插件列表
    'vue', // eslint-plugin-vue@latest的简写
    '@typescript-eslint',
  ],
  
  // 用户自定义规则数组 --- 自定义规则的优先级最高
  rules: { 
  },
};

使用

在命令行中使用

# 在命令行中使用ESLint对代码进行校验
npx eslint ./src/index.js

可以在.eslintrc的rules对象中自定义用户自己的规则

用户自定义规则的优先级高于插件中配置的规则

rules: {
  // 规则名: 值
  // 值可以是数字也可以是字符串
  // 可选值有三个
  // 1. off 关闭 对应数字0
  // 2. warn 警告 对应数字1
  // 3. error 错误 对应数字2
  semi: 'off',
  'no-console': 0, // ==> 可以使用console 
  'comma-dangle': 0, // ==> 对象最后一位不需要加上分号
  quotes: [ // ==> 对于引号使用的配置
    'error', // 错误的时候，提示级别
    // 每一个规则可以配置的值不同，具体可以查阅文档
    // https://eslint.org/docs/rules/
    'single' // 修改默认的校验规则
  ]
}

在构建工具中集成

# 安装
npm install eslint-loader -D

module: {
  rules: [
    {
      test: /\.js$/,
      use: [
        // 这两个loader的先后顺序没有严格限制
        // 因为eslint-loader的规则校验更多的是警告形式的内容，并不会阻止代码的实际编译和执行
        'babel-loader',
        'eslint-loader'
      ],
    }
  ]
}