Руслан Куянец | Reactify
5.82K subscribers
706 photos
53 videos
39 files
289 links
Я IT-специалист, ментор и основатель проекта YeaHub и сообщества Reactify. Здесь рассказываю про Frontend и IT.

Менторство:
https://reactify.ru

YouTube канал:
https://youtube.com/@reactify-it

YeaHub:
https://yeahub.ru/

Связь:
@ruslan_kuyanets
Download Telegram
PostCSS

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

Ключевые особенности:

Модульность: выбор только тех плагинов, которые нужны для проекта.
Поддержка будущих CSS стандартов: использование новых CSS возможностей сегодня.
Автоматизация: автопрефиксер, минификация CSS и другие оптимизации.
Улучшенный синтаксис: переменные, вложенности, подобно Sass и Less.

https://postcss.org/

#css #web #postcss
👍9👌3🔥2
📎 Основные инструменты для анализа и форматирования кода

Поддержка кода так же важна, как его написание. Если код плохо организован, это может привести к:
- Ошибкам, которые сложно обнаружить.
- Сложностям в его понимании и доработке.
- Несоответствию стилей написания.

Вот ключевые инструменты, которые помогут избежать этих проблем:

✔️ ESLint — Линтер для JavaScript/TypeScript

Проблема: Ошибки и несоответствие стандартам кода.
Решение:
- Находит баги и предупреждает о потенциальных проблемах.
- Проверяет стиль написания (например, использование ; или длину строк).
- Исправляет часть ошибок автоматически.


const unusedVar = 42; // unusedVar не используется
console.log('Hello')


✔️ Prettier — Инструмент для форматирования кода

Проблема: Разный стиль оформления у разработчиков.
Решение: Приводит код к единому виду (отступы, кавычки, длина строк и др.).


// До форматирования:
function test ( ) {console.log( "Hello!" )}

// После Prettier:
function test() {
console.log("Hello!");
}


✔️ Stylelint — Линтер для CSS/SCSS

Проблема: Ошибки и несоответствие стандартам в стилях.
Решение: Проверяет чистоту и стандарт кода CSS/SCSS.


button {
color: red;
color: blue; /* Ошибка: дублирование свойства */
}


✔️ PostCSS — Обработчик CSS

Проблема: Сложность управления стилями в крупных проектах.
Решение:
- Добавляет вендорные префиксы.
- Минифицирует стили для производительности.


/* Исходный код: */
display: flex;

/* После PostCSS: */
display: -webkit-box;
display: -ms-flexbox;
display: flex;


✔️ Husky — Автоматизация проверки перед коммитом

Проблема: Внесение невалидного кода в репозиторий.
Решение: Запускает проверки (линтеры, тесты) перед коммитом.

Пример: Husky не позволит закоммитить файлы, не прошедшие ESLint.

✔️ lint-staged — Проверка только изменённых файлов

Проблема: Долгое время проверки всего проекта.
Решение: Проверяет только изменённые файлы в коммите, ускоряя процесс.

Пример: Если вы изменили только app.js, линтер будет запущен только для этого файла.

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

#eslint #husky #prettier #postcss
Please open Telegram to view this post
VIEW IN TELEGRAM
15👍10🔥4