От создателя: если вы юзер VSCode и любите разрабатывать проекты React, то вы, возможно, много раз имели дело с раздражающим циклическим кодом, таковым как React.useState, React.useContext, React.useReducer(reducer, initialState), и так дальше.
Эти отдельные клавиши разбросаны в различных направлениях на клавиатуре, и это может раздражать, когда наши бедные пальцы набирают эти знаки опять и опять во всех проектах React. Если вы печатаете React.useState на клавиатуре, ваши кончики пальцев будут двигаться в последующих направлениях:
Может быть, я очень живо воспринимаю эту ординарную делему, но этот пост не о нажатиях кнопок. Это касается нажатия кнопок и почти всех остальных вещей, когда мы разрабатываем приложения React. Я сообразил, что мы должны очень применять все имеющиеся у нас способности для смягчения ненадобного стресса, поэтому что наше здоровье и время драгоценны.
С учетом вышесказанного, я желал бы, чтоб этот пост посодействовал таковым разрабам, как вы, и вы отыскали методы сберечь как можно больше времени и энергии. Потому я расскажу для вас о нужных приемах, которые вы сможете применять для убыстрения процесса разработки React!
1. Расширение: User Snippets
Я лицезрел много восхитительных вещей, которые случались с разрабами React за всю историю его существования, и User Snippets — одна из их.
Это комфортное расширение VSCode дозволяет определять собственные сниппеты, которые вы сможете применять нескончаемое количество раз в проектах, просто нажав пару букв.
Я работаю в компании, которая разрабатывает свою платформу на React, и, к моему удивлению, некие создатели даже не подозревают, что эта функция совершенно существует.
Так что все-таки она делает? Эта функция дозволяет создавать хоть какой пользовательский сниппет, который вы сможете сгенерировать прямо над кодом, просто набрав пару букв (которые вы объявляете с своим префиксом).
К примеру, когда мы создаем новейший компонент, который будет применять React.useReducerAPI, нам, возможно, придется объявить изначальное состояние, функцию редуктора и что-то вроде [state, dispatch] = React.useReducer(reducer, initialState) как минимум, чтоб вышло это:
JavaScript const initialState = { //
}
function reducer(state = initialState, action) { switch (action.type) { default: return state }
}
function MyComponent() {
const [state, dispatch] = React.useReducer(reducer, initialState)
return
}
| 12345678910111213141516 | const initialState = { //} function reducer(state = initialState, action) { switch (action.type) { default: return state }} function MyComponent() { const [state, dispatch] = React.useReducer(reducer, initialState) return } |
Вы сможете сберечь драгоценное время и энергию, добавив их в свои сниппеты, как показано ниже:
JavaScript { «my React.useReducer snippet»: { «prefix»: «rsr», «body»: [ «const initialState = {«, » //$1″, «}», «», «function reducer(state = initialState, action) {«, » switch (action.type) {«, » default:», » return state», » }», «}», «», «function MyComponent() {«, » const [state, dispatch] = React.useReducer(reducer, initialState)», » «, » return », «}» ] }
}
| 1234567891011121314151617181920212223 | { «my React.useReducer snippet»: { «prefix»: «rsr», «body»: [ «const initialState = {«, » //$1″, «}», «», «function reducer(state = initialState, action) {«, » switch (action.type) {«, » default:», » return state», » }», «}», «», «function MyComponent() {«, » const [state, dispatch] = React.useReducer(reducer, initialState)», » «, » return », «}» ] }} |
Все, что для вас необходимо создать, это надавить rsr, и этот код будет автоматом выписан вам.
Вот некие всераспространенные сниппеты, которые я люблю применять в проектах React.
Стремительно протестируем элементы CSS, чтоб найти, верно ли они смотрятся, задав им временные границы:
CSS { «border test»: { «prefix»: «b1», «body»: «border: 1px solid red;» }, «border test2»: { «prefix»: «b2», «body»: «border: 1px solid green;» }, «border test3»: { «prefix»: «b3», «body»: «border: 1px solid magenta;» }, «border test4»: { «prefix»: «b4», «body»: «border: 1px solid blue;» }, «border test5»: { «prefix»: «b5», «body»: «border: 1px solid #fe7200;» }
}
| 12345678910111213141516171819202122 | { «border test»: { «prefix»: «b1», «body»: «border: 1px solid red;» }, «border test2»: { «prefix»: «b2», «body»: «border: 1px solid green;» }, «border test3»: { «prefix»: «b3», «body»: «border: 1px solid magenta;» }, «border test4»: { «prefix»: «b4», «body»: «border: 1px solid blue;» }, «border test5»: { «prefix»: «b5», «body»: «border: 1px solid #fe7200;» }} |
У меня обычно в любом проекте есть папка components с общими простыми компонентами, таковыми как, Button, к примеру:
JavaScript { «import Button from ‘components/Button’»: { «prefix»: «btt», «body»: «import Button from ‘components/Button’» }
}
| 123456 | { «import Button from ‘components/Button’»: { «prefix»: «btt», «body»: «import Button from ‘components/Button’» }} |
Настройка / чистка чего-либо перед каждым тестом:
JavaScript { «beforeEach(() => {})»: { «prefix»: «bfe», «body»: [«beforeEach(() => {«, » $1″, «})»] }
}
| 123456 | { «beforeEach(() => {})»: { «prefix»: «bfe», «body»: [«beforeEach(() => {«, » $1″, «})»] }} |
Некие обыкновенные блокировщики полосы:
JavaScript { «// @ts-ignore»: { «prefix»: «tsg», «body»: «// @ts-ignore» }, «eslint disable line»: { «prefix»: «eds», «body»: «// eslint-disable-line» }
}
| 12345678910 | { «// @ts-ignore»: { «prefix»: «tsg», «body»: «// @ts-ignore» }, «eslint disable line»: { «prefix»: «eds», «body»: «// eslint-disable-line» }} |
Импорт react:
JavaScript { «import react»: { «prefix»: «reaa», «body»: «import React from ‘react’» }
}
| 123456 | { «import react»: { «prefix»: «reaa», «body»: «import React from ‘react’» }} |
Это не полный перечень сниппетов, которые я использую, но надеюсь, что это поможет для вас осознать, сколько времени и энергии вы сможете сберечь, используя достоинства пользовательских сниппетов.
Приз: вы сможете еще сделать лучше собственный рабочий процесс с Project Snippets, который обеспечивает этот же функционал, плюс уровень рабочей области.
Google запустил масштабный апдейт локальной выдачи
2. Расширение: Prettier
Если вы не используете Prettier, пожалуйста, я прошу вас — бросьте все и используйте его.
3. Расширение + пакет: TypeScript + ESLint
Приблизительно четыре года вспять, когда промисы официально были введены в ECMAScript 2015 Specification, экосистема React пережила неслыханный скачок технологий, которые изменили метод разработки веб-приложений.
TypeScript был посреди их, так как он пробивался в экосистему React и равномерно стал обширно всераспространен в обществе — и на другими словами весомые предпосылки!
TypeScript — это мощнейший инструмент, который дозволяет сберечь много времени и энергии, сводя к минимуму возможность появления возможных ошибок.
В дополнение к функциям, которые он обычно предоставляет, TypeScript помогает документировать составляющие React, предутверждает будущие ошибки и учит вас многому о самом JavaScript, без необходимости тратиться на книжки, чтоб изучить странноватые вещи этого языка.
Внедрение TypeScript с ESLint в проекты React поможет в ситуациях, когда вы не осознаете, как работает React:
4. Ярлычек: двойная линия ввысь / вниз
Ctrl + D сбережет для вас много времени.
5. Ярлычек: отыскать все вхождения в текущем файле
Выделив в файле ключевое слово по вашему выбору и нажав Ctrl + Shift + L, вы выделите все вхождения этого главного слова.
Это полезно, когда вы желаете переименовать компонент, поэтому что, разумеется, у нас постоянно будут по последней мере три варианта, когда у компонента есть дочерние элементы:
JavaScript import React from ‘react’
function App() { return
Useful content
}
function Root() { return (
Will I even be rendered?
)
}
| 12345678910111213 | import React from ‘react’ function App() { return
Useful content} function Root() { return ( Will I even be rendered? )} |
Если мы желаем переименовать App во что-то еще, нам необходимо избрать объявление компонента, также два вхождения в блоке рендеринга Root.
6. Ярлычек: нахождение файла в проекте
Необходимость всегда применять File Explorer, когда вы ищете определенный файл, быть может разочаровывающей. Это становится большенный неувязкой, когда вы желаете проанализировать файл в каталоге node_modules , потому VSCode делает это за вас:
Красноватая линия указывает, сколько контента еще необходимо прокрутить, а голубая — размер полосы прокрутки, которая сжимается по мере роста содержимого. Это влияет на производительность.
Вы сможете просто отыскать и открыть файл, который находится в любом месте проекта, выполнив поиск по его наименованию, не перемещая мышь ни на мм. Просто нажмите Ctrl + T, введите название файла, и все готово.
7. Расширение: пользовательское выделение TODO
Это расширение может показаться полезным для смешного использования, но с течением времени оно сделалось для меня массивным инвентарем в суровых ситуациях.
До этого всего, неописуемо принципиально записывать задачки кое-где. Это быть может приложение Evernote, блокнот для записей, вырванный лист бумаги и так дальше. Если вы используете выделение TODO, как я, вы располагаете задачки прямо поверх кода, который пишете в комментах. Это неописуемо полезно с одновременным внедрением TODO Highlights, поэтому что они стают цветовыми шифровками на дисплее, когда вы добавляете префикс строчки TODO:, как показано ниже:
YouTube добавил две новые метрики по посещаемости канала
Но мощь TODO Highlights начинает проявлять себя еще более, когда вы начинаете создавать собственные главные слова и цветовые эффекты для их:
Это сделалось ценной функцией, поэтому что я могу стремительно сосредоточиться, также осознать, что происходит в любом файле, независимо от того, с чем на данный момент работаю.
Мое любимое ключевое слово todohighlight — BUG:, поэтому что оно красноватое. Обычно мы ассоциируем красноватый с ошибками либо кое-чем небезопасным, потому это просто завлекает мое внимание к критичным частям кода:
8. Расширение: (Неважно какая крутая тема в Visual Studio Marketplace)
Разработка приложений React в сочетании с классной цветовой темой VSCode была весьма принципиальным фактором, позволяющим мне веселиться и облагораживать свойство кода.
Неописуемо принципиально применять понравившуюся тему, поэтому что цветовые коды компонент React имеют определенный «наружный вид» либо «восприятие», что поможет для вас легче разрабатывать приложения React, как мы лицезреем ниже:
Не составляющие
Составляющие
9. Расширение: сниппеты ES7 React / Redux / GraphQL / React-Native
Это будет весьма полезно вам. Лично я больше не пользуюсь сиим, поэтому что я использую собственные сниппеты. Но в прошедшем это оказало большущее положительное воздействие на мой рабочий процесс.
10. Функция: хлебные крошки
Мальчишка, время буквально летит стремительно! Такое чувство, что хлебные крошки в VScode были введены еще вчера.
Они как и раньше упрощают мне разработку React, в то время, когда я меньше всего этого ожидаю.
Беря во внимание природу иерархии дочерних / родительских компонент активного компонента, так и обязано быть (если вы выстроили структуру каталогов в согласовании с иерархией), так как в главном это указывает, что файл компонента был получен из родительского каталога (у меня он почти всегда является компонентом, который по дефлоту экспортируется из файла index.tsx):
Приведенные выше хлебные крошки демонстрируют, что Add — это дочерний элемент элемента Birthdays, который является маршрутом в компоненте Admin.
Хлебные крошки включены по дефлоту. Но дело в том, чтоб не принимать функцию хлебных крошек как подабающее. Они стают полезным нежданным образом, потому уделите им больше внимания!
Приз: несколько нужных советов и хитростей для интересующихся.
Заключение
На этом мы заканчиваем данный пост! Я надеюсь, что вы отыскали его полезным!
Создатель: jsmanifest
Редакция: Команда webformyself.
Источник
Вам также может понравиться