Как отключить определенные правила редактирования CSS-режима редактора ACE?

Question

В моем проекте используется Ace Editor (через Brace и React-Ace ).

Мы установили mode редактора на "css" и вставили его на нашу страницу. Это работает просто отлично, однако по умолчанию мы находим некоторые из включенных подсвечивающих правил CSS слишком строгими - некоторые предупреждения должны быть «info»; некоторые ошибки должны быть «предупреждениями».

Как мы можем отключить / включить / изменить набор правил проверки, используемых для информации, ошибок и предупреждений редактором Ace в режиме CSS?

Мне кажется, я нашел соответствующую строку кода в Ace CSS работнике , но я не уверен, как ее использовать, и где найти исчерпывающий список того, что такое правило проверки имена, если я знаю, как использовать эту функцию.

Приведенный ниже код, по сути, является тем, что мы используем, чтобы создать экземпляр компонента ace 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

Разобрался с решением благодаря подсказке от закрытой проблемы редактора ACE .

Когда редактор загружается, найдите ссылку на экземпляр «работника» и вызовите либо методы setInfoRules, либо setDisabledRules с отдельным списком идентификаторов правил lint-правил CSS "|". (Для React-Ace только что загруженный редактор доступен через onLoad prop),

Поскольку используемым Ace CSS-линтером является csslint, идентификаторы правил, относящиеся к отключению / включению, - это CSS-линты. См. Список правил 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} 
  />;

Надеюсь, это поможет кому-нибудь когда-нибудь ...