如何使用 Eslint 规则获取 JSX 属性值

Question

我想对 JSX 属性值应用 eslint 规则。 例如，我有一个具有某些属性的组件

<Component
    attribute1="abc-efg"
    />

在上面的示例中，我想放置一个规则，该规则将检查 attribute1 是否具有小写形式的值，如果该值是其他形式，则将抛出该错误。

我尝试过：@typescript-eslint/naming-convention 但无法实现任何目标。

Answer 1

要强制执行检查 JSX 属性值是否为小写和短横线大小写的规则，您可以使用 eslint-plugin 和 @typescript-eslint 库创建自定义 ESLint 规则。设置方法如下：

// .eslintrc.js or eslint.config.js

module.exports = {
  // Other ESLint configurations
  plugins: ['@typescript-eslint'],
  overrides: [
    {
      files: ['*.tsx', '*.jsx'], // Apply rule to JSX and TSX files
      rules: {
        'jsx-attributes/lowercase-kebab-case': ['error', { allowedAttributes: ['attribute1'] }],
      },
    },
  ],
};

设置规则后，在项目中运行 ESLint 来强制执行规则： eslint --ext .jsx,.tsx src