npm 包 eslint-plugin-css-modules-amannn-fork 使用教程

简介

eslint-plugin-css-modules-amannn-fork 是一个能够在 ESLint 中支持 CSS Modules 的插件。它支持编写与 CSS Modules 兼容的样式代码，能帮助开发者消除大部分运行时错误。

安装

一般来说，你需要在本地安装这个包。可以使用 npm，在项目的根目录中执行以下命令进行安装：

npm i -D eslint eslint-plugin-css-modules-amannn-fork

配置

1. 在项目的根目录中新建 .eslintrc.js 文件
2. 在 rules 对象中添加以下内容：

-- -------------------- ---- -------
-
  ---------- ----------------------------
  -------- -
    ------------------------------------------ --
    --------------------------------------------- --
    --------------------------------------------- --
    ---------------------------------------------- --
    -------------------------------------------- -
      --
      -
        --------- -----------
      -
    -
  -
-

规则说明

no-unused-class

这个规则会警告你未在代码中使用的 CSS Modules 类名。

示例代码：

/* styles.css */
.root {
  background-color: #fff;
}

.button {
  font-size: 14px;
}

// script.js
import styles from './styles.css';

export default function() {
  return `<div class="${styles.root}">${styles.button}</div>`;
}

这个例子中，我们定义了 CSS 样式，并在 JavaScript 文件中通过 CSS Modules 的方式导入到代码里面。其中 styles.button 并没有被使用，会触发规则警告。

no-undefined-class

这个规则依赖于你的项目中是否启用了 CSS Modules。如果启用了 CSS Modules，它会检测未定义的 CSS 类名。如果没有启用 CSS Modules，它会警告未定义的 CSS 样式。

示例代码：

/* styles.css */
.root {
  background-color: #fff;
}

.button {
  font-size: 14px;
}

// script.js
import './styles.css';

export default function() {
  return `<div class="root">${styles.button}</div>`;
}

这个例子中，我们直接用了 root 类名，没有使用 styles.root。因为定义的样式使用的是 CSS Modules 的方式进行导入，而在代码中使用的则是普通的 CSS 类名，所以会触发规则警告。

no-duplicate-class

这个规则会检查是否有重复的 CSS 类名。

示例代码：

/* styles.css */
.root {
  background-color: #fff;
}

.root {
  font-size: 16px;
}

在这个例子中，我们定义了相同名称的类名，即 root。这个规则会检查是否有重复的类名。

no-imported-modules

这个规则会检查样式是否被导入到 JavaScript 中。

示例代码：

/* styles.css */
.root {
  background-color: #fff;
}

.button {
  font-size: 14px;
}

// script.js
export default function() {
  return `<div class="${styles.root}">${styles.button}</div>`;
}

在这个例子中，样式没有被正确导入到 JavaScript 文件中，所以会触发这个规则的警告。

class-name-format

这个规则会检查 CSS 类名的格式是否符合你指定的模式。

示例代码：

/* styles.css */
.root {
  background-color: #fff;
}

.button {
  font-size: 14px;
}

-- -------------------- ---- -------
-- ------------
-
  ---------- ----------------------------
  -------- -
    -------------------------------------------- -
      --
      -
        --------- -----------
      -
    -
  -
-

在这个例子中，我们指定了 CSS 类名格式的规则为驼峰式（camelCase），但实际上，我们定义的 CSS 类名是以横线（-）连接的方式编写的，所以会触发规则警告。

结语

eslint-plugin-css-modules-amannn-fork 为开发者提供了一种在 ESLint 中支持 CSS Modules 的插件解决方案。此插件可以帮助开发者检测大部分开发时错误，从而提高项目的代码质量和可维护性，非常值得使用。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d8881e8991b448db47e