如何利用 ESLint 规范 TypeScript 代码

ESLint 是一种 JavaScript linter,可以用来规范 JavaScript 或 TypeScript 代码,本文教你怎么在项目中快速把 ESLint 安排上。

前导

怎么写出优雅的代码是一个老生常谈的话题,这其中包含了太多内容可聊,但搞一套标准规范绝对是万里长征第一步。ESLint 致力于如何把规范落地到你的项目中,让你的代码清清爽爽。

ESLint 和 TSLint

ESLint 作为一种 JavaScript linter,它能强制帮你遵循一套特定的代码书写风格和标准,并且会在不符合标准的地方贴心地给出提示。

你可能也听说过 TSLint,很可(不)惜(错),已经挂了。原因是考虑到 ESLint 的存在,并且两个项目之间存在大量的重复工作,TSLint 团队在 2019 年宣布不再维护该项目。

也就是说,你可能会搜到很多已存的 TSLint 周边生态包,但在使用之前,你得掂量一下,它们可是没有人在维护了哦。

所以,ESLint 就成为了事实上的标准,帮你规范 JavaScript 和 TypeScript 代码。

安装依赖

在你的工程下运行下面的代码,安装 ESLint 及其它依赖包

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

.eslintrc.js

创建 .eslintrc.js 文件

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ]
}

.eslintignore

再建一个忽略文件 .eslintignore,忽略不想加入限制的文件,比如 node_modules,打包产物文件等

node_modules
dist

package.json scripts

在 package.json 文件中新建一条 lint 命令

{
  "scripts": {
    ...
    "lint": "eslint . --ext .ts",
  }
}

执行 npm run lint 试试看

假如我们的工程下只有 index.ts 文件,内容如下

console.log('Hello world!')

因为我们目前还没有创建任何规则,所以看不出什么变化。

Rules

eslint 的 rules 有三种模式,off,on 和 warn

  • “off” means 0 (turns the rule off completely)
  • “warn” means 1 (turns the rule on but won’t make the linter fail)
  • “error” means 2 (turns the rule on and will make the linter fail)

如果想禁用 console,可以这样设置

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": { 
    "no-console": 2 // Remember, this means error!  }
}

再运行 npm run lint

2:1  error  Unexpected console statement  no-console
    ✖ 1 problem (1 error, 0 warnings)

lint 报错了…

关掉 no-console

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {     "no-console": 0 
  }
}

npm run lint

世界安静了…

fix

我们可以利用 ESLint 的 fix 功能,自动修复报 warn 或 error 的代码

改造一下 package.json

{
  "scripts": {
    ...
    "lint": "eslint . --ext .ts",
    "lint-and-fix": "eslint . --ext .ts --fix"  },
}

运行 npm run lint-and-fix  可以检查和自动修复有问题代码

聊一聊原理

parser

ESLint 原理需要结合 parser 配置项来讲。

首先,ESLint 为什么需要一个 解析器? 简单来讲,ESLint 做规则校验的前提是将语言转变为抽象语法树(AST),它的校验规则是用于适配 AST 的,在遍历 AST 节点的过程中,找到该节点适配的规则,并判断是否满足规则。

plugins

ESLint 能火起来的很大原因,在于它的插件式设计,这种设计使得他能快速的响应变化。插件是什么?插件就是规则,任何插件想要在 ESLint 中生效,需要规定两点内容。

  1. 该规则针对的是 AST 的那些节点。
  2. 该节点需要满足怎样的条件。

有了这两点,ESLint 就会在遍历 AST 的过程中,找出不符合规则的节点,将其报告出来。

默认情况下,ESLint 中的规则会对 JS 进行校验,如果我们想对 React 进行校验的话,就需要增加 eslint-plugin-react 插件,如下所示,在 plugins 中增加这个插件,eslint-plugin 的前缀是可以省略的。

"plugins": [
    "react"
]

有了规则是不够的,我们还需要开启这些规则,可以在 rules 中配置,更好的方法就是在 extends 中加入以下代码。

"extends": [
    "plugin:react/recommended"
]

extends

ESLint 中的规则很多,但是默认都不会开启的,我们需要在 rules 中设定这些规则开关,这个环节非常繁琐。因此 ESLint 设计了 extends 这个字段,用于继承别的文件中已经配置好的的规则。在不加入任何插件的情况下,extends 可以配置为 eslint:recommended 或 eslint:all。recommended 是 ESLint 官方推荐的配置,校验的规则比较少,eslint:all 则会开启全部的规则校验。

如果你想了解这两者的区别,你可以去

喜欢就支持一下吧
点赞10 分享
相关推荐
  • 暂无相关文章
  • 评论 抢沙发
    头像
    欢迎您留下宝贵的见解!
    提交
    头像

    昵称

    取消
    昵称表情代码图片

      暂无评论内容