DEV Community: MariannaKhanina

Display: contents

MariannaKhanina — Thu, 15 Feb 2024 09:33:10 +0000

Из документации:

display: contents;
Браузеры удаляют любой элемент со свойством display, имеющим значение contents из дерева доступности. Это приводит к тому, что элемент (но не его дочерние элементы) больше не будут восприниматься технологиями чтения экрана. Дочерние элементы становятся дочерними элементами элемента следующего уровня в DOM.

Пример использования
В блоке располагаются строковые элементы двух типов.
В целях тестирования понадобилось обернуть набор элементов каждого типа отдельным span (у которого проставлен data-testid для тестирования). При этом требуется, чтобы верстка эти span как бы не учитывала и вела себя так, будто их вовсе нет, что бы элементы двух типов просто шли друг за другом. Для этого у span-оберток достаточно проставить свойство display: contents;

Изменить стиль оформления сообщения, выводимого console.log

MariannaKhanina — Thu, 25 Jan 2024 15:22:18 +0000

Выводимому в консоль значению можно задать стиль оформления добавив в начало текста сообщения (первого аргумента) символы %c, а вторым аргументов добавив строку с описанием css-стилей.
Например:

console.log('%cочень необычный лог', 'color: #00FF00; background: #4B0082; font-family: "Times New Roman"; font-size: 18px; padding: 10px;');

Результат:

Настройка корректной работы eslint в VS Code, когда .eslintrc.js располагается не в корневой директории.

MariannaKhanina — Thu, 25 Jan 2024 14:32:38 +0000

В settings.json добавить правило

"eslint.workingDirectories": [{ 
    "directory": "/path/to/directory/with/eslintrc_file", 
    "changeProcessCWD": true 
},],

Выдержка из доки по поводу данной настройки:

    "eslint.workingDirectories": [
      "./client", // changeProcessCWD defaults to false
      { "directory": "./server", "changeProcessCWD": true }
    ]
In the above example, client.js will be evaluated from root using root/client/.eslintrc.json,
while server.js will be evaluated from root/server using root/server/.eslintrc.json
Using changeProcessCWD causes vscode-eslint to change the current working directory of the eslint process to directory as well. This is often necessary if ESLint is used to validate relative import statements like import A from 'components/A'; which would otherwise be resolved to the workspace folder root.

Подсветка кода при наличии символов из русской и английской кодировки в VS Code.

MariannaKhanina — Wed, 24 Jan 2024 08:45:01 +0000

В VS Code установить расширение Highlight

Перейти в параметры

Через поиск найти настройки для Highlight расширения

В настройках найти пункт Regexes и в нем ссылку Изменить в settings.json

В объект блока "highlight.regexes"

добавляем
“(\\b[A-Za-z]*[А-Яа-я][A-Za-z]*\\b)|(\\b[А-Яа-я]*[A-Za-z][А-Яа-я]*\\b)“: { “color”: “#FF0000" }

Пример получившегося блока настроек:
“highlight.regexes”: { “(\\b[A-Za-z]*[А-Яа-я][A-Za-z]*\\b)|(\\b[А-Яа-я]*[A-Za-z][А-Яа-я]*\\b)“: { “color”: “#FF0000" } }

Теперь если в имени переменной будут попадаться отдельные символы русской кодировки - она будет подсвечиваться красным