Как настроить VS Code для разработки на React

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./src/*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", ".cache", "dist"]
}

Приведённая выше конфигурация сообщает языковому серверу JavaScript, какие файлы являются частью вашего исходного кода, а какие нет. Это гарантирует, что языковая служба анализирует только ваш исходный код и, следовательно, работает быстро.

Поддержка TypeScript

TypeScript настоятельно рекомендуется, если вы планируете создавать крупномасштабные и сложные проекты React. Это связано с тем, что TypeScript обеспечивает безопасность типов и, таким образом, снижает вероятность доставки ошибочного кода в ваших интерфейсных приложениях. VS Code обеспечивает поддержку языка TypeScript из коробки, предоставляя ряд функций, таких как:

• Синтаксис и семантическое выделение
• IntelliSense
• Фрагменты
• Поддержка JS Doc
• Информация о наведении и справка по подписям
• Форматирование
• JSX и автоматически закрывающиеся теги

В TypeScript код JSX записывается с.tsxрасширениями файлов. После компиляции на выходе будет файл с.jsxрасширением.

Обратите внимание, что VS Code не предоставляет компилятор для TypeScript. Вы должны установить его в своей глобальной среде Node.js следующим образом:

npm install -g typescript

В качестве альтернативы вы можете установить расширение Compile Hero Pro, которое предоставляет компилятор для TypeScript и многих других языков, включая:

• Меньше
• Sass, SCSS
• Стилус
• Нефрит
• Мопс

Расширение предоставляет гораздо больше настраиваемых параметров того, когда и как компилировать ваш TypeScript и код стиля. Если вы хотите узнать больше о настройке React и TypeScript, я рекомендую вам ознакомиться с другой нашей статьёй » React with TypeScript: Best Practices » для более подробного объяснения.

Flow

Flow — это альтернатива Facebook для TypeScript. Он предоставляет те же функции, но работает только с проектами React и менее популярен. VS Code не поддерживает его изначально, но вы можете установить расширение Flow Language Support, которое предоставляет ограниченное количество функций, таких как IntelliSense и Rename.

Настройки раскладки клавиатуры

Если вы переходите на VS Code из другого редактора кода, вы будете рады узнать, что можете продолжать использовать те же сочетания клавиш, к которым вы уже привыкли. Если вы новичок в редакторах кода, пропустите этот раздел. Однако, если вы раньше использовали редакторы кода, вы, вероятно, знаете, что повторная тренировка мышечной памяти непродуктивна и требует времени, чтобы приспособиться.

На вкладке » Добро пожаловать » в разделе » Настройки и привязки клавиш» вы увидите ссылки для установки сочетаний клавиш для Vim, Sublime, Atom и других. Если вы щёлкните ссылку » Другие «, вы получите полный список раскладок, которые можно установить.

Раньше я был пользователем Atom, прежде чем переключился на VS Code. Настроить раскладку Atom в VS Code так же просто. Это установит для меня расширение Atom Keymap. settings.json Чтобы сделать VS Code более «похожим на атом», требуется следующая конфигурация :

// Controls whether the prompt will show
"atomKeymap.promptV3Features": true,

// Changes the multi cursor mouse binding
"editor.multiCursorModifier": "ctrlCmd",

// Open folders(projects) in new window without replacing the current one
"window.openFoldersInNewWindow": "on",

Обязательно прочтите инструкции по настройке вашего расширения сочетаний клавиш. Документацию можно найти, просто щёлкнув расширение раскладки клавиатуры на панели расширений.

Поддержка Emmet JSX

Emmet — это набор инструментов для веб-разработки, который позволяет более эффективно писать HTML-код. Если вы новичок в Эммете, посмотрите демо, чтобы увидеть, как это работает.

VS Code поставляется со встроенным Emmet и уже поддерживает синтаксис JSX. К сожалению, большинство стартовых проектов React используют это.jsрасширение. Проблема в том, что VS Code не распознаёт такие файлы как код React, поэтому функции JSX не активируются. Есть два способа исправить это:

1. Переименуйте все свои файлы с кодом JSX в.jsxрасширение ( рекомендуется).
2. Настройте VS Code для распознавания всех.jsфайлов как файлов React. Обновите ваш jsonследующим образом:

"emmet.includeLanguages": {
  "javascript": "javascriptreact"
}

Чтобы получить доступ settings.json, просто перейдите на вкладку верхнего меню и нажмите » Вид» > » Палитра команд«. Введите «настройки», а затем выберите » Настройки«: «Открыть настройки» (JSON). Или вы можете нажать Ctrl+, а Pзатем ввести «settings.json», чтобы быстро открыть файл. Вы также можете использовать ярлык Ctrl+,,чтобы открыть версию пользовательского интерфейса настроек в новой вкладке. Первая иконка в правом верхнем углу откроется, settings.jsonкогда вы нажмёте на неё.

Второй вариант кажется самым простым. К сожалению, это вызывает проблемы с другими инструментами разработки JavaScript, такими как eslint-config-airbnb, в котором есть набор правил, обеспечивающий.jsxрасширение файла для кода React. Отключение этого правила позже вызовет другие проблемы.

Официальный Реагировать команды делать рекомендуется использовать.jsрасширение для React кода. По моему личному опыту, лучше переименовать все файлы с кодом React в.jsxи использовать.jsрасширение для файлов, содержащих простой код JavaScript. Таким образом, у вас будет более простой рабочий процесс со всеми инструментами разработки.

Форматирование

Написание высококачественного кода требует написания последовательного кода. Как разработчики мы люди, и очень легко забыть стандарты, которые мы для себя установили. В этом разделе мы рассмотрим основные инструменты, которые помогут нам автоматизировать написание согласованного кода.

EditorConfig

EditorConfigэто простой файл конфигурации, который содержит только правила форматирования. Вам нужно будет установить расширение, которое позволит VS Code читать эти правила и отменять свои собственные. Просто выполните следующие шаги, чтобы настроить его:

1. Установите EditorConfig длярасширения VS Code. Обратите внимание, что это переопределит настройки пользователя / рабочей области настройками, найденными в.editorconfigфайлах.
2. Создайте.editorconfigфайл в корне вашего проекта и скопируйте этот пример конфигурации:

# editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

VS Code теперь будет соблюдать эти правила для форматирования вашего кода. Давайте быстро поговорим о окончаниях строк. Windows использует CRLFдля обозначения завершения строки, в то время как системы на базе UNIX используют LF. Если вы используете файлы со смешанными окончаниями строк, вы столкнётесь с рядом проблем при фиксации файлов. Вы можете настроить Git на обработку окончаний строк.

Подход, который я предпочитаю, заключается в том, чтобы просто заставить все файлы проекта на любой платформе использовать LFокончания строк. Обратите внимание, что EditorConfigне будет преобразовывать окончания строк для существующих файлов. Он установит только LFдля новых файлов. Чтобы преобразовать все существующие файлы, у вас есть два варианта:

• сделайте это вручную (щёлкните текст CRLF в строке состояния, чтобы переключиться);
• используйте prettierдля форматирования всех ваших файлов.

Prettier

Prettier — это программа для форматирования кода, которую проще всего настроить для кода JavaScript. Он поддерживает JavaScript, TypeScript, JSX, CSS, SCSS, Less и GraphQL. Чтобы настроить его, выполните следующие действия:

1. Установите похорошелакод форматера расширения.

2. Убедитесь, что VS Code использует Prettier в качестве средства форматирования по умолчанию. Обновите jsonследующим образом:

"editor.defaultFormatter": "esbenp.prettier-vscode", // Use prettier as default formatter
   "editor.formatOnPaste": true, // format code on paste
   "editor.formatOnType": true, // format code as you type
   "editor.formatOnSave": true, // format code when you hit save
   "files.trimTrailingWhitespace": true, // remove trailing white spaces from all lines
   "files.trimFinalNewlines": true, // Ensures there's only one blank line at the end of the file

3. Установите Prettier в качестве зависимости разработчика в вашем проекте: npm install —save-dev prettierилиyarn add -D prettier.
4. Создайте.prettierrcи скопируйте следующие примеры правил:

  {
     "arrowParens": "avoid", // Omit parenthesis when possible. Example: `x => x`. If set to "always", the example would be` (x) => x`
     "semi": false // removes semicolons at the end of JavaScript statements
   }

5. Обновите json, добавив эту команду в свой scriptsраздел:

{
  "scripts": {
    "format": "prettier --ignore-path .gitignore --write ."
  }
}

Шаги 3–5 вам придётся проделать для каждого проекта, который Prettier должен поддерживать. Теперь вы можете щёлкнуть formatкоманду под npm scriptsпанелью VS Code, как показано на скриншоте ниже.

Как вариант, вы можете просто запустить команду npm run formatPrettier.

Это приведёт к тому, что все ваши файлы будут переформатированы правильно и последовательно в соответствии с правилами Prettier по умолчанию и теми, которые вы переопределили в.prettierrcи.editorconfigфайлах. Окончания строк также будут согласованы.

Как вы могли заметить, настройки формата кода теперь расположены в трёх разных местах. Вы можете задаться вопросом, что произойдёт, если у нас будут противоречивые правила. Если Prettier активирован, он будет обрабатывать эти правила в соответствии со следующим приоритетом:

1. Файл конфигурации красивее.
2. .editorconfig.
3. Настройки кода VS (игнорируются, если присутствует какая-либо другая конфигурация).

Более красивая конфигурация имеет приоритет в случае конфликта.

HTML в JSX

Любой достойный разработчик знает, что HTML-код, который вы нашли где-то в Интернете, часто копируют и вставляют в свой код React. Для этого часто требуется преобразовать атрибуты HTML в допустимый синтаксис JSX. К счастью, есть расширение под названием html to JSX, которое выполнит преобразование за вас. После его установки вы сможете легко:

• конвертировать существующий HTML-код в JSX;
• преобразовать HTML-код в действительный синтаксис JSX при вставке.

Это означает, что такие атрибуты classбудут преобразованы в className. Это действительно большая экономия времени.

Реагировать на фрагменты

На торговой площадке VS Code есть множество расширений сниппетов для проектов JavaScript. Для React наиболее популярными являются фрагменты ES7 React / Redux / GraphQL / React-Native. После того, как вы установите этот, вам, вероятно, не нужно будет устанавливать ещё один, так как он содержит более чем достаточно фрагментов, чем вы можете запомнить.

Вот образец фрагментов кода JavaScript:

Расширение предоставляет множество других фрагментов, относящихся к:

• Реагировать
• React Native
• Redux
• GraphQL
• PropTypes
• Консоль
• Сценарии тестирования

Есть также фрагменты, которые вставляют полные компоненты React. Например, набрав «rfc» и затем нажав, tabвы вставите следующий фрагмент компонента React:

import React from 'react'

export default function $1() {
  return <div>$0</div>
}

Если вы собираетесь установить это расширение, вам лучше запомнить хотя бы несколько фрагментов, которые помогут вам писать код быстрее. Использование фрагментов быстрее, чем копирование и вставка.

Рефакторинг

Написание кода React часто требует написания простых и быстрых операторов для ранней проверки функциональности. Довольно часто возникает необходимость повторно использовать написанный код. Это означает, что вам необходимо извлечь и реорганизовать свой код, чтобы выполнить мантру «напиши один раз, используй везде».

Вы можете потратить время на рефакторинг кода вручную или ускорить процесс с помощью VS Code React Refactor, который поможет вам выполнить рефакторинг кода всего за два шага.

Довольно аккуратно, правда?

Авто Инструменты

В этом разделе мы рассмотрим расширения, которые помогут вам автоматизировать частые операции с кодом по мере ввода.

Автоматическое закрытие тега

Не используя Emmet, расширение Auto Close Tag может помочь вам автоматически закрыть теги JSX. Он также помещает курсор между тегами, как только он закрывается.

Вот небольшая демонстрация расширения в действии:

Автоматическое переименование тега

Когда вы пишете код JSX, вы часто будете переименовывать теги, например, <div>в <section>. Когда вы выполняете эти изменения, закрывающий тег остаётся неизменным. Менять его вручную сложно, особенно если это обычное явление. Вы можете автоматизировать переименование тегов, установив расширение Auto Rename Tag. После установки он будет автоматически переименовывать ваш закрывающий тег в реальном времени, когда вы редактируете открывающий тег.

Linting