如何禁用特定的ACE编辑器CSS模式警告规则？

Question

我的项目利用了Ace Editor（通过Brace和React-Ace）。

我们将编辑器的mode设置为"css"并将其嵌入到我们的页面中。这很好用，但是，默认情况下，我们发现一些启用的CSS规则突出显示过于严格 - 某些警告应该是“info”;一些错误应该是“警告”。

我们如何在CSS模式下禁用/启用/修改Ace编辑器用于Info，Error和Warning的验证规则集？

我相信我找到了a relevant line of code in the Ace CSS worker，但我不知道如何使用它，也不知道在哪里找到验证规则名称的详尽列表，如果我知道如何使用此功能。

下面的代码基本上是我们用来实例化反应ace组件的代码......

import brace from 'brace';
import AceEditor from 'react-ace';
import 'brace/mode/css';
import 'brace/theme/monokai';

...
  <AceEditor
    theme="monokai"
    mode="css"
    showGutter={true}
    ...
  />

Answer 1

通过a closed ACE editor issue的提示找出解决方案。

加载编辑器时，找到对“worker”实例的引用，并使用setInfoRules分隔的CSS lint规则ID列表调用setDisabledRules或"|"方法。 （对于React-Ace，刚刚加载的编辑器可以通过onLoad道具访问），

由于Ace使用的CSS linter是csslint，因此禁用/启用相关的规则ID是CSS lint。 See the CSS Lint rule list。

以下代码是我如何做到的...

const INFO_RULES = [
  // Disable "Heading (h2) has already been defined." warning
  'unique-headings',
  // Disable "Heading (h2) should not be qualified." warning
  'qualified-headings',
  'fallback-colors'
];

const DISABLED_RULES = [
  // Disable "Don't use adjoining classes." warning
  'adjoining-classes',
  // Disable "Rule doesn't have all its properties in alphabetical ordered." warning
  'order-alphabetical'
];

const onEditSessionInit = (editSession)=> {
  editSession.$worker.call('setInfoRules', [INFO_RULES.join('|')]) ;
  editSession.$worker.call('setDisabledRules', [DISABLED_RULES.join('|')]) ;
};

const CSSCodeEditor = (propse)=>
  <CodeEditor 
    mode="css"
    onLoad={(editor)=> {
      onEditSessionInit(editor.session);
    }}
    {...props} 
  />;

希望有一天这会帮助某人......