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

Question

我的元素使用了 Ace Editor (通过 Brace 和 React-Ace )。

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

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

我相信我已经找到了 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 或 setDisabledRules 方法> CSS lint 规则 ID 的分隔列表。 (对于 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} 
  />;

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