1

我的项目使用Ace 编辑器（通过Brace和React-Ace）。

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

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

我相信我在 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}
    ...
  />
4

1 回答 1

4

借助已关闭的 ACE 编辑器问题的提示找到了解决方案。

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

由于 Ace 使用的 CSS linter 是csslint与禁用/启用相关的规则 ID，因此是 CSS lint。请参阅 CSS Lint 规则列表。

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

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

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

于 2019-04-16T03:53:37.897 回答