Lint 规范_lint 代码规范检测工具-CSDN博客

本文链接：https://blog.csdn.net/csdn_girl/article/details/147122761

Lint 规范是对前端代码的书写规则进行限制，属于代码检查和格式化工具。一般主要有以下几种规范形式：ESLint规范、Prettier规范、StyleLint规范。

各种Lint 规范详述

ESLint

主要职责：代码质量检查和编码风格规范
关注点：
发现潜在的代码错误和问题
强制执行编码规范和最佳实践
检查变量使用、函数调用等逻辑问题
示例规则：
未使用的变量
未定义的变量
不合理的条件判断
函数复杂度过高
配置文件

/**
 * eslintrc.cjs
 */
const config = require('@commontools/lint-config'); // 自定义的lint包

module.exports = {
  root: true,
  // 直接使用预设的Vue3+TypeScript配置
  ...config.eslint.vue3Typescript,
  
  // 项目特定的规则覆盖
  rules: {
    'vue/no-v-html': 'off',
    'max-lines': 'warn',
    'max-params': 'warn',
    'import/no-namespace': 'off',
  }
};

Prettier

主要职责：代码格式化
关注点：
统一代码格式，如缩进、空格、换行等
不关心代码逻辑和质量问题
专注于代码的"美观"
示例规则：
行宽限制
缩进风格（空格或制表符）
引号风格（单引号或双引号）
尾随逗号
配置文件

/**
 * prettierrc.js
 */
const config = require('@commontools/lint-config');

// 直接使用统一配置，可以添加项目特定的覆盖
module.exports = {
  ...config.prettier,
  
  // 项目特定的覆盖配置
  overrides: [
    {
      files: '*.vue',
      options: {
        singleAttributePerLine: false, // 不限制vue中元素属性每行展示一个
      },
    },
  ],
};

StyleLint

主要职责：CSS/SCSS等样式代码的检查
关注点：
样式代码的质量和一致性
CSS属性的顺序和规范
避免冗余和过时的CSS规则
示例规则：
颜色格式（HEX、RGB等）
选择器命名规范
属性排序
避免使用!important
配置文件

/**
 * styleLintrc.json
 */
{
  "extends": ["@eee/stylelint-config"],
  "plugins": ["@eee/color-lint-plugin"],
  "rules": {
    "no-empty-source": null,
    "number-max-precision": 8,
    "selector-class-pattern": "[a-zA-Z_-][a-zA-Z0-9_-]*",
    "ee/color_map": [
      true,
      {
        "severity": "warning"
      }
    ],
    "color-hex-case": null
  }
}

此外，还有些其他的常用lint 规范：

TypeScript的类型检查（tsconfig.json）

// tsconfig.json 示例
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

Commitlint，用于检查Git提交信息是否符合规范（commitlint.config.js）

// commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [2, 'always', [
      'feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'chore', 'revert'
    ]]
  }
};

注意 - rush 项目

需要注意的是，在 rush 项目中，子项目可以共用 monorepo 中的公共 lint 规范，而不用单独去声明。
具体方式为在 monorepo 中可以用单独一个 packages 来定义统一的 lint 规范，然后在各子项目中通过 package.json 引用该 lint 规范包，而不用单独声明 lint 文件的引用，子项目就会默认使用该统一的 lint 规范了。

如果子项目不直接引用 monorepo 中的公共 lint 规范包，各规范也会自动逐级向上找配置文件，直到找到并引用。但这种方式容易导致"幽灵依赖"，不推荐。

配置文件的查找机制

各种lint工具（ESLint、Prettier、StyleLint等）在查找配置文件时，通常遵循以下查找机制：

ESLint的查找机制
ESLint会按照以下顺序查找配置：
首先查找项目内的配置文件（.eslintrc.*、package.json中的eslintConfig字段）
如果没有找到，则向上级目录查找，直到找到配置文件或到达根目录
如果配置文件中设置了"root": true，则停止向上查找
Prettier的查找机制
Prettier的查找逻辑类似：
从当前工作目录开始查找配置文件（.prettierrc.*、prettier.config.*等）
如果没有找到，则向上级目录查找，直到找到配置文件或到达根目录
StyleLint的查找机制
StyleLint也遵循类似的模式：
从当前目录查找配置文件（.stylelintrc.*、stylelint.config.*等）
如果没有找到，则向上级目录查找，直到找到配置文件或到达根目录