10 советов по использованию VSCode для ускорения разработки на React

0
408
views

Перевод статьи «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.

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here