是否存在用于Mobx的ESLint插件，可检测未使用Observer组件时的Store及Action违规使用？

嘿，针对你提出的两个Mobx相关ESLint需求，我来给你梳理一下可行的方案：

需求1：未使用Observer组件直接使用Store时发出警告 #

社区里已经有现成的插件可以完美解决这个问题——eslint-plugin-mobx，它内置的mobx/unobserved-access规则专门用来检测这类场景：当组件没有被observer高阶组件包裹，却直接访问Mobx Store的状态或调用其方法时，ESLint就会抛出警告。

配置步骤： #

1. 先安装插件：

npm install eslint-plugin-mobx --save-dev
# 或者用yarn
yarn add eslint-plugin-mobx --dev

2. 在你的ESLint配置文件（比如.eslintrc.js）中添加配置：

module.exports = {
  plugins: ['mobx'],
  rules: {
    // 设为"warn"是警告，设为"error"则会报错阻断构建
    'mobx/unobserved-access': 'warn'
  }
}

结合你的示例代码：

• 当你直接导出Comp1时，ESLint会因为组件未被observer包裹就访问store.number、调用store.incByOne()触发警告；
• 一旦用observer(Comp1)包裹后，警告就会自动消失。

需求2：未被Observer包裹的组件中使用Mobx Action时发出警告 #

其实上面提到的mobx/unobserved-access规则已经覆盖了这个场景！因为调用Mobx Action本质上也是和Store的交互，而未被observer包裹的组件无法响应状态变化，所以插件会把这种情况也纳入检测范围，同样发出警告。

如果需要更精细化的、只针对Action调用的检测，你可以自定义ESLint规则，但这个门槛相对高一些。一般来说，eslint-plugin-mobx的现成规则已经能满足绝大多数开发场景的需求，优先推荐使用现成方案。

内容的提问来源于stack exchange，提问作者kofyohugna