Visual studio code подсветка ошибок

ErrorLens turbo-charges language diagnostic features by making diagnostics stand out more prominently, highlighting
the entire line wherever a diagnostic is generated by the language and also prints the message inline.

Features

• Highlight lines containing diagnostics
• Append diagnostic as text to the end of the line
• Show icons in gutter
• Show message in status bar

Commands (6)

Settings (49)

Error Lens extension settings start with errorLens.

Colors (26)

Can be specified in settings.json (workbench.colorCustomizations section)

Line highlighting depends on the "errorLens.messageBackgroundMode" setting.

#fff0 — Completely transparent color.

Upstream issues

Please upvote the following VS Code issues:

• Api for editor insets
• Access theme’s colors programmatically
• When completing color keys in settings, fill in current value
• Inline text adornments break word wrapping
• OnClick event on Gutter
• Support hover decorations over the line numbers i.e. gutter

More Documentation

https://github.com/usernamehw/vscode-error-lens/tree/master/docs/docs.md

Статья, в которой рассмотрим, что такое Visual Studio Code, как его установить и настроить для фронтенд разработки.

Что такое Visual Studio Code

Visual Studio Code или просто VS Code – это бесплатный, популярный и имеющий множество дополнений текстовый редактор, который в первую очередь предназначен для создания и отладки современных веб- и облачных приложений.

Разработан он компанией Microsoft и доступен для операционных систем Windows, MacOS и Linux.

Распространяется данная программа бесплатно, исходный код её доступен на GitHub.

VS Code поддерживает большое количество языков программирования, включает в себя отладчик, средства для работы с Git, подсветку синтаксиса, технологию автодополнения IntelliSense, инструменты для рефакторинга, терминал и многое другое.

VS Code является достаточно гибким инструментом, расширяемым с помощью плагинов, доступных на Visual Studio Marketplace. Открыть панель с расширениями в программе можно через комбинацию клавиш Ctrl+Shift+X.

Плагинов для Visual Studio Code очень много, но в рамках этой статьи рассмотрим только наиболее популярные из них. В VS Code уже встроен такой плагин как Emmet. Если вы не знакомы с ним, то он предназначен для быстрого набора кода. Дополнительно его устанавливать не нужно.

Для установки VS Code на компьютер необходимо перейти на этот сайт. После этого на странице выбрать вашу операционную систему и нажать на значок «Загрузки». После завершения скачивания программы установить её себе на компьютер.

Чтобы лучше ориентироваться в программе вы можете установить языковый пакет для русского языка. Для этого откройте панель «Расширения» (Ctrl+Shift+X) и введите в ней текст «Russian Language Pack for Visual Studio Code». После этого выберите его в результатах поиска и установите его.

В Visual Studio Code имеется огромное количество различных плагинов кроме языковых пакетов. Предназначены они для расширения функциональности этого редактора. Все плагины для этого редактора размещены на Marketplace.

VS Code содержит большое количество настроек, с помощью которых вы можете настроить этот редактор под себя.

Изменение настроек в VS Code осуществляется в соответствующем окне. Открыть его можно несколькими способами:

• через комбинацию клавиш Ctrl+,;
• через пункт меню «Файл -> Настройки -> Параметры» (в версии на английском языке «File -> Preferences -> Settings»);
• нажать на значок шестерёнки и выбрать в открывшемся меню пункт «Параметры» (Settings).

Список параметров, которые пользователи наиболее часто настраивают:

• editor.tabsize — число пробелов при табуляции;
• editor.insertSpaces — вставлять ли пробелы при нажатии Tab;
• editor.detectIndentation — нужно ли параметры «#editor.tabsize» и «editor.insertSpaces» определять автоматически при открытии файла на основе его содержимого;
• editor.wordWrap — управляет тем, как следует переносить строки;
• editor.fontSize — размер шрифта в пикселях;
• editor.mouseWheelZoom — нужно ли включать изменение размера шрифта в редакторе при нажатой клавише Ctrl и движении колесика мыши;
• editor.minimap.enabled — включает или отключает отображение мини-карты;
• editor.formatOnSave — выполнять ли автоматическое форматирование файла при его сохранении;
• workbench.startupEditor — управляет тем, что будет отображаться при запуске, если содержимое редактора не было восстановлено из предыдущего сеанса;
• files.insertFinalNewline — если этот параметр включен, то при сохранении файла в его конец вставляется пустая строка;
• files.trimFinalNewlines — если этот параметр активен, то при сохранении файла будут удалены все пустые строки, идущие за последней в конце файла;
• files.trimTrailingWhitespace — если этот параметр включен, то при сохранении файла будут удалены все пробельные символы на концах строк;
• files.autoSave — для включения автосохранения файлов;
• terminal.integrated.cwd — позволяет задать путь явного запуска, по которому будет запущен терминал;
• telemetry.enableTelemetry — включает или отключает отправку сведений об использовании и ошибках в веб-службу Майкрософт;
• telemetry.enableCrashReporter — разрешает отправку отчетов о сбоях в веб-службу Майкрософт;

Изменять настройки можно как глобально, так и конкретно для текущего проекта. Изменение глобальных настроек осуществляется в окне «Параметры» на вкладке «Пользователь». Эти настройки сохраняются в файл «settings.json». Открыть его можно нажав на значок «Открыть параметры (JSON)».

Пример файла «settings.json»:

{
  "editor.wordWrap": "wordWrapColumn",
  "editor.wordWrapColumn": 120,
  "editor.minimap.enabled": false,
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "editor.fontSize": 17,
  "editor.mouseWheelZoom": true,
  "workbench.startupEditor": "none",
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,
  "telemetry.enableTelemetry": false,
  "telemetry.enableCrashReporter": false,
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 10000
}

Кстати, изменять настройки также можно просто посредством редактирования этого файла.

