Question

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

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

我们如何在CSS模式下禁用/启用/修改Ace编辑器用于信息，错误和警告的验证规则集？

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

下面的代码本质上是我们用来实例化react 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皮棉规则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} 
  />;

希望这有一天能对某人有所帮助...

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

1 个答案: