前端 Linting 工具发展史

前端 Linting 工具发展史

Prerequisities

ESLint 在前端 Lint 工具中占据绝对领先地位,Standard 是一个主流且严格的 Lint 约束规则集。

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter

JavaScript Standard Style

ESLint 在 v8.21.0 版本之前,配置的方式较为混乱,在 v8.21.0 版本及之后,对配置方式进行了重构,重构之后的配置方式更加简洁优雅。

ESLint's new config system, Part 1: Background - ESLint - Pluggable JavaScript Linter

ESLint's new config system, Part 2: Introduction to flat config - ESLint - Pluggable JavaScript Linter

ESLint's new config system, Part 3: Developer preview - ESLint - Pluggable JavaScript Linter

Standard 基于 ESLint 开发,并且可以作为一个 Lint 工具单独使用,但如果只是想使用 Standard 的规则集,保留 ESLint 的灵活配置能力,可以使用以下两个 ESLint Config Preset,对于 JavaScript 文件,使用 eslint-config-standard 即可,对于 TypeScript 文件,使用 eslint-config-standard-with-typescript ,后者还需要进行一些额外的配置。

GitHub - standard/eslint-config-standard: ESLint Config for JavaScript Standard Style

GitHub - standard/eslint-config-standard-with-typescript: An extension of eslint-config-standard, made for TypeScript.

TypeScript ESLint

不同于 JavaScript 和 TypeScript 文件,Vue 的语法不伦不类,在与 ESLint 结合使用的时候更麻烦一点,Vue Core 官方提供了一份 Style Guide,虽然文档自称有点过时(未同步至 Vue3),但大多数内容仍然适用。

Style Guide | Vue.js

GitHub - vuejs/vue-eslint-parser: The ESLint custom parser for .vue files.

Introduction | eslint-plugin-vue

Vue ESLint Parser 帮助 ESLint 理解 Vue SFC 文件,并支持将 SFC 中的 Script 和 Template 等进行分别处理。ESLint Plugin Vue 基于 Vue ESLint Parser 的解析结果对 Style Guide 进行检查。

GitHub - zhangyuang/standardjs-vue: combine standardjs with .vue|js|ts files

这是一份做得不错的 Vue3 + TypeScript + ESLint + Standard 配置示例。

Getting Started

以 Vue 项目为例,首先需要下载必要的依赖:

pnpm add eslint typescript -D
pnpm add eslint-config-standard eslint-plugin-import eslint-plugin-n eslint-plugin-promise -D
pnpm add @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-standard-with-typescript -D
pnpm add eslint-plugin-vue vue-eslint-parser -D