工具 – ESLint、Stylelint、Prettier

兴杰(stooges.com.my) / 2023-07-20 / 原文

前言

以前在 Webpack 学习笔记有稍微介绍过它们。这篇是单独整理版。

参考

一文彻底读懂ESLint

你的ESLint真的需要Prettier吗？

搞懂eslint和prettier等的关系

简单介绍

ESLint 是 JS / TS 代码检查器。它用于保证代码质量，通过 2 个方式

1. 统一格式 (formating)

比如 quote 要使用 single quote 还是使用 double quote？

2. code quality

比如 function declare 了一个 parameter，但 function 内却完全没有调用到。（这通常是因为忘记移除）

这些都会被检测出来。在提交代码前我们就可以进行修改，这样就保证了代码质量。

Stylelint 也是这类检查器，它用于 CSS / Sass

Prettier 只是单纯做 formatting，没有管 code quality。但它不仅仅用于 JS、CSS，它还用在很多其它语言，比如 HTML、GraphQL、JSON 等等。

Prettier vs ESLint & Stylelint

Prettier 的 formatting 功能和 ESLint、Stylelint 是重叠的。

ESLint 比起 Prettier 比较宽松灵活，它允许我们做各做配置，而且许多时候只要格式正确就通过了，不一样要统一。

Prettier 则比较 “严格”，格式必须统，只能一种写法，而且许多格式是官方规定的，我们甚至不能修改，只能跟随官方的格式。

ESLint

Step by Step Setup

首先全局安装 eslint package （ESLint 基于 Node.js）

npm install eslint --global

然后安装 VS Code ESLint 插件，（微软推出的哦）

创建项目

yarn init

添加 TypeScript

yarn add typescript --dev
tsc --init

添加一个 index.ts

const a = '';
const b = "";
const yes = null == undefined;

我们故意同时用了 single quote 和 double quote，而且还用了不安全的 ==（JS best practice 是用 === 而不是 ==）

待会儿我们看看 ESLint 能检查出问题吗。

添加 eslint

yarn add eslint --dev

init eslint

eslint --init

这时它会问一些相关的问题。

尝试检查

eslint index.ts

报错了

这是因为 eslint --init 没有配置，它有几个问题

1. typescript 变成了 "*"，* 表示任意 version 都可以。这对 eslint 来说是对的，但对项目来说是不对的。

我们把它修正回来

yarn remove typescript
yarn add typescript --dev

2. @typescript-eslint/eslint-plugin 依赖 @typescript-eslint/parser@^5.0.0 但是它没有替我们安装

我们自己补上呗

yarn add @typescript-eslint/parser@^5.0.0 --dev

3. 在 .eslintrc.json 里，我们需要添加一个链接到 tsconfig.json 的配置。

再次允许检查

eslint index.ts

效果

error 就表示代码不过关，需要我们修改。

我们可以使用 --fix 自动修复功能

eslint index.ts --fix

效果

它只是修复一些初级的代码问题，有些复杂的代码问题依然需要我们自己检查。

代码规范和风格

上面我们使用了 standard-with-typescript 作为我们的代码规范

市场上还有其它的规范，比如 Google 的、Airbnb 的等等。当然我们也可以写自己的规范，或者修改它们的一些规范。

下面是我自己用的配置，结合了 prettier

yarn add prettier --dev
yarn add eslint-config-prettier --dev
yarn add eslint-plugin-prettier --dev

箭头是有改动的部分

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
      // Angular 也是这个配置哦
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:prettier/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module",
        "project": "./tsconfig.json"
    },
    "rules": {
      "@typescript-eslint/no-non-null-assertion": "off", // 允许使用 TypeScript 的 Non-null assertion operator
      "@typescript-eslint/no-empty-function": "warn", // 当函数没有内容时会警示
      "eqeqeq": ["error", "always"], // 强制用 === 而不是 ==
      // Prettier 是很“固执”的，我们只能做一些小小的配置
      "prettier/prettier": ["error", {
        "singleQuote": true, // Prettier 默认是 double quote，我改成 single quote
        "printWidth": 100, // Prettier 默认最长的代码是 80px width (超出就会换行)，我改成 100。
        "arrowParens": "avoid", // (value) => value 去掉不必要的括弧 value => value
        "endOfLine": "auto" // 这个为了解决 LF，CRLF，\r, \r\n 的兼容问题。
      }]
    }
}