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

Здесь вам нужно выполнить начальную настройку Программирование и разработка

Разработчикам React нужен редактор кода, который позволит им продуктивно писать код React. Есть тысячи бесплатных расширений в VS Кодекса рынка, который может помочь перегружать ваш рабочий процесс разработки. В этой статье я выделю ряд расширений и настроек, которые повысят вашу продуктивность кодирования React до профессионального уровня.

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

Внедрение инструментов и методов, перечисленных в этой статье, вероятно, сэкономит вам часы разработки — часы, которые были бы потрачены на решение многих мелких, но важных проблем. Они также помогут вам уменьшить количество ошибок при кодировании. Ключ к продуктивности — автоматизировать как можно больше задач. Следующие расширения и настройки помогут вам достичь этой цели.

Языковая поддержка

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

Ниже приведён снимок вкладки » Добро пожаловать». Вы всегда можете найти его в меню » Справка «.

Здесь вам нужно выполнить начальную настройку

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

Расширение языка JavaScript

На вкладке Добро пожаловать в разделе Инструменты и языки щёлкните ссылку JavaScript для установки. Появится запрос на перезагрузку, который вы должны нажать, чтобы новая функция вступила в силу.

Расширение языка JavaScript предоставляет несколько функций, в том числе:

  • Intellisense
  • Фрагменты
  • Поддержка JSDoc
  • Информация о наведении
  • Авто импорт

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

На рисунке ниже показан пример использования Intellisense и автоматического импорта в действии.

На рисунке ниже показан пример использования Intellisense и автоматического импорта в действии

Когда нажата клавиша табуляции, Headerкомпонент импортируется вверху. Закрывающий >символ должен быть набран в, который будет автозаполнения код как: <Header><Header/>.

После установки языковой функции JavaScript VS Code может предложить вам предоставить jsconfig.jsonфайл в корне вашего проекта. В этом нет необходимости, но настройка этого параметра поможет IntelliSense предоставлять более точные подсказки. Вот пример конфигурации:
{
  "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",

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

Читайте также:  5 лучших концепций программирования на C для разработчиков

Поддержка 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

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

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

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

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

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

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:

Приставка

Метод

imp→ import moduleName from ‘module’
imn→ import ‘module’
imd→ import { destructuredModule } from ‘module’
exp→ export default moduleName
exd→ export { destructuredModule } from ‘module’
edf→ export default (params) => { }
nfn→ const functionName = (params) => { }
dob→ const {propName} = objectToDescruct

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

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

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

import React from 'react'

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

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

Рефакторинг

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

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

который поможет вам выполнить рефакторинг кода всего за два шага

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

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

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

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

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

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

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

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

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

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

Linting

Linting в React — важная часть цепочки инструментов TDD, которая помогает вам создавать высококачественный код. Это также важный шаг, когда база кода используется командой разработчиков, поскольку она обеспечивает единый стиль кодирования для всех. Линтинг чрезвычайно полезен для выявления ошибок при вводе нового кода.ESLint — самый популярный линтер JavaScript, который проще всего настроить и настроить. ESLint имеет ряд плагинов, поддерживающих библиотеку React. Поддержка ESLint в VS Code обеспечивается расширением ESLint. Когда он активен, VS Code будет постоянно запускать ESLint в фоновом режиме и выделять вам ошибки по мере ввода и сохранения кода. Расширение также предоставляет возможность автоматического исправления проблем через контекстное меню.Как и в случае с Prettier, существует ряд шагов, которые необходимо выполнить для работы расширения ESLint. Настройка ESLint в VS Code для работы с вашим проектом — это немного сложный процесс, и я рекомендую вам посмотреть это видео о том, как установить и настроить ESLint.Если вам нужна дополнительная информация о линтинге JavaScript, ознакомьтесь с нашей статьёй » Начало работы с ESLint «. Вы должны знать, что есть eslint-plugin-prettierплагин, который необходимо установить, чтобы Prettier и ESLint работали вместе.Доступны и другие инструменты линтера, но вы, вероятно, решите, что ESLint — лучший.

Заключение

Подойдя к концу этой статьи, я хотел бы упомянуть, что есть ещё много расширений JavaScript VS Code, которые могут вас заинтересовать. Одно расширение, которое я хотел бы выделить, — это Bracket Pair Colorizer 2. Я нашёл это очень полезным для определения длинных участков блоков кода. Расширение придаёт каждой паре совпадающих скобок разный цвет, что позволяет легко увидеть, где заканчивается один блок кода и начинается другой.

Мы также живём в эпоху искусственного интеллекта, и для меня было бы благоразумно упомянуть о новых расширениях разработки с использованием искусственного интеллекта, которые теперь доступны на торговой площадке VS Code. У меня пока нет большого опыта работы с ними, но я подумал, что перечислю здесь самые известные:

  • Tabnine Автозаполнение AI.
  • Автозаполнение кода AI кайт.
  • Visual Studio IntelliCode.

Судя по моим исследованиям, Табнин, похоже, пользуется наибольшей любовью у разработчиков JavaScript. Он хорошо предсказывает следующую строку кода, предлагая лучшие предложения, чем IntelliSense. Вот интересный разговор о расширении:

Я надеюсь, что это руководство поможет вам значительно улучшить скорость кодирования и производительность при разработке проектов React с использованием VS Code.

 

Оцените статью
bestprogrammer.ru
Добавить комментарий