ESLint代码检查系列 ——入门篇

简介

ESLint是一个用于静态代码分析的工具,能做代码规范的检查、错误提示、代码的自动修复。

  1. 对代码进行静态分析和检测:代码风格是否一致语法错误潜在逻辑错误
  2. 集成到开发环境中,例如编辑器或构建工具,以便在编码过程中提供即时反馈和建议,提高开发人员代码质量、减少潜在的错误,并遵循一致的编码风格

基本工作原理

  1. parser:使用解析器将代码转为AST(抽象语法树)
  2. extends、plugins、rules:获取所有插件或用户定义的规则,遍历AST并执行规则
  3. 遍历完后, 将收集到的错误提示和修复
Created with Raphaël 2.3.0 初始代码 解析器 将代码转为AST 执行规则 错误提示、修复 规范的代码

属性说明

  1. root:eslint配置是否可以向父级查找,true:不能

  2. env:指定启用的环境,node:启用node环境,必须启用node环境,否则会报 ‘module’ is not defined

  3. plugins:提供代码检查和修复的能力,是一个npm包,用来增强eslint的代码检查和修复能力

    • eslint-plugin-prettier: 把 prettier 的能力赋给 eslint,让 eslint 拥有和 prettier 一样的代码格式化能力,使用时可以省略 eslint-plugin 前缀,"plugins": ["prettier"]
    • eslint-plugin-vue:使用ESLint来检测Vue文件,"plugins": ["vue"]
  4. parser:指定要使用的解析器,会把源代码转换成抽象语法树,然后再对每个节点做eslint的校验。默认解析器为espree,官方推荐的解析器中与ESLint兼容的有:

    • 检查 js 语法:esprima(不推荐)、babel-eslint、@typescript-eslint/parser(支持ts文件解析的插件)
    • 检查非 js 语法:vue-eslint-parser(支持vue文件解析的插件)、@typescript-eslint/parser
  5. parserOptions:解析器配置,常用来负责解析es语法,默认支持es5

    • sourceType - 设置为 script(默认) 或 module(如果你的代码是 ECMAScript 模块),webpack模块打包需要把sourceType设置成为module
    • ecmaVersion:按照 ecma 哪个版本语法做检查。例如:设置为6则支持es6语法,但不支持新的 ES6 全局变量或类型,如Set,需要在env属性设置es6: true就支持新的 ES6 全局变量和类型了
  6. extends:用于继承某些基础配置,可以是字符串,多个就用数组,每个配置继承它前面的配置。有3种规则配置:

    • eslint内置规则配置:实际配置文件在 eslint/conf 中可以找到
      • eslint:recommended:继承Eslint中推荐的规则
      • eslint:all:继承Eslint中所有的核心规则
    • 自定义的规则配置:(以eslint-config-开头的npm包),如eslint-config-standard,是个流行的风格指南,写standard 即可
    • 插件中提供的规则配置:(以eslint-plugin-开头的npm包),如eslint-plugin-vue,使用ESLint来检测Vue文件,可写plugin:vue/essentialplugin:vue/recommendedplugin:vue/vue3-recommended
  7. rules:自行配置代码规范,会覆盖基础配置,常用规则说明:

    • 关闭规则:off 或 0
    • 开启规则,警告:warn 或 1
    • 开启规则,错误:error 或 2
  8. globals:定义全局变量,否则会报 no-undef 错误。

  9. overrides:设置某些文件,禁用部分检查,如files匹配到的那些文件,均关闭 no-unused-expressions 检查。

    “overrides”: [ {
    “files”: [“-demo.ts",".spec.ts”],
    “rules”: { “no-unused-expressions”: “off” }
    } ]

使用

  1. 安装依赖包eslintyarn add eslint -D
  2. 新建配置文件.eslintrc.js
  3. 在scripts中新增lint命令:"lint": "eslint ./src/**/*.ts"
  4. 在终端中执行npm run lint,即可自动检查代码中的错误,可加上参数 --fix 进行自动恢复 "lint-fix": "eslint --fix ./src/**/*.ts"

你可能感兴趣的:(前端,javascript,ecmascript,typescript,前端)