Перевод статьи «10 Practices in VSCode to Hasten Your React Development Flow».
Если вы пользуетесь Visual Studio Code и любите разрабатывать проекты на React, вам, вероятно, приходится многократно повторять код вроде React.useState, React.useContext, React.useReducer(reducer, initialState) и т. п.
Даже буквы, из которых состоят эти выражения, разбросаны в разных частях клавиатуры, а ведь нашим бедным пальцам приходится набирать их в каждом проекте. Это раздражает.
Например, если вы набираете на клавиатуре React.useState, ваши пальцы будут двигаться примерно так:
Может показаться, что я на пустом месте впадаю в излишний драматизм, но вообще мой пост будет не о сокращениях клавиш. Он будет о сокращениях клавиш и множестве других полезных вещей, которые можно применять в ежедневной работе с React-проектами. Мы должны использовать любые доступные возможности, чтобы убрать ненужный стресс, поскольку и здоровье, и время очень ценны.
Я решил написать этот пост, чтобы помочь React-разработчикам, таким, как мы с вами, ускорить разработку и таким образом сэкономить как можно больше времени и сил.
1 Расширение: User Snippets
С React-разработчиками за всю историю существования React произошло много чудесных вещей, и появление User Snippets — одна из них.
Это удобное расширение VSCode позволяет вам определять ваши собственные пользовательские сниппеты, которые вы можете затем использовать в своих проектах неограниченное число раз. И для этого вам понадобится набирать лишь пару букв.
Я работаю в компании, которая работает на платформе, созданной на React. Но, к моему удивлению, здесь были люди, даже не подозревавшие о существовании такой полезной фичи.
Что же это за функционал?
Расширение User Snippets позволяет вам создать любой пользовательский сниппет (отрывок кода), который вы впоследствии сможете генерировать в своем коде, введя пару букв с клавиатуры (буквы задаются при создании сниппета в качестве префикса).
Возьмем пример. Скажем, нам нужно создать новый компонент, где будет использоваться API React.useReducer. Вероятно, нам понадобится объявить его начальное состояние, функцию reducer и что-то вроде [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'"
}
}
Это далеко не полный набор сниппетов, которыми я пользуюсь, но, надеюсь, вы поняли, сколько времени можно сэкономить с помощью User Snippets.
Бонус: можно пойти еще на шаг дальше и использовать Project Snippets — тот же функционал, только на уровне рабочего пространства.
2. Расширение: Prettier
Если вы не используете Prettier, прошу вас: бросайте все и устанавливайте его.
3. Расширение + пакет: TypeScript + ESLint
Примерно 4 года назад Promises официально вошли в спецификацию ECMAScript 2015. В то время экосистема React стремительно расширялась и пополнялась революционными технологиями, изменившими наши подходы к разработке веб-приложений.
TypeScript был одной из таких технологий. Он пробился в экосистему React, и постепенно сообщество стало все больше применять его в работе. И не без причины!
TypeScript это очень мощный инструмент, позволяющий экономить много времени и сил еще до того, как какие-нибудь баги в принципе могут возникнуть.
Помимо основного функционала, он помогает документировать ваши React-компоненты и предотвращать появление багов. Кроме того, благодаря ему вы многое узнаете о самом JavaScript, и для этого вам не придется корпеть над книгами.
Применение в ваших проектах TypeScript в паре с ESLint поможет вам в ситуациях, когда вы упускаете из внимания работу 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
Это расширение может показаться просто любопытной финтифлюшкой, но со временем я понял, какой это мощный инструмент.
Прежде всего, очень важно записывать все TODO в такое место, где вы будете их просматривать (как вариант — вносить в программу, которая будет вам о них напоминать). Это может быть приложение Evernote, ваша записная книжка, пришпиленный где-нибудь листочек и т. д.
Если вы, как и я, используете TODO Highlights, вы помещаете TODO в комментарии к коду. И благодаря этому расширению слово TODO в начале комментария подсвечивается:
Но настоящая мощь TODO Highlights проявляется, когда вы начинаете создавать собственные ключевые слова и прописывать для них цветовые эффекты:
Благодаря этому функционалу можно гораздо быстрее понять, что происходит в коде, когда бы вы к нему ни вернулись.
Мое любимое ключевое слово — BUG (выделяется красным). Обычно мы ассоциируем красный цвет с ошибками или опасностью, поэтому красный цвет в комментариях легко привлекает внимание к критически важным частям кода:
8. Расширение: любая хорошая тема в Visual Studio Marketplace
Хорошая цветовая тема VSCode имеет большое значение при разработке приложений. Она приносит эстетическое удовольствие, что способствует повышению качества кода.
Использовать тему, которая вам нравится, очень важно: определенный внешний вид компонентов облегчает разработку на React.
Не-компоненты
Компоненты
9. Расширение: сниппеты ES7 React/Redux/GraphQL/React-Native
Лично я этими сниппетами больше не пользуюсь, потому что у меня теперь свои есть. Но раньше они очень помогали мне в рабочем процессе.
10. Функционал: Breadcrumbs («хлебные крошки»)
Как летит время! Кажется, Breadcrumbs лишь недавно появились в VSCode. Этот функционал очень сильно помогает мне в работе с React, порой даже совсем неожиданно.
Компоненты в React по своей природе иерархичны (есть родительские, а есть потомки). И если вы строите свою структуру директории в соответствии с этой иерархией, функционал Breadcrumbs будет показывать вам, что файл компонента происходит из родительской директории:
В этом примере Breadcrumbs показывают мне, что Add — потомок Birthdays, а весь путь ведет нас к компоненту Admin.
Функционал Breadcrumbs включен по умолчанию. Я лишь хочу обратить ваше внимание на его важность. Он очень сильно помогает вам, не привлекая внимания, так что не воспринимайте его как нечто само собой разумеющееся.
Бонус: несколько приемов, связанных с Breadcrumbs.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]