Сохранение настроек для рабочей директории выполняется в специальный файл «settings.json», который будет добавлен в папку «.vscode». Настройка параметров для рабочей директории (проекта) можно также выполнить просто посредством редактирования этого файла.

Настройка VS Code для HTML и CSS

Visual Studio Code обеспечивает базовую поддержку при написании HTML и CSS из коробки. Имеется подсветка синтаксиса, умные дополнения с IntelliSense и настраиваемое форматирование. VS Code также имеет отличную поддержку Emmet.

Зачем нужен Emmet? Он позволяет очень быстро писать код.

Например, Emmet аббревиатура ul>li*3>span.item-$ после нажатии клавиши Tab создаст следующий код:

<ul>
  <li><span class="item-1"></span></li>
  <li><span class="item-2"></span></li>
  <li><span class="item-3"></span></li>
</ul>

В CSS аббревиатура Emmet как dn создаст код display: none.

VS Code имеет встроенные средства для форматирования кода. Настроить параметры форматирования можно в настройках. Находятся они в разделах «Расширения -> HTML» и «Расширения -> CSS».

Комбинация клавиш для выполнения форматирования в VS Code: Shift+Alt+F.

Функциональность VS Code при работе с HTML и CSS можно улучшить с помощью расширений.

Вот перечень некоторых из них:

• Auto Rename Tag – автоматически изменяет имя закрывающего тега при переименовывании открывающегося;
• Auto Close Tag – автоматически добавляет закрывающий HTML/XML тег при вводе закрывающей скобки открывающегося тега (кроме HTML, это дополнение добавляет эту возможность в JavaScript и многие другие языки);
• HTMLHint – плагин для статического анализа HTML кода;
• HTML CSS Support — поддержка CSS для документов HTML;
• IntelliSense for CSS class names in HTML — плагин для предложения вариантов завершения имени CSS класса в HTML на основе определений, найденных им в вашем рабочем пространстве;
• Autoprefixer — для автоматического добавления CSS свойств с префиксами;
• CSS Peek — позволяет посмотреть свойства, прикреплённые к классу или идентификатору без переключения на CSS файл, в котором они описаны;
• Prettier — Code formatter — для форматирования кода (HTML, CSS, JavaScript и др.);

VS Code имеет возможность, которая позволяет сворачивать области CSS кода заключенные между /*#region*/ и /*#endregion*/:

/*#region*/
...
/*#endregion*/

Настройка VS Code для разработки на JavaScript

Разработку веб-проекта в Windows 10 можно ввести не только с использованием программ, предназначенных только для этой операционной системы, но и посредством WSL (Linux). Если вам нравится Linux и вы хотите его использовать, то Windows 10 позволяет вам это сделать из коробки (то есть непосредственно из дистрибутива). В следующем разделе приведена инструкция по установке WSL в Windows 10 и настройке Visual Studio Code для её использования в качестве среды разработки.

Кроме этого, ОС Linux в большинстве случаев — это система, которая затем у вас будет установлена на продакшене. А это значит, что вы получите окружение как на сервере или более близкое к этому.

Если вы не хотите использовать WSL в качестве среды разработки или работаете в другой операционной системе, то в этом случае можете сразу же перейти к разделу «Установка и настройка ES Lint».

Как в Windows 10 установить WSL и использовать её в VS Code

Коротко о подсистеме Windows для Linux (WSL). В Windows 10 появилась возможность осуществлять веб-разработку прямо в среде на основе Linux. Для этого вам необходимо просто включить компонент Windows 10 «Подсистема Windows для Linux (WSL)» и установить из Microsoft Store «любимый» дистрибутив Linux (например, Ubuntu 18.04). Подсистема WSL появилась в Windows 10, начиная с обновления «Anniversary Update» (1607), а версия 2004 этой ОС уже включает WSL 2.

Более подробно процесс установки WSL описан в этой статье, а именно в разделах «Включение подсистемы Windows для Linux» и «Установка приложения «Ubuntu». Если вы ещё не читали эту статью, то можете это сделать, перейдя по представленной выше ссылке.

Установка расширения «Remote – WSL» в VS Code. Для использования WSL в качестве среды для полной разработки прямо из VS Code необходимо установить расширение «Remote – WSL».

Это позволит вам ввести веб-разработку прямо в среде на основе Linux, использовать специфичные для неё наборы инструментов и утилит, а также запускать и отлаживать свои приложения в Linux, не выходя при этом из Windows.

Это расширение позволит выполнять команды непосредственно в WSL, а также редактировать файлы, расположенные в WSL или в смонтированной файловой системе Windows (локальные диски находятся в /mnt) не беспокоясь о проблемах с совместимостью.

После установки расширения и перезагрузки редактора VS Code у вас появится индикатор WSL в нижнем левом углу окна программы.

При нажатии на него вам будут показаны команды Remote-WSL. Используя их, вы можете открыть новое окно VS Code, в котором в качестве среды будет использоваться WSL. При этом команда «Remote-WSL: New Window» выполнит это с использованием дистрибутива Linux, который у вас назначен по умолчанию, а команда «Remote-WSL: New Window using Distro…» — используя конкретный дистрибутив Linux из установленных.

Версия дистрибутива Linux, которая сейчас используется в WSL отображается в индикаторе следующим образом:

Установка и настройка ESLint

ESLint – это инструмент, который крайне желательно установить в систему, если вы разрабатываете код на JavaScript. Он будет показывать вам ошибки в коде, а также направлять вас при его написании так, чтобы он был выдержан в едином стиле.

Перед тем как переходить к установке ESLint сначала инсталлируем в ОС «Node.js v12.x».

В Ubuntu это осуществляется следующим образом:

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejs

