@ fulstory/eslint-plugin-annotate- react 页面存档备份,存于互联网档案馆

为 React 组件添加“ 数据属性” 的 ESLint 插件 。 此插件的目的是自动制作 Css 选择器. 以下是一个例子:

const MyComponent = () => (
  <div />
);

此插件将自动修正并添加 data-component 向 div 显示 :

const MyComponent = () => (
  <div data-component="MyComponent" />
);

此插件的用意是不被太评价 。 一般来说,这种方法是在有明显的方法时向开发者建议添加"数据组件",但在有疑问的情况下,插件会倾向于安静. 点击以了解更多 涉及的案件。 。 。 .

说明: 此插件无法保证 data-component 如果顶级元素是另一个回放组件,道克会实际到达DOM节点. 为了有效工作,确保你身体正常 使用 JSX 扩展语法转发道具。 。 。 .

安装

你首先需要安装 ESLint 语录数字 :

npm i eslint --save-dev

下一个,安装 @fullstory/eslint-plugin-annotate-react数字 :

npm install @fullstory/eslint-plugin-annotate-react --save-dev

使用量

添加 @fullstory/eslint-plugin-annotate-react 到您的插件区 .eslintrc 配置文件 。 你可以省略这个 eslint-plugin- 前缀 :

{
  "plugins": ["@fullstory/annotate-react"]
}

然后在规则章节下配置您想要使用的规则 .

{
  "rules": {
    "@fullstory/annotate-react/data-component": "error"
  }
}

维护此插件

测试可以使用

npm run test

支持的规则

@ fulstory/ 注释- react/ data- 组件

.

释放

运行此命令以缓冲版本, 按下标记, 并在 GitHub 上创建发布 :

npx np <patch | minor | major> --no-publish --no-tests