Настройка редактора IDE для работы с React
год назад·2 мин. на чтение
Правильно настроенный редактор может сделать код более понятным для чтения и более быстрым для написания. Это может даже помочь вам отловить ошибки, когда вы пишете код. Если вы впервые настраиваете редактор или хотите настроить текущий редактор, есть несколько рекомендаций.
Содержание туториала по React
Правильно настроенный редактор может сделать код более понятным для чтения и более быстрым для написания. Это может даже помочь вам отловить ошибки, когда вы пишете код. Если вы впервые настраиваете редактор или хотите настроить текущий редактор, есть несколько рекомендаций.
Выбор редактора кода
VS Code — один из самых популярных редакторов, используемых сегодня. Он имеет большой маркет с расширениями и хорошо интегрируется с популярными сервисами, такими как GitHub. Большинство функций, перечисленных ниже, также можно добавить в VS Code в качестве расширений, что делает его легко настраиваемым! Другие популярные текстовые редакторы, используемые в сообществе React:- WebStorm — это интегрированная среда разработки (IDE), разработанная специально для JavaScript.
- Sublime Text имеет поддержку JSX и TypeScript, встроенную подсветку синтаксиса и автозаполнение.
- Vim — это текстовый редактор с широкими возможностями настройки, созданный для эффективного создания и изменения любого типа текста. Он включен как «vi» в большинство UNIX систем и в Apple OS X.
Рекомендуемые функции редактора кода
Некоторые редакторы поставляются со встроенными функциями, но для других может потребоваться добавление расширения.Линтинг
Линтеры находят проблемы в коде по мере его написания, помогая вам исправить их на ранней стадии. ESLint — популярный линтер с открытым исходным кодом для JavaScript.- Установите ESLint с рекомендуемой конфигурацией для React (убедитесь, что у вас установлен Node.js)
- Интегрируйте ESLint в VS Code с официальным расширением
eslint-plugin-react-hooks
для своего проекта. Они необходимы и выявляют самые серьезные ошибки на ранней стадии. Рекомендуемый пресет (preset) eslint-config-react-app
уже включает их.
Форматирование кода
Prettier очистит ваш код, переформатировав его, чтобы он соответствовал предустановленным настраиваемым правилам. Запустите Prettier, и все ваши табы будут преобразованы в пробелы, а ваши отступы, кавычки и т. д. также будут изменены в соответствии с конфигурацией. В идеальной настройке Prettier будет запускаться, когда вы сохраняете файл, быстро внося эти изменения за вас. Вы можете установить расширение Prettier в VS Code, выполнив следующие действия:- Запустить VS Code
- Используйте быстрое открытие (нажмите
Ctrl/Cmd+P
) - Вставьте в
ext install esbenp.prettier-vscode
- Нажмите Enter
Форматирование при сохранении
В идеале вы должны форматировать свой код при каждом сохранении. В VS Code есть настройки для этого.- В VS Code нажмите
Ctrl/Cmd + Shift + P
. - Напишите
"settings"
- Нажмите Enter
- В строке поиска введите
"format on save"
. - Убедитесь, что опция
"format on save"
отмечена галочкой.
eslint-config-prettier
, чтобы ESLint использовался только для отлова логических ошибок. Если вы хотите принудительно отформатировать файлы перед слиянием пулл ревеста, используйте prettier --check
для непрерывной интеграции (Continuous Integration, CI).Видео курс по Svelte
2 года назад·2 мин. на чтение
Полный видео курс по Svelte
1. Что такое Svelte и как он устроен?
В этом уроке проинициализируем default проект на Svelte и рассмотрим структуру default проекта. Смотреть на Rutube2. Как устроен Компонент в Svelte?
В этом уроке рассмотрим компоненты Svelte, пропс (props
, $$props
, $$restProps
, export let prop
), реактивность SvelteJS, блоки script
и style
, изоляцию стилей и :global()
Смотреть на Rutube
3. Жизненный цикл Svelte компонента
В этом видео рассматриваем методы жизненного цикла компонентов Svelte, а именноonMount
, onDestroy
, beforeUpdate
, afterUpdate
, а также функция tick
.
Смотреть на Rutube
4. HTML шаблоны в Svelte
В этом уроке рассмотрим cинтаксис HTML шаблонов Svelte, а именноif
, each
, await
, key
, а также html
и debug
.
Смотреть на Rutube
5. Как работать с событиями в Svelte?
В этом уроке по Svelte рассматриваем работу с событиями в Svelte, а именно директивуon
, модификаторы событий, переброс событий, createEventDispatcher
и т.д.
Смотреть на Rutube
6. Байндинги и Привязки - Svelte Bindings
В этом уроке рассмотрим привязки в Svelte, синтаксис и директивуbind:
, привязки к компонентам и т.д.
Смотреть на Rutube
7. Хранилище Svelte Store
В этом уроке рассмотрим store в Svelte и разновидности хранилищ: writable store (хранилище для записи), readable store (хранилище только для чтения), derived store (производные хранилища) и custom store (пользовательские хранилища). Смотреть на Rutube8. Анимации и переходы в Svelte - Motion, Transition and Animation
В этом видео рассматриваем анимации в Svelte, а именно анимации значений (Svelte motion), анимации переходов (Svelte Transition), Svelte Animate, директивыtransition
, in
, out
и многое другое.
Смотреть на Rutube
9. Действия и директива use - Svelte Actions
В этом видео рассматриваем Действия в Svelte, для чего они нужно и как ими пользоваться. Добавляем в проект директивуuse
, отправляем события из Действия и реализовываем функции действий - destroy
и update
.
Смотреть на Rutube
10. Слоты - Svelte slots. Context Модуль - Svelte module context
В этом видео рассматриваем слоты в Svelte и работу сscript
c context="module"
.
Смотреть на Rutube
11. API контекста - Svelte Context API
В этом видео рассматриваем возможности контекста Svelte, функцииsetContext
, getContext
и hasContext
, а также применение CSS классов по условию.
Смотреть на Rutube