什么是linter

linter 是一种帮助您改进代码的工具。它通过分析我们的源代码来为我们找出问题。在前端，我们目前使用到的最多的是 stylelint 与 eslint ，前者是对我们的css、less、sass代码进行检查，后者则是针对我们的js、ts代码进行检查

使用linter

创建项目

mkdir linter
cd linter
pnpm init
mkdir src
touch src/index.ts

styleLint

安装：

pnpm install --save-dev stylelint stylelint-config-standard
touch .stylelintrc.json

配置配置文件

{
  "extends": "stylelint-config-standard"
}

其他

styleLint还可以通过自定义rules或者plugins来调整，比如上面我们继承的stylelint-config-standard，其实就是一组已经定义好的rules，详细的rules规则可以在这里查阅到：stylelint.io/user-guide/… 。当然，我们更多的时候是直接继承前人已经定义好的规则集，比如你使用sass，可能会用到stylelint-config-standard-scss，你可以在这里找到一些很棒的配置或者插件，根据你们团队的需求来进行选择github.com/stylelint/a…

eslint

安装：

pnpm install eslint --save-dev

配置：

配置配置文件可以自行配置，eslint也提供了命令行工具来自动为我们创建，这里我们推荐使用命令行工具创建，因为它会根据你的选择，自动为你安装需要的依赖，省去了手动配置安装的过程，命令如下：

pnpm create @eslint/config

命令执行过程中会问你几个问题，根据项目据实回答就好

这一系列完成后，我们会生成这样一份配置文件：

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "airbnb-base"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
}

这里需要注意的是，如果你使用typescript，那需要手动安装下typescript，命令如下：

pnpm install typescript -D

与prettier集成

安装prettier

pnpm install --save-dev --save-exact prettier

创建配置文件

echo {}> .prettierrc.json

处理stylelint、eslint与prettier的冲突

pnpm install --save-dev eslint-config-prettier stylelint-config-prettier

{
  "extends": [
    // other configs ...
    "stylelint-config-prettier"
  ]
}

{
  "extends": [
    // other configs ...,
    "prettier"
  ]
}

git hooks

运行如下命令即可：

pnpm install --save-dev husky lint-staged
npx husky install
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npx lint-staged"

源码地址：

ps：这里由于多个文章源码都放在一起了，就没实现hooks部分
github.com/fengluoX/ca…

如何为前端项目集成linter