eslint 从0到1

2021-06-29 11:17:21 浏览数 (1)

简介

ESlint 可组装的javaScript和JSX检查工具, 提供一个插件化的javascript代码检测工具。

背景

平常开发中，难免出现笔误，书写不规范，多人开发代码风格迥异等问题。给代码留下难以察觉的问题， 此时就需要 eslint 这类代码检查工具，规范我们的代码。

  • eslint 版本7.29.0

DEMO目录

  • .eslintrc.js
  • .eslintignore
  • src
    • index.ts

安装

代码语言：javascript复制
// 全局安装
npm i -g eslint
// 本地安装，本地安装无法使用eslint命令
npm i -D eslint

初始化

代码语言：javascript复制
eslint --init
// or
npx eslint --init

image.png

image.png

image.png

image.png

image.png

image.png

根据命令行提示， 选择适合我们项目的eslint基础配置。将在目录下生成 。.eslintrc.* 配置文件。

设置package.json

代码语言：javascript复制
{
  "script": {
    // 指定校验的目录, 如果全局安装eslint，也可直接调用, eslint ./src
    "eslint": "eslint ./src" 
  }
}

现在可以调用yarn eslint 查看校验结果。

常用命令行

  • -c 指定配置文件
  • -- env 指定环境
  • --rule 指定规则
  • -- fix 是自动否修复错误

其他

.eslintrc.* 配置文件

通过配置文件控制文件校验的规则。

基础配置项

  • env 指定包或项目的运行环境

针对不同的允许环境，存在不同的全局变量, 例如 浏览器中的 window， node 中的 process.env 等。 设置准确的环境，便于eslint 正确查询变量来源

代码语言：javascript复制
{
    "env": {
        "browser": true, // 支持浏览器环境
        "node": true // 支持 node 环境
    }
}
  • parserOptions 编译选项

设置需要支持的语言类型或模式

代码语言：javascript复制
{
  "parserOptions": {
        "ecmaVersion": 6, // 需要支持的ECMAScript 版本 
        "sourceType": "module", // 模块类型
        "ecmaFeatures": { // 其他语言特性
            "jsx": true, // 支持 jsx
            "globalReturn": false, // 全局作用域下使用 return
             ...
        }
   },
}
  • rules 校验规则

通过为规则设置不同的等级或值，控制我们需要校验的语法或代码格式。

代码语言：javascript复制
{
    'semi': 'off', // 关闭分号结尾
    'no-unused-vars' 'warn', // 未使用变量，警告提示
    'no-undef': 'error', // 未定义或隐式全局变量, 报错提示
    'linebreak-style': ['error', 'windows'], // 使用windows 换行符号, 否者报错。  通过数据设置规则详细属性
}

rules 等级值设置方式

    • 'off' | 0 禁用该规则
    • 'warn' | 1 不符合规则时，警告提示
    • 'error' | 2 不符合规则时, 报错提示

rules 属性设置 [规则等级值, 规则属性值] 例如:

代码语言：javascript复制
lines-around-comment: ["error", { "beforeLineComment": true }],
'space-before-blocks': ['error', 'never'],
  • globals 全局变量

该属性允许我们设置自定义全局变量。

代码语言：javascript复制
{
  globals: {
    'version': 'readonly', // 添加全局版本号，且该值为只读
     'globalCache': 'writable' // 添加全局缓存，且该值可读写
  }
}
  • extends 规则配置继承

允许我们继承其他eslint 配置规则文件或npm规则包, 例如: eslint-config-airbnb 一般独立eslint 规则包都以eslint-config 为包前缀, 实际配置时可省略

代码语言：javascript复制
 "extends": [
    "eslint:recommended", // eslint: 扩展规则设置, 并设置为推荐。 
    "plugin:@typescript-eslint/recommended", // plugin: 导入插件内的规则文件, 这里表示， 查询插件 @typescript-eslint, 并导入规则文件 recommended
    "@vue/airbnb", // 规则包, 等价于 @vue/eslint-config-airbnb， @vue 为包集合目录
    "./node_modules/coding-standard/eslintDefaults.js", // 指定具体规则文件目录
  ]
  • plugins 插件

插件一般用来扩展新的校验规则，例如： @typescript-eslint 新增 ts 的语法校验规则

代码语言：javascript复制
"plugins": [
    "@typescript-eslint"
  ],

进阶配置项

  • parser 指定解析器

如何解析js代码

代码语言：javascript复制
{
  "parser": "esprima"
}
  • processor 处理器

从其他类型文件中提取或转换 js 代码

代码语言：javascript复制
{
   "processor": "a-plugin/a-processor"
}
  • settings 共享设置

该设置将作用于所有规则

代码语言：javascript复制
{
    "settings": {
        "sharedData": "Hello"
    }
}
  • overrides 针对不同文件的独立配置

某些情况下， 我们需要针对不同类型的文件设置不同的校验规则, 就可以用改该属性

代码语言：javascript复制
 overrides: [
    {
      files: [
       // 为测试文件设置 jest 环境
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)',
      ],
      env: {
        jest: true,
      },
    },
  ]
  • root 是否停止向上查询
代码语言：javascript复制
{
  root: true // 停止向父级目录中寻找配置文件
}

层叠配置， 配置优先级

  • 默认 eslint 将遍历目录内的配置文件直到根目录, 更具目录层级，使用多个配置的合集。 距离目标文件越近的配置，优先级越高。 例如 子目录 > 父目录 > 根目录。
  • 如果同级目录下存在 package.json, .eslintrc.* , package.json 内的配置将被忽略
  • 可通过配置属性root 修改层叠规则

eslintignore 忽略文件

某些目录或文件不要做校验时，可在在目录下新增.eslintignore 文件 ， 写入需要忽略的目录或文件

代码语言：javascript复制
// .eslintignore
node_modules/
dist/
lib/
bin/

eslint 规则注释

有的情况下， 我们需要针对具体的代码指定规则。例如: 忽略部分为暂时未使用的变量。 这里可以使用规则注释

代码语言：javascript复制
/* eslint-disable */ 忽略当前文件， 既不对该文件做


/* eslint-disable no-alert, no-console */ 禁用指定规则


// 禁用单行 
alert('foo'); // eslint-disable-line


// eslint-disable-next-line
alert('foo');


alert('foo'); // eslint-disable-line no-alert

vscode eslint 配置

VSCode合理配置ESLint Prettier

eslint json java javascript

0 人点赞