【前端工程化】六：前端规范化标准及工具ESLint等基本使用

ESlint的基本使用

• 最为主流的js lint工具 监测js代码质量
• ESLint很容易统一开发者的编程风格
• ESLint可以帮助开发者提升编码能力

ESLint安装

• 初始化项目
• 安装ESLint模块为开发依赖npm install eslint -D
• 通过CLI命令验证安装结果npx eslint -v

ESLint快速上手

• 编写“问题”代码
• 使用eslint执行检测，最新版本的eslint可以不需要配置配置文件npx eslint .\test.js --fix自动修复问题代码
• 完成eslint使用配置， npx eslint --init进入初始化流程，用来初始化eslint的配置文件

ESLint配置文件解析

globals： 设置全局变量

env： 根据环境判断成员是否可用，例如promise, env可以设置的环境非常多，也可以开启多个环境

extends： 继承一个共享配置

parser： 配置语法解析器，例如ts, parser: @typescript-eslint/parser

parserOptions： 设置语法解析器相关配置，例如控制是否允许使用某个ES版本，该配置只影响语法检测，比如let const，不代表某成员是否可用

souorceType： ecmaVersion < 2015的时候sourceType不支持module

rules： 每个规则的开启或关闭，off/0关闭，warn/1发出警告，error/2报错

plugins： 插件，例如针对react规则的插件： npm install eslint-plugin-react

// 实例配置文件
module.exports = {
   
  'env': {
   
    'browser': true,
    'es2021': true
  },
  'extends': [
    'plugin:react/recommended',
    'standard'
  ],