Вводить эти команды будем через терминал VS Code. Открыть его можно посредством комбинации клавиш Ctrl+Shift+` или кликнув в главном меню на пункт «Терминал -> Создать терминал».

Проверить номер установленной версии «Node.js» можно так:

node -v

После установки «Node.js» создадим папку для проекта в файловой системе ОС, а затем откроем её с помощью VS Code.

Создание проекта обычно начинается с его инициализации посредством npm. Этот процесс можно выполнить посредством следующей команды:

npm init -y

В результате выполнения этой команды у вас появится файл «package.json». Этот файл кроме информации о проекте и других вещей, ещё будет содержать набор зависимостей для данного проекта. Имея этот файл, мы сможем при необходимости очень быстро развернуть проект на любом другом компьютере.

Теперь перейдём к установке ESLint и некоторых других npm пакетов в проект:

sudo npm install --save-dev eslint eslint-config-airbnb-base eslint-plugin-import

Ключ --save-dev используется для того чтобы сделать запись об этих пакетах в «package.json». Данный ключ добавит их в секцию devDependencies.

Установка npm пакетов осуществляется в папку «node_modules» этого проекта.

В качестве стиля кода мы будем использовать Airbnb. Это руководство используется многими известными организациями и имеет очень большое количество звёзд на GitHub.

Для того, чтобы можно было использовать Airbnb для расширения базовой конфигурации ESLint мы установили пакеты eslint-config-airbnb-base (без зависимостей от React) и eslint-plugin-import (для поддержки синтаксиса импорта/экспорта ES6+ и предотвращения проблем с неправильным написанием путей к файлам и имен импорта).

После окончания загрузки пакетов приступим к интегрированию ESLint в Visual Studio Code. Осуществляется это посредством установки расширения с одноимённым названием.

Для того чтобы ESLint работал необходимо создать конфигурационный файл. Это можно выполнить как посредством команды ./node_modules/.bin/eslint --init (настройка осуществляется посредством ответов на вопросы мастера), так и самостоятельно.

Конфигурационный файл необходим для задания настроек, в соответствии с которыми ESLint будет осуществлять проверку JavaScript кода.

Чтобы сделать это самостоятельно нам необходимо в корне проекта создать файл .eslintrc и добавить в него, например, следующие данные:

{
  "env": { "browser": true, "es6": true },
  "extends": "airbnb-base",
  "parserOptions": { "ecmaVersion": 6 }
}

Эти данные будут определять следующие настройки для ESLint:

• env — это свойство определяет среды, в которых JavaScript должен работать. Для фронтенда средой выступает браузер, поэтому добавим в env свойство "browser": true. Свойство "es6": true предназначено для автоматического включения синтаксиса ES6.
• extends — предназначен для указания конфигурации, с помощью которой мы хотим расширить общую конфигурацию ESLint. В качестве значения extends укажем конфигурацию airbnb-base (без React). При необходимости можно указать не одну, а несколько конфигурации. В этом случае каждая следующая конфигурация будет расширять предыдущую. Т.е. если мы укажем какую-то конфигурацию после airbnb-base, то она будет уже расширять не общую конфигурацию ESLint, а airbnb-base;
• parserOptions — позволяет задать параметры языку JavaScript, которые мы хотим поддерживать. В настоящее время рекомендуется использовать при разработке проектов синтаксис ECMAScript 6. Указание поддержки этой версии осуществляется посредством задания ключу ecmaVersion значения 6. При необходимости вы можете указать вместо этой другую версию.

Если вам необходимо дополнительно линтить ошибки кода, размещенного в теге <script>, то установите плагин eslint-plugin-html:

sudo npm install --save-dev eslint-plugin-html

Форматирование кода JavaScript будем выполнять с помощью Prettier. Для правильной совместной работы Prettier и ESLint установим следующие npm пакеты:

sudo npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier

Для того чтобы ESLint не просматривал определённые папки и не выдавал по ним ошибки следует создать файл .eslintignore и прописать их в нём:

/.vscode
/.git
node_modules

Если у вас включено стандартное форматирование кода в VS Code при сохранении, то чтобы в качестве плагина для форматирования js файлов применялся ESLint, следует в конфигурационный файл «settings.json» добавить следующее:

"editor.formatOnSave": true,
// добавить это
"[javascript]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"eslint.format.enable": true

Если вы хотите чтобы при сохранении файлов форматировались только js файлы, то editor.formatOnSave необходимо установить значение false, а true этому ключу только в секции "[javascript]":

"editor.formatOnSave": false,
"[javascript]": {
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"eslint.format.enable": true

Теперь, ESlint будет проверять JavaScript код и показывать в нём ошибки и предупреждения. Они будут помечаться с использованием волнистых линий.

Результат проверки JavaScript кода ESLint:

Дополнительная настройка VS Code

Вот ещё некоторый список плагинов для VS Code, которые могут расширить возможности Visual Studio Code для фронтенд разработки и не только:

• Project Manager – для удобного управления вашими проектами, независимо от того, где они расположены;
• LiveServer – локальный сервер с возможностью автоматического обновления страниц в браузере при их изменении (запустить сервер можно посредством нажатия на иконку «Go Live» в строке состояния или выбора пункта «Open with Live Server» в контекстном меню области редактора);
• Debugger for Chrome – применяется для отладки JavaScript кода в среде редактора на основе браузера Chrome или любого другого, который поддерживает протокол Chrome Debugger;
• Settings Sync – плагин для синхронизации настроек VS Code (хранение настроек осуществляется на GitHub);
• Visual Studio IntelliCode – система, которая предназначена для экономии вашего времени, помещая наиболее часто используемые элементы завершения для текущего контекста в верхней части списка;
• TODO HighLight – для выделения TODO, FIXME и другие аннотаций в коде;
• Version Lens – показывает информацию о версии пакета для npm, jspm, dub и dotnet ядра;
• GitLens – расширяет возможности Git встроенного в этот редактор (он позволяет очень просто понять почему и когда были изменены те или иные строки кода, изучить историю и развитие кодовой базы проекта и многое другое).

ESLint и Prettier вместе, второй способ

Есть еще один способ заставить ESLint и Prettier работать вместе — это расширение «Prettier ESLint» от Rebecca Vest на основе модуля prettier-eslint. При форматировании Alt+Shift+F и сохранении Ctrl+S — сначала отрабатывает Prettier, а потом — исправление ошибок ESLint.

При этом не требуется установка расширений «Prettier» и «ESLint» для VS Code. Но если установить расширение «ESLint» — будет подсветка ошибок при печати кода. Правда, «ESLint» будет подсвечивать только «свои» ошибки — поэтому второй способ чуть хуже первого.

Давайте создадим новый проект и установим локально prettier и eslint:

$ npm intsall prettier --save-dev
$ npm intsall eslint --save-dev

{
    "devDependencies": {
        "eslint": "^8.21.0",
        "prettier": "^2.7.1"
    }
}

Отредактируем файл конфигурации settings.json — укажем defaultFormatter:

{
    ..........
    // По умолчанию форматирование запрещено
    "editor.formatOnSave": false, // форматировать код при сохранении файла
    "editor.formatOnPaste": false, // форматировать при вставке фрагмента кода
    "editor.codeActionsOnSave": [], // набор действий при сохранении файла
    "editor.defaultFormatter": null,
    // Разрешить или запретить расширения eslint и prettier
    "prettier.enable": true, // нужен рестарт vs code
    "eslint.enable": true,
    // Настройки форматирования javascript
    "eslint.format.enable": true, // запретить или разрешить форматирование
    "eslint.run": "onType", // запускать проверку кода по мере печати кода
    "eslint.probe": [ // какие файлы нужно проверять
        "javascript"
    ],
    "[javascript]": {
        "editor.formatOnSave": true,
        "editor.formatOnPaste": true,
        "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
    },
    ..........
}

Но здесь нужно помнить, что правила eslint не должны противоречить правилам prettier. Например, в наборе eslint:recommended нет правил, которые бы противоречили prettier — так что не будет проблем с перезаписью.

{
    "root": true,
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "rules": {}
}

{
    "arrowParens": "avoid",
    "bracketSpacing": true,
    "endOfLine": "lf",
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxBracketSameLine": false,
    "jsxSingleQuote": false,
    "printWidth": 80,
    "proseWrap": "preserve",
    "quoteProps": "as-needed",
    "requirePragma": false,
    "semi": true,
    "singleQuote": true,
    "tabWidth": 4,
    "trailingComma": "es5",
    "useTabs": false,
    "vueIndentScriptAndStyle": true,
    "embeddedLanguageFormatting": "auto"
}

Исходные коды здесь, директория eslint-prettier-together-two.

Теперь подключим правила Standard, где есть правила, которые противоречат правилам Prettier:

$ npm install eslint-config-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-n --save-dev

{
    "devDependencies": {
        "eslint": "^8.21.0",
        "eslint-config-standard": "^17.0.0",
        "eslint-plugin-import": "^2.26.0",
        "eslint-plugin-n": "^15.2.4",
        "eslint-plugin-promise": "^6.0.0",
        "prettier": "^2.7.1"
    }
}

{
    "root": true,
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "standard"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "rules": {}
}

И сразу увидим много сообщений от ESLint, связанных с форматированием. Давайте запретим все правила Standard, которые противрочат Prettier.

$ npm install eslint-config-prettier --save-dev

{
    "devDependencies": {
        "eslint": "^8.21.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-config-standard": "^17.0.0",
        "eslint-plugin-import": "^2.26.0",
        "eslint-plugin-n": "^15.2.4",
        "eslint-plugin-promise": "^6.0.0",
        "prettier": "^2.7.1"
    }
}

{
    "root": true,
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "standard",
        "prettier"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "rules": {}
}

Исходные коды здесь, директория eslint-prettier-standard-two.

ESLint и Prettier для React приложения

Мы рассмотрели два способа подружить ESLint и Prettier. И для этих двух способов добавили использование набора правил Standard. Теперь добавим еще наборы правил, которые потребуются при разработке React приложения. Начнем со второго проекта, где мы использовали расширение «Prettier ESLint» от Rebecca Vest на основе модуля prettier-eslint.

ESLint и Prettier (второй способ) для React приложения

1. Настройка

Нам потребуется установить два модуля и отредактировать .eslint.json:

$ npm install eslint-plugin-react eslint-plugin-react-hooks --save-dev

{
    "devDependencies": {
        "eslint": "^8.21.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-config-standard": "^17.0.0",
        "eslint-plugin-import": "^2.26.0",
        "eslint-plugin-n": "^15.2.4",
        "eslint-plugin-promise": "^6.0.0",
        "eslint-plugin-react": "^7.30.1",
        "eslint-plugin-react-hooks": "^4.6.0",
        "prettier": "^2.7.1"
    }
}

{
    "root": true,
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "standard",
        "plugin:react/recommended",
        "plugin:react/jsx-runtime",
        "plugin:react-hooks/recommended",
        "prettier"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "react-hooks"
    ],
    "rules": {}
}

2. Проверка

Чтобы проверить конфигурацию — развернем React приложение:

$ npm install react react-dom --save-prod

{
    "devDependencies": {
        "eslint": "^8.21.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-config-standard": "^17.0.0",
        "eslint-plugin-import": "^2.26.0",
        "eslint-plugin-n": "^15.2.4",
        "eslint-plugin-promise": "^6.0.0",
        "eslint-plugin-react": "^7.30.1",
        "eslint-plugin-react-hooks": "^4.6.0",
        "prettier": "^2.7.1"
    },
    "dependencies": {
        "react": "^18.2.0",
        "react-dom": "^18.2.0"
    }
}

Babel нужен для транспиляции ES6+ в ES5 и для обработки jsx-кода:

$ npm install @babel/core @babel/preset-env @babel/preset-react --save-dev

{
    "devDependencies": {
        "@babel/core": "^7.18.10",
        "@babel/preset-env": "^7.18.10",
        "@babel/preset-react": "^7.18.6",
        "eslint": "^8.21.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-config-standard": "^17.0.0",
        "eslint-plugin-import": "^2.26.0",
        "eslint-plugin-n": "^15.2.4",
        "eslint-plugin-promise": "^6.0.0",
        "eslint-plugin-react": "^7.30.1",
        "eslint-plugin-react-hooks": "^4.6.0",
        "prettier": "^2.7.1"
    },
    "dependencies": {
        "react": "^18.2.0",
        "react-dom": "^18.2.0"
    }
}

Создаем файл конфигурации Babel, это .babelrc:

{
    "presets": [
        "@babel/preset-env",
        ["@babel/preset-react", {"runtime": "automatic"}]
    ]
}

Для сборки React проекта установим и настроим webpack:

$ npm install webpack webpack-cli webpack-dev-server --save-dev
$ npm install babel-loader css-loader style-loader html-webpack-plugin --save-dev

{
    "devDependencies": {
        "@babel/core": "^7.18.10",
        "@babel/preset-env": "^7.18.10",
        "@babel/preset-react": "^7.18.6",
        "babel-loader": "^8.2.5",
        "css-loader": "^6.7.1",
        "eslint": "^8.21.0",
        "eslint-config-standard": "^17.0.0",
        "eslint-plugin-import": "^2.26.0",
        "eslint-plugin-n": "^15.2.4",
        "eslint-plugin-promise": "^6.0.0",
        "eslint-plugin-react": "^7.30.1",
        "eslint-plugin-react-hooks": "^4.6.0",
        "html-webpack-plugin": "^5.5.0",
        "prettier": "^2.7.1",
        "style-loader": "^3.3.1",
        "webpack": "^5.74.0",
        "webpack-cli": "^4.10.0",
        "webpack-dev-server": "^4.9.3"
    },
    "dependencies": {
        "react": "^18.2.0",
        "react-dom": "^18.2.0"
    }
}

Создадим файл конфигурации, это webpack.config.js (см. здесь):

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /.(png|jpe?g|gif|webp|svg)$/i, // изображение
                type: 'asset/resource',
                generator: {
                    filename: '[hash][ext][query]',
                },
            },
            {
                test: /.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                },
            },
            {
                test: /.css$/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                    },
                ],
            },
        ],
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: path.resolve(__dirname, 'public/index.html'), // файл шаблона
            filename: 'index.html', // выходной файл
        }),
    ],
};

Добавим в package.json секцию scripts:

{
    "scripts": {
        "start": "webpack serve --open",
        "build": "webpack build",
        "watch": "webpack watch"
    },
    ..........

Соберем проект в директорию build и запустим Live Server, чтобы он обслуживал эту директорию (см. здесь):

$ npm run build

Исходные коды здесь, директория eslint-prettier-react-two.

ESLint и Prettier (первый способ) для React приложения

Этот способ использовать ESLint и Prettier вместе заключается в использовании пакета eslint-plugin-prettier, который позволяет запускать Prettier как правило ESLint. В первой часты мы настроили ESLint на использование набора правил Standard, осталось добавить наборы для работы с React приложением. Здесь все будет по аналогии со вторым способом, отличия незначительные.

1. Настройка

Нам потребуется установить два модуля и отредактировать .eslint.json:

$ npm install eslint-plugin-react eslint-plugin-react-hooks --save-dev

{
    "devDependencies": {
        "eslint": "^8.21.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-config-standard": "^17.0.0",
        "eslint-plugin-import": "^2.26.0",
        "eslint-plugin-n": "^15.2.4",
        "eslint-plugin-prettier": "^4.2.1",
        "eslint-plugin-promise": "^6.0.0",
        "eslint-plugin-react": "^7.30.1",
        "eslint-plugin-react-hooks": "^4.6.0",
        "prettier": "^2.7.1",
    }
}

{
    "root": true,
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "standard",
        "plugin:react/recommended",
        "plugin:react/jsx-runtime",
        "plugin:react-hooks/recommended",
        "plugin:prettier/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "react-hooks"
    ],
    "rules": {}
}

2. Проверка

Чтобы проверить конфигурацию — развернем React приложение:

$ npm install react react-dom --save-prod

{
    "devDependencies": {
        "eslint": "^8.21.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-config-standard": "^17.0.0",
        "eslint-plugin-import": "^2.26.0",
        "eslint-plugin-n": "^15.2.4",
        "eslint-plugin-prettier": "^4.2.1",
        "eslint-plugin-promise": "^6.0.0",
        "eslint-plugin-react": "^7.30.1",
        "eslint-plugin-react-hooks": "^4.6.0",
        "prettier": "^2.7.1",
    },
    "dependencies": {
        "react": "^18.2.0",
        "react-dom": "^18.2.0"
    }
}

Babel нужен для транспиляции ES6+ в ES5 и для обработки jsx-кода:

$ npm install @babel/core @babel/preset-env @babel/preset-react --save-dev

{
    "devDependencies": {
        "@babel/core": "^7.18.10",
        "@babel/preset-env": "^7.18.10",
        "@babel/preset-react": "^7.18.6",
        "eslint": "^8.21.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-config-standard": "^17.0.0",
        "eslint-plugin-import": "^2.26.0",
        "eslint-plugin-n": "^15.2.4",
        "eslint-plugin-prettier": "^4.2.1",
        "eslint-plugin-promise": "^6.0.0",
        "eslint-plugin-react": "^7.30.1",
        "eslint-plugin-react-hooks": "^4.6.0",
        "prettier": "^2.7.1",
    },
    "dependencies": {
        "react": "^18.2.0",
        "react-dom": "^18.2.0"
    }
}

Создаем файл конфигурации Babel, это .babelrc:

{
    "presets": [
        "@babel/preset-env",
        ["@babel/preset-react", {"runtime": "automatic"}]
    ]
}

Для сборки React проекта установим и настроим webpack:

$ npm install webpack webpack-cli webpack-dev-server --save-dev
$ npm install babel-loader css-loader style-loader html-webpack-plugin --save-dev

{
    "devDependencies": {
        "@babel/core": "^7.18.10",
        "@babel/preset-env": "^7.18.10",
        "@babel/preset-react": "^7.18.6",
        "babel-loader": "^8.2.5",
        "css-loader": "^6.7.1",
        "eslint": "^8.21.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-config-standard": "^17.0.0",
        "eslint-plugin-import": "^2.26.0",
        "eslint-plugin-n": "^15.2.4",
        "eslint-plugin-prettier": "^4.2.1",
        "eslint-plugin-promise": "^6.0.0",
        "eslint-plugin-react": "^7.30.1",
        "eslint-plugin-react-hooks": "^4.6.0",
        "html-webpack-plugin": "^5.5.0",
        "prettier": "^2.7.1",
        "style-loader": "^3.3.1",
        "webpack": "^5.74.0",
        "webpack-cli": "^4.10.0",
        "webpack-dev-server": "^4.9.3"
    },
    "dependencies": {
        "react": "^18.2.0",
        "react-dom": "^18.2.0"
    }
}

Создадим файл конфигурации, это webpack.config.js (см. здесь):

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /.(png|jpe?g|gif|webp|svg)$/i, // изображение
                type: 'asset/resource',
                generator: {
                    filename: '[hash][ext][query]',
                },
            },
            {
                test: /.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                },
            },
            {
                test: /.css$/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                    },
                ],
            },
        ],
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: path.resolve(__dirname, 'public/index.html'), // файл шаблона
            filename: 'index.html', // выходной файл
        }),
    ],
};

Добавим в package.json секцию scripts:

{
    "scripts": {
        "start": "webpack serve --open",
        "build": "webpack build",
        "watch": "webpack watch"
    },
    ..........

Соберем проект в директорию build и запустим Live Server, чтобы он обслуживал эту директорию (см. здесь):

$ npm run build

Исходные коды здесь, директория eslint-prettier-react-two.

Встроенные форматтеры

Не для всех файлов с кодом нужно использовать внешний форматтер, потому что у VS Code есть несколько встроенных. И зачастую они ничем не хуже внешних, а порой даже лучше. Так что для одних файлов можно использовать встроенные средства форматирования, а для других — использовать внешний форматтер.

{
/*
* ОБЩИЕ НАСТРОЙКИ
*/
"editor.fontSize": 12,
"files.encoding": "utf8", // кодировка файлов
"files.eol": "n", // концы строк как в linux
"files.insertFinalNewline": true, // пустая строка в конце файла
"files.trimTrailingWhitespace": true, // удалять пробелы в конце строк
"editor.insertSpaces": true, // заменять табуляцию на пробелы
"editor.tabSize": 4, // табуляция заменяется 4 пробелами
"editor.renderWhitespace": "all", // показывать символы пробелов
"workbench.colorCustomizations": { // волнистая линия
"editorWarning.foreground": "#FF9933",
"editorError.foreground": "#FF0000",
"editorInfo.foreground": "#00AA00",
},
/*
* ФОРМАТИРОВАНИЕ
*/
// По умолчанию форматирование кода запрещено
"editor.formatOnSave": false, // форматировать код при сохранении файла
"editor.formatOnPaste": false, // форматировать при вставке фрагмента кода
"editor.codeActionsOnSave": [], // набор действий при сохранении файла
"editor.defaultFormatter": null,
// Разрешить или запретить расширения eslint и prettier
"prettier.enable": true, // нужен рестарт vs code
"eslint.enable": true,
// Настройки форматирования javascript
"eslint.format.enable": true, // запретить или разрешить форматирование
"eslint.run": "onType", // запускать проверку кода по мере печати кода
"eslint.probe": [ // какие файлы нужно проверять
"javascript"
],
"eslint.rules.customizations": [
// для проблем форматирования кода уровень info
{"rule": "prettier/prettier", "severity": "info"}
],
"[javascript]": {
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
// Настройки форматирования css
"css.format.enable": true,
"css.validate": true,
"css.format.newlineBetweenRules": false,
"css.format.newlineBetweenSelectors": false,
"css.lint.duplicateProperties": "warning",
"css.format.spaceAroundSelectorSeparator": true,
"[css]": {
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.defaultFormatter": "vscode.css-language-features"
},
// Настройки форматирования json
"json.format.enable": true,
"json.validate.enable": true,
"[json]": {
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.defaultFormatter": "vscode.json-language-features"
},
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
// Настройки форматирования html
"html.format.enable": true, // разрешить форматирование html-кода
"html.format.wrapLineLength": 100, // максимальная длина сроки до переносана новую
"html.format.unformatted": null, // эти теги не форматировать (см.ссылку в подсказке)
"html.format.contentUnformatted": "pre,code,textarea", // контент этих тегов не форматировать
"html.format.extraLiners": "", // пустая строка перед этими тегами
"html.format.preserveNewLines": false, // сохранять или нет пустые строки
"html.format.maxPreserveNewLines": null, // сколько пустых строк сохранять
"html.format.indentInnerHtml": false, // отступ <head> и <body> относительно <html>
"html.format.wrapAttributes": "preserve-aligned", // перенос и выравнивание атрибутов
"html.format.wrapAttributesIndentSize": null, // размер отступа при переносе и выравнивании атр.
"html.validate.scripts": true, // проверять js-скрипты внутри html-кода
"html.validate.styles": true, // проверять css-стили внутри html-кода
"[html]": {
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.defaultFormatter": "vscode.html-language-features"
},
// Настройки форматирования markdown
"[markdown]": {
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.defaultFormatter": "vscode.markdown-language-features"
},
/*
* РАСШИРЕНИЯ
*/
// Расширение Render Line Endings, показывает символы CR LF
"code-eol.newlineCharacter": "↓",
"code-eol.crlfCharacter": "←↓",
"code-eol.highlightNonDefault": true,
// Расширение Live Server, простой веб-сервер для разработки
"liveServer.settings.root": "/build",
"liveServer.settings.host": "localhost",
"liveServer.settings.fullReload": false,
"liveServer.settings.port": 5555,
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.donotVerifyTags": true,
// Расширение Prettier для форматирования кода
"prettier.arrowParens": "avoid", // скобки вокруг единственного параметра стрелочной функции
"prettier.bracketSpacing": true, // пробелы между скобками в литералах объектов
"prettier.endOfLine": "lf", // окончания строк
"prettier.htmlWhitespaceSensitivity": "css", // форматирование html с учетом пробелов
"prettier.insertPragma": false, // вставлять спец.комментарий в начало файла
"prettier.jsxBracketSameLine": false, // где будет завершающий > многострочного jsx-элемента
"prettier.jsxSingleQuote": false, // использовать в jsx одинарные кавычки вместо двойных
"prettier.printWidth": 100, // на какой позиции выполнять перенос строки при печати
"prettier.proseWrap": "preserve", // как обрабатывать markdown файлы
"prettier.quoteProps": "as-needed", // свойства объекта в кавычках или без кавычек
"prettier.requirePragma": false, // форматировать только файлы со спец.комментарием в начале
"prettier.semi": true, // точка с запятой в конце операторов
"prettier.singleQuote": true, // использовать одинарные кавычки вместо двойных
"prettier.tabWidth": 4, // заменять табуляцию на 4 пробела
"prettier.trailingComma": "es5", // конечные запятые в объектах и массивах
"prettier.useTabs": false, // делать отступы с помощью табуляции
"prettier.vueIndentScriptAndStyle": false, // отступ внутри <script> и <style> в vue файлах
"prettier.embeddedLanguageFormatting": "auto" // форматировать встроенный код
}

Поиск:
IDE • JavaScript • Web-разработка • Конфигурация • Настройка • Плагин • Установка • Файл • ESLint • Prettier

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

Настраиваем автоматическое форматирование кода и проверку на ошибки при помощи Prettier и ESLint согласно стайлгайду Airbnb.

Во время работы над последним проектом я опробовал в деле два прекрасных иструмента, ESLint и Prettier. Захотелось написать о том, что это такое, чем полезен линтер и prettier, как их настроить, и как использовать.

• Что такое Lint?

  • ESLint в Create React App и расширение для VS Code
  • Настройка ESLint
  • Установка и подключение дополнительных плагинов ESLint
    • eslint-plugin-react
    • eslint-plugin-react-hooks
    • eslint-plugin-jsx-a11y
    • eslint-plugin-import

• Prettier

  • Установка Prettier в проект
  • Отключаем конфликтующие с Prettier правила ESLint
  • Интеграция Prettier в VS Code
  • .prettierrc.json и .prettierignore

• Установка правил Airbnb для ESLint

Что такое Lint?

Lint, или линтер — это инструмент для поиска ошибок в коде. Пример работы линтера в проекте Create React App, ниже:

Клавиатура моего ноутбука иногда срабатывает неправильно, и делает двойное нажатие клавиши, вместо однократного. В 8 и в 25 строке опечатка, вместо logo — logoo а вместо App — Appp
Линтер нашел эти ошибки и сообщил о них в терминал. Прекрасно!

Теперь можно их исправить, и все заработает как надо:

ESLint в Create React App и расширение для VS Code

В Create React App линтер уже установлен, он называется ESLint. Именно его сообщения об ошибках мы видим в терминале.

Существует так же ESLint расширение для VS Code:

Установив это расширение в VS Code, получим сообщения ESLint и подсветку ошибок в редакторе кода:

Настройка ESLint

У ESLint есть конфиг, в котором находятся правила, согласно которым он выполняет проверку кода. Как я говорил ранее, ESLint уже встроен в Create React App, и использует конфиг который называется eslint-config-react-app

В Create React App этот конфиг подключается к ESLint в package.json, 22 строка:

Eslint сейчас настроен так, как решили создатели CRA. Давайте инициализируем ESLint и заново сами все настроим, так, как нам необходимо. Для этого выполним команду:

$ npx eslint --init

Запустится мастер настройки ESLint.
Пройдем настройку согласно предложенным вариантам:

В конце мастер создаст файл настроек линтера, .eslintrc.json:

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

Установка и подключение дополнительных плагинов ESLint

установим правила ESLint для React:

$ npm install eslint-plugin-react --save-dev

Если вы используете версию React старше 17, и не импортируете React from ‘react’ можно после установки этого плагина, добавить в конфиг .eslintrc.json строку «plugin:react/jsx-runtime», тогда ESLint не будет ругаться, что ‘React’ must be in scope when using JSX

В этом случае конфиг будет выглядеть так:

Установим правила для поддержки хуков React, eslint-plugin-react-hooks:

$ npm install eslint-plugin-react-hooks --save-dev

подключим их, добавив строку «plugin:react-hooks/recommended» в .eslintrc.json:

Установим правила доступности для людей с ограниченными возможностями eslint-plugin-jsx-a11y

$ npm install eslint-plugin-jsx-a11y --save-dev

добавляем «plugin:jsx-a11y/recommended» в .eslintrc.json:

установим правила, которые будут отвечать за синтаксис импортов и экспортов eslint-plugin-import

$ npm install eslint-plugin-import --save-dev

добавим «plugin:import/recommended» в .eslintrc.json:

С ESLint мы пока что закончили, переходим к Prettier

Prettier

Prettier. Что это такое и зачем вообще нужно?

Prettier — это инструмент для автоматического форматирования кода.

Форматирование кода — это процесс придания коду определенного вида.

Prettier берет код, который вы ему дали, и преобразует этот код к единому стилю.

Вот простой пример:

Здесь у нас стандартный файл App.js из Create React App проекта, у которого я где то убрал, а где то добавил отступы и точки с запятыми в конце строк, в некоторых местах использовал длинные, плохо читаемые строки.

Prettier автоматически исправил мой код при сохранении файла, добавил нужные отступы, точки с запятыми, а длинные линии кода разбил на более короткие и лучше читаемые блоки. Теперь все выглядит лучше и опрятнее.

Установка Prettier в проект

Установка хорошо описана в официальной документации, пройдем ее вместе, по шагам.

Первым делом устанавливаем Prettier в наш Create React App проект, локально:

$ npm install --save-dev --save-exact prettier

Создаем пустой конфигурационный файл, .prettierrc.json в корне проекта:

$ echo {}> .prettierrc.json

Отключаем конфликтующие правила ESLint

Теперь нужно сделать так, чтобы Prettier не конфликтовал с линтером. Дело в том, что когда ESLint ищет ошибки в коде, он руководствуется определенными правилами, которые хранятся в его конфиге. Эти правила отвечают как за качество кода, так и за стиль кода. Так вот, у Prettier есть свои собственные правила, которые тоже отвечают за стиль кода. Чтобы у линтера и Prettier не было конфликтов по части оформления кода, нужно отключить кофликтующие правила у линтера, чтобы за стиль кода отвечал только Prettier.
Сделать это можно очень просто, установив eslint-config-prettier

ставим:

$ npm install --save-dev eslint-config-prettier

Далее открываем конфиг нашего линтера, (файл .eslintrc.json), и добавляем «prettier» в конец массива:

Cтрока «prettier» в конфиге .eslintrc.json отключает конфликтующие с Prettier правила ESLint.
Теперь Prettier и линтер будут корректно работать вместе.

Мы установили Prettier в наш проект. Давайте теперь добавим поддержку Prettier в VS Code.

Интеграция Prettier в VS Code

Установим расширение Prettier для VS Code:

После того как мы установили расширение Prettier в VS Code, можно сделать так, чтобы Prettier автоматически форматировал наш код, когда мы сохраняем файл. Для этого нужно добавить два значения в JSON конфиг VS Code, (файл settings.json).

Чтобы открыть settings.json нужно, находясь в VS Code, нажать Ctrl + Shift + P, ввести в поиск «settings» и выбрать пункт Open Settings (JSON). Откроется файл settings.json.

Добавим в него следующие строки:

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true

Первая строка устанавливает Prettier как инструмент форматирования кода по-умолчанию.
Вторая строка включает форматирование кода при сохранении файла.

.prettierrc.json и .prettierignore

Пара слов об этих двух файлах.

Для чего нужен .prettierrc.json?

.prettierrc.json — это файл конфигурации Prettier.

Перечислю базовые настройки, которые в него можно добавить:

{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}

«trailingComma» — отвечает за висящие, (или «последние») запятые. Можно разрешить Prettier ставить их там, где это возможно, или отключить эту функцию

«tabWidth» — ширина отступа, в пробелах

«semi» — отвечает за добавление точек с запятыми в конце инструкций. Можно добавлять, можно не добавлять

«singleQuote» — отвечает за использование одинарных или двойные кавычек

Мой конфиг .prettierrc.json сейчас выглядит так:

В нем я запретил использование точек с запятыми в конце строк. Такое вот личное предпочтение, при работе над персональными проектами.

В итоге, когда мы сохраняем файл, Prettier будет удалять точки с запятыми в конце строк, если они были, и менять одинарные кавычки на двойные. (замена кавычек на двойные производится по умолчанию, этим поведением можно управлять при помощи параметра «singleQuote»)

вот как это выглядит:

Сохранили файл — произошло форматирование кода.

.prettierignore

Файл .prettierignore существует для того, чтобы запретить Prettier форматировать определенные файлы. Какие файлы запретить форматировать, решаете вы. Я добавил туда файл .eslintrc.json, потому что не хочу, чтобы Prettier его трогал:

Установка правил Airbnb для ESLint

Теперь, когда мы настроили ESLint и Prettier в нашем проекте, давайте установим популярный конфиг eslint-config-airbnb, который настроен с учетом стайлгайда по JavaScript от Airbnb

для этого выполним команду:

$ npm install --save-dev eslint-config-airbnb

и добавим «airbnb» в .eslintrc.json.
Финальный конфиг ESLint с учетом правил Airbnb будет выглядеть вот так:

Чтобы ESLint не ругался на то, что у нас JSX присутствует в файлах с расширением ‘.js’, можно добавить правило

"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]

в .eslintrc.json, тогда ошибки JSX not allowed in files with extension ‘.js’ не будет:

Установка и настройка ESLint и Prettier закончена!

Что мы сделали:

• разобрались с тем, что такое линтер
• установили и настроили ESLint в Create React App проект
• установили ESLint в VS Code
• узнали, что такое Prettier
• установили и настроили Prettier в нашем проекте
• установили расширение Prettier в VS Code и настроили форматирование кода при сохранении файла
• установили в линтер популярные правила написания JavaScript кода от Airbnb

Увидимся в новых постах!