@bhollis/eslint-plugin-cs-模块

此插件旨在帮助您在使用 Cs- 模块时追踪问题 。 它显示您是否在js中使用一个不存在的cs/css/ less class,或者您是否忘记使用您在cs/css/ less中声明的一些类.

这是伪造的版本 https://github.com/atfzl/eslint-plugin-cs-modules 页面存档备份,存于互联网档案馆 与最近版本的 css-loader 兼容,特别是 namedExports: true。它也与ESLint的平面配置兼容.

规则

• css-modules/no-unused-class: 您必须使用 Cs/ Css/ less 文件中定义的所有类 .

如果您还想要按旧样标出一个类, 请在文件上方使用此注释

/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['container'] }] */

其中容器为您想要标记的 cs 类. 在数组中添加所有此类类 .

如果你使用 camelCase 选项 css-loader,您也必须启用此插件

/* eslint css-modules/no-unused-class: [2, { camelCase: true }] */

• css-modules/no-undef-class:您不得使用非现有类别,也不得使用未出口的财产 : 导出关键字。 。 。 .

如果你使用 camelCase 选项 css-loader,您也必须启用此插件

/* eslint css-modules/no-undef-class: [2, { camelCase: true }] */

安装

npm i --save-dev @bhollis/eslint-plugin-css-modules

用法 :

// eslint.config.js
import { defineConfig } from "eslint/config";
import cssModules from "@bhollis/eslint-plugin-css-modules";

export default defineConfig([
  cssModules.configs.recommended
    {
        files: ["**/*.jsx"], // any patterns you want to apply the config to
        plugins: {
            'css-modules': cssModules,
        },
        extends: ["css-modules/recommended"],
    },
]);

你也可以个别修改规则。 例如,如果你使用 骆驼 Case 选项 :

// eslint.config.js
import { defineConfig } from "eslint/config";
import cssModules from "@bhollis/eslint-plugin-css-modules";

export default defineConfig([
    {
        files: ["**/*.jsx"], // any patterns you want to apply the config to
        plugins: {
            'css-modules': cssModules,
        },
        rules: {
      "css-modules/no-unused-class": [2, { "camelCase": true }],
      "css-modules/no-undef-class": [2, { "camelCase": true }]
    },
    },
]);

骆驼Case 选项有 4 个可能的值, 参见 css- loader# 骆驼目 说明:

true | "dashes" | "only" | "dashes-only"

指定基准路径

您可以通过 eslint.config.js 中的插件设置为基础目录指定路径 。 插件用于解决绝对( S) CSS 路径 :

// eslint.config.js
import { defineConfig } from "eslint/config";
import cssModules from "@bhollis/eslint-plugin-css-modules";

export default defineConfig([
    {
        files: ["**/*.jsx"], // any patterns you want to apply the config to
        plugins: {
            'css-modules': cssModules,
        },
        settings: {
      'css-modules': {
        basePath: "app/scripts/..."
      }
    },
    },
]);

屏幕相片

   1:8   error  Unused classes found: container  css-modules/no-unused-class
   5:17  error  Class 'containr' not found       css-modules/no-undef-class
  10:26  error  Class 'foo' not found            css-modules/no-undef-class

秒数 :

/* .head is global, will not be used in js */
:global(.head) {
  color: green;
}

.container {
  width: 116px;

  i {
    font-size: 2.2rem;
  }

  .button {
    padding: 7px 0 0 5px;
  }
}

.footer {
  color: cyan;
}

谢谢

• 这是从 eslint-plugin-css-modules。 。 。 .