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

时间:2019-04-16 02:22:25

标签: javascript css ace-editor react-ace

我的项目使用了Ace Editor(通过BraceReact-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}
    ...
  />

1 个答案:

答案 0 :(得分:0)

借助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} 
  />;

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