От автора: если вы пользователь 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) как минимум, чтобы произошло это:
const initialState = { //
} function reducer(state = initialState, action) { switch (action.type) { default: return state }
} function MyComponent() { const [state, dispatch] = React.useReducer(reducer, initialState) return <div />
}Вы можете сэкономить драгоценное время и энергию, добавив их в свои сниппеты, как показано ниже:
{ "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 <div />", "}" ] }
}Все, что вам нужно сделать, это нажать rsr, и этот код будет автоматически выписан для вас.
Вот некоторые распространенные сниппеты, которые я люблю использовать в проектах React.
Быстро протестируем элементы 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;" }
}У меня обычно в каждом проекте есть папка components с общими примитивными компонентами, такими как, Button, например:
{ "import Button from 'components/Button'": { "prefix": "btt", "body": "import Button from 'components/Button'" }
}Настройка / очистка чего-либо перед каждым тестом:
{ "beforeEach(() => {})": { "prefix": "bfe", "body": ["beforeEach(() => {", " $1", "})"] }
}Некоторые простые блокировщики линии:
{ "// @ts-ignore": { "prefix": "tsg", "body": "// @ts-ignore" }, "eslint disable line": { "prefix": "eds", "body": "// eslint-disable-line" }
}Импорт react:
{ "import react": { "prefix": "reaa", "body": "import React from 'react'" }
}Это не полный список сниппетов, которые я использую, но надеюсь, что это поможет вам понять, сколько времени и энергии вы можете сэкономить, используя преимущества пользовательских сниппетов.
Бонус: вы можете еще улучшить свой рабочий процесс с Project Snippets, который обеспечивает тот же функционал, плюс уровень рабочей области.
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, вы выделите все вхождения этого ключевого слова.
Это полезно, когда вы хотите переименовать компонент, потому что, очевидно, у нас всегда будут по крайней мере три случая, когда у компонента есть дочерние элементы:
import React from 'react' function App() { return <h2>Useful content</h2>
} function Root() { return ( <App> <p>Will I even be rendered?</p> </App> )
}Если мы хотим переименовать App во что-то еще, нам нужно выбрать объявление компонента, а также два вхождения в блоке рендеринга Root.
6. Ярлык: нахождение файла в проекте
Необходимость все время использовать File Explorer, когда вы ищете определенный файл, может быть разочаровывающей. Это становится большой проблемой, когда вы хотите проанализировать файл в каталоге node_modules , поэтому VSCode делает это за вас:
Красная линия показывает, сколько контента еще нужно прокрутить, а синяя — размер полосы прокрутки, которая сжимается по мере увеличения содержимого. Это влияет на производительность.
Вы можете легко найти и открыть файл, который находится в любом месте проекта, выполнив поиск по его названию, не перемещая мышь ни на миллиметр. Просто нажмите Ctrl + T, введите имя файла, и все готово.
7. Расширение: пользовательское выделение TODO
Это расширение может показаться полезным для забавного использования, но со временем оно стало для меня мощным инструментом в серьезных ситуациях.
Прежде всего, невероятно важно записывать задачи где-то. Это может быть приложение Evernote, блокнот для записей, вырванный лист бумаги и так далее. Если вы используете выделение TODO, как я, вы размещаете задачи прямо поверх кода, который пишете в комментариях. Это невероятно полезно с одновременным использованием TODO Highlights, потому что они становятся цветовыми кодировками на экране, когда вы добавляете префикс строки TODO:, как показано ниже:
Но мощь 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
Источник: https://dev.to
Редакция: Команда webformyself.