关于工程中StyleLint、Eslint的一些问题梳理

前言

项目中会有一些 styleLint、eslint的卡点，是怎么实现的呢？

1. Husky

当你执行像 git commit 这样的命令时，Git 实际上会在内部查找并执行位于你项目的 .git/hooks 目录中的命名对应的脚本文件。默认情况下，这些脚本是不会做任何事情的。 Husky 的作用就是在这些 hooks 脚本中注入你定义的任务，这样当 Git 操作触发对应的 hook 时就会运行 Husky 定义的任务。项目中就设置了2个hooks，分别会在 commit-msg 和 commit 之前做一些校验。 "husky": { "hooks": { "commit-msg": "commitlint .commitlintrc.js -E HUSKY_GIT_PARAMS", "pre-commit": "lint-staged" } },

2. Lint-staged

Lint-staged 可以在 git commit 之前运行 linters 来检查你的 staged files。这就意味着只有被修改并添加到暂存区的文件才会被 check，这样你就不必等待 linter 去检查整个项目可以看到，在项目中lint-staged用eslint对tsx,ts文件，用stylelint对css,scss文件进行了分别进行了lint

json 复制代码

"lint-staged": {
  "*.{tsx,ts}": [
    "eslint --ext .tsx,.ts"
  ],
  "*.{css,scss}": [
    "stylelint"
  ]
},

3. Eslint

Eslint再熟悉不过了。Eslint 是一个开源的 JavaScript 代码检查工具，被用来识别和报告在 JavaScript 代码中发现的模式。它不仅可以检查基本的语法错误，还可以根据你设定的规则，检查代码风格和非错误性问题，比如变量是否被定义但未使用，或函数是否被定义但未调用等。 3.1 配置文件的查找顺序搜索的优先顺序是 .eslintrc.js .eslintrc.yaml .eslintrc.yml .eslintrc.json .eslintrc package.json文件中的eslintConfig 如果找不到就，ESLint 就会开始在父级目录查找，直到根目录，或者找到一个含有 "root": true 属性的配置文件为止。此属性可以阻止ESLint向上查找。 3.2 项目中的eslint自动修复这个eslint的自动修复能力是vscode自带的吗？需要额外安装vscode插件吗？

4. StyleLint

StyleLint可以用来检查你的 CSS 代码是否满足一定的规则（比如缩进、空格等格式问题），避免错误（比如无效的十六进制颜色，或者重复的选择器）。它支持 CSS, Less, Sass, SCSS, SugarSS 及与其相关的处理器，在某些方面，它就像是专门针对 CSS 的 ESLint。

5. Prettier

Prettier 是一个知名的代码格式化工具，目的是使开发者能够专注于写代码，而不是一直纠结于代码的格式问题。 Prettier 支持广泛的文件格式，包括 JavaScript、TypeScript、HTML、CSS、SCSS、MD，甚至 GraphQL、YAML 等等。而不像 ESLint 主要用于处理 JavaScript, TypeScript 这些逻辑性的文件，stylelint 主要用于处理 CSS 文件。 Prettier和Eslint经常会有一些格式冲突，可以使用 eslint-plugin-prettier 和 eslint-config-prettier 这两个插件。

eslint-plugin-prettier 是一个 ESLint 插件，它会把 Prettier 作为 ESLint 的一个规则运行，这样你就可以使用 ESLint 的 --fix 选项来修复格式问题了
eslint-config-prettier 是一个 ESLint 的配置，它会关闭所有和 Prettier 冲突的 ESLint 规则，这样就可以避免 ESLint 和 Prettier 各自的规则相互覆盖

6. .vscode/setting.json

json 复制代码

{
  // 这表示对于 json 文件，你设置了使用 VSCode 自带的 json 功能作为默认的格式化工具。
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  // 启用了 ESLint 和 Stylelint。
  "eslint.enable": true,
  "stylelint.enable": true,
  // 这意味着当你保存文件时，VSCode 会尝试自动应用 ESLint 和 Stylelint 的修复建议。
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.fixAll.stylelint": "explicit"
  },
  // 取消保存时自动格式化的选项。
  "editor.formatOnSave": false,
  // 这个设置了用 ESLint 验证 JavaScript 和 TypeScript 文件
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
  ],
  // 用 Stylelint 验证 CSS、Less 和 SCSS 文件。
  "stylelint.validate": [
    "css",
    "less",
    "postcss",
    "scss",
    "sass"
  ],
  // 配合某个拼写检查插件使用的，"adlab", "DOUSHOP", "Formily" 这三个词被添加到了词库中，拼写检查时会它们视为正确的拼写。
  "cSpell.words": [
    "adlab",
    "DOUSHOP",
    "Formily"
  ],
}

这个文件应该是一个针对 VSCode 的配置文件，主要用于设置你的代码编辑器的一些行为。

这表示对于 json 文件，你设置了使用 VSCode 自带的 json 功能作为默认的格式化工具。
启用了 ESLint 和 Stylelint
这意味着当你保存文件时，VSCode 会尝试自动应用 ESLint 和 Stylelint 的修复建议。
取消保存时自动格式化的选项
设置了用 ESLint 验证 JavaScript 和 TypeScript 文件
用 Stylelint 验证 CSS、Less 和 SCSS 文件。
cSpell:配合某个拼写检查插件使用的，"adlab", "DOUSHOP", "Formily" 这三个词被添加到了词库中，拼写检查时会它们视为正确的拼写。

Q&A

为什么跑eslint的时候，没有校验ts的错误？ eslint只会校验格式和语法，不会校验ts的报错，那底层的实现原理呢？都是基于ast的吗？
为什么使用WebStorm的时候，不会自动修复格式，会把错误的style格式提交上去？
为什么在某位同学的WebStorm编辑器上，把#fff调整成#ffffff提交的时候会报错，改成#ffffff提交的时候也会报错？