Разработчикам React нужен редактор кода, который позволит им продуктивно писать код React. На рынке VS Code есть тысячи бесплатных расширений, которые могут ускорить ваш рабочий процесс разработки. В этой статье я расскажу о некоторых расширениях и настройках, которые поднимут вашу производительность программирования React на профессиональный уровень.
Некоторые из расширений, которые я перечислю здесь, не являются специфическими для React, но тем не менее они повысят вашу эффективность и скорость кодирования. На самом деле вы найдете лишь несколько расширений, которые будут действительно полезны в вашем ежедневном графике написания кода.
Внедрение инструментов и методов, перечисленных в этой статье, вероятно, сэкономит вам часы работы по разработке — часы, которые были бы потрачены впустую на решение множества мелких, но важных проблем. Они также помогут вам уменьшить количество ошибок кодирования. Ключом к продуктивности является автоматизация как можно большего количества задач. Следующие расширения и настройки помогут вам достичь этой цели.
Языковая поддержка
Когда вы устанавливаете VS Code в первый раз, он предоставляет множество готовых функций без использования
Ниже приведен снимок вкладки «Добро пожаловать „. Вы всегда можете найти его в меню „Справка“.
новая установка vscode
Здесь вам нужно выполнить первоначальную настройку. Поскольку наше внимание сосредоточено на React, мы начнем с настройки расширения языка JavaScript, которое предоставит нам дополнительные функции, необходимые для повышения производительности нашего рабочего процесса кодирования.
Расширение языка JavaScript
На вкладке Добро пожаловать в разделе Инструменты и языки щелкните ссылку JavaScript для установки. Появится запрос на перезагрузку, который вы должны нажать, чтобы новая функция вступила в силу.
Расширение языка JavaScript предоставляет несколько функций, в том числе:
Интеллисенс
Фрагменты
Поддержка JSDoc
Информация при наведении
Авто импорт
Полный список и документацию по этим функциям можно найти в документации VS Code. Я настоятельно рекомендую вам прочитать каждую функцию, чтобы узнать, как использовать их в процессе разработки.
На рисунке ниже показан пример Intellisense и автоматического импорта в действии.
демонстрация автозаполнения
При нажатии клавиши табуляции Headerкомпонент импортируется сверху. >Необходимо ввести закрывающий символ, который автоматически заполнит код следующим образом.
После установки функции языка JavaScript VS Code может предложить вам предоставить jsconfig.jsonфайл в корне вашего проекта. Это не обязательно, но настройка поможет IntelliSense предоставлять более точные подсказки. Вот пример конфигурации:
{
„compilerOptions“: {
„module“: „commonjs“,
„target“: „es6“,
„baseUrl“: „.“,
„paths“: {
„~/*“: [“. /*"],
„@/*“: [». /src/*"],
«~~/*»: [». /*"],
«@@/*»: [». /*"]
}
},
«exclude»: [«node_modules», «.cache», «dist»]
}
Приведенная выше конфигурация сообщает языковому серверу JavaScript, какие файлы являются частью вашего исходного кода, а какие нет. Это гарантирует, что языковая служба анализирует только ваш исходный код и, следовательно, работает быстро. Полная конфигурация описана здесь с объяснением всех возможных значений, которые можно использовать в файлах jsconfig.js.
Поддержка машинописного текста
TypeScript настоятельно рекомендуется, если вы хотите создавать крупномасштабные и сложные проекты React. Это связано с тем, что TypeScript обеспечивает безопасность типов и, таким образом, снижает вероятность появления кода с ошибками в ваших интерфейсных приложениях. VS Code предоставляет поддержку языка TypeScript из коробки, предоставляя ряд функций, таких как:
Подсветка синтаксиса и семантики
IntelliSense
Фрагменты
Поддержка
Информация при наведении и справка по подписи
Форматирование
JSX и автоматически закрывающиеся теги
Полный список задокументирован здесь. В TypeScript код JSX записывается в.tsxрасширениях файлов. При компиляции результатом будет файл с.jsxрасширением.
Обратите внимание, что VS Code не предоставляет компилятор для TypeScript. Вы должны установить его в своей глобальной среде Node.js следующим образом:
npm install -g typescript
В качестве альтернативы вы можете установить расширение Compile Hero Pro, которое предоставляет компилятор для TypeScript и многих других языков, в том числе:
Меньше
Сасс, SCSS
Стилус
Джейд
Мопс
Расширение предоставляет гораздо больше настраиваемых параметров того, когда и как компилировать код TypeScript и стиль. Если вы хотите узнать больше о настройке React и TypeScript, я бы порекомендовал вам ознакомиться с другой нашей статьей «React with TypeScript: Best Practices «для более подробного объяснения.
Поток
Flow — это альтернатива TypeScript от Facebook. Он предоставляет те же функции, но работает только с проектами React и менее популярен. VS Code изначально не поддерживает его, но вы можете установить расширение Flow Language Support, которое предоставляет ограниченное количество функций, таких как IntelliSense и Rename.
Настройки раскладки клавиатуры
Если вы переходите на VS Code из другого редактора кода, вы будете рады узнать, что можете продолжать использовать те же сочетания клавиш, к которым вы уже привыкли. Если вы новичок в редакторах кода, пропустите этот раздел. Однако, если вы раньше использовали редакторы кода, вы, вероятно, знаете, что перетренировать свою мышечную память непродуктивно и требует времени для адаптации.
На вкладке Добро пожаловать в разделе Настройки и привязки клавиш вы увидите ссылки для установки сочетаний клавиш для Vim, Sublime, Atom и других. Если вы нажмете на ссылку «другие «, вы получите полный список раскладок, которые вы можете установить.
раскладки vscode
Раньше я был пользователем Atom, прежде чем переключился на VS Code. Настроить раскладку клавиатуры Atom в VS Code так же просто, как щелкнуть ссылку Atom. Это установит для меня расширение Atom Keymap. settings.jsonЧтобы сделать VS Code более похожим на Atom, требуется следующая конфигурация:
// 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»,
Прочтите инструкции, предоставленные вашим расширением сочетания клавиш, о том, как настроить свое. Документацию можно найти, просто щелкнув расширение раскладки клавиатуры на панели расширения.
Эммет Поддержка JSX
Emmet — это набор инструментов для
VS Code поставляется со встроенным Emmet и уже поддерживает синтаксис JSX. К сожалению, большинство стартовых проектов React используют это.jsрасширение. Проблема в том, что VS Code не распознает такие файлы как код React, поэтому функции JSX не активируются. Есть два способа исправить это:
Переименуйте все ваши файлы с кодом JSX в.jsxрасширение (рекомендуется)
Настройте VS Code для распознавания всех.jsфайлов как файлов React. Обновите свой settings.jsonследующим образом:
«emmet.includeLanguages»: {
«javascript»: «javascriptreact»
}
Чтобы получить доступ settings.json, просто перейдите на вкладку верхнего меню и щелкните View > Command Palette. Введите «Настройки», а затем выберите «Настройки»: «Открыть настройки» (JSON). Кроме того, вы можете нажать Ctrl+, Pа затем ввести «settings.json», чтобы быстро открыть файл. Вы также можете использовать ярлык Ctrl+, чтобы открыть версию пользовательского интерфейса настроек на новой вкладке. Первая кнопка со значком в правом верхнем углу откроется settings.jsonпри нажатии на нее.
Второй вариант кажется самым простым путем. К сожалению, это вызывает проблемы с другими инструментами разработки JavaScript, такими как
Официальная команда React рекомендует использовать.jsрасширение для кода React. По моему личному опыту, лучше переименовать все файлы с кодом React в.jsxи использовать.jsрасширение для файлов, содержащих простой код JavaScript. Таким образом, у вас будет более простой рабочий процесс со всеми инструментами разработки.
Форматирование
Написание высококачественного кода требует, чтобы вы писали последовательный код. Как разработчики, мы люди, и очень легко забыть стандарты, которые мы установили для себя. В этом разделе мы рассмотрим основные инструменты, которые помогут нам автоматизировать написание согласованного кода.
EditorConfig
EditorConfigпредставляет собой простой файл конфигурации, содержащий только правила форматирования. Вам нужно будет установить расширение, которое позволит VS Code читать эти правила и переопределять свои собственные. Просто выполните следующие шаги, чтобы настроить его:
Установите расширение EditorConfig для VS Code. Обратите внимание, что это переопределит настройки пользователя/рабочей области настройками, найденными в.editorconfigфайлах.
Создайте.editorconfigфайл в корне вашего проекта и скопируйте этот пример конфигурации:
# editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset =
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. Чтобы настроить его, выполните следующие действия:
Установите расширение для форматирования кода Prettier.
Убедитесь, что VS Code использует Prettier в качестве средства форматирования по умолчанию. Обновить settings.jsonследующим образом:
«editor.defaultFormatter»: «esbenp.
«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
Установите Prettier как зависимость от разработчиков в вашем проекте: npm install —
Создайте.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
}
Обновите package.json, добавив эту команду в свой scriptsраздел:
{
«scripts»: {
«format»: «prettier —
}
}
Для шагов 3–5 вам нужно будет сделать это для каждого проекта, который вы хотите поддерживать Prettier. Теперь вы можете щелкнуть formatкоманду под npm scriptsпанелью VS Code, как показано на снимке экрана ниже.
запускать
Кроме того, вы можете просто запустить команду npm run formatдля запуска Prettier.
Это приведет к тому, что все ваши файлы будут правильно и последовательно переформатированы в соответствии с правилами Prettier по умолчанию и теми, которые вы переопределили в файлах.prettierrcи.editorconfigфайлах. Окончания строк также будут согласованы.
Как вы могли заметить, настройки формата кода теперь расположены в трех разных местах. Вы можете задаться вопросом, что произойдет, если у нас будут противоречивые правила. Когда Prettier активирован, он будет обрабатывать эти правила в соответствии со следующим приоритетом:
Более красивый файл конфигурации
.editorconfig
Настройки кода VS (игнорируются, если присутствует
Более красивая конфигурация имеет приоритет в случае возникновения конфликта.
HTML в JSX
Как знает любой достойный разработчик, принято копировать
преобразовать существующий
конвертировать
Это означает, что такие атрибуты, как classбудут преобразованы в файлы className. Это действительно отличная экономия времени.
Реагировать фрагменты
На торговой площадке VS Code есть довольно много расширений сниппетов для проектов JavaScript. Для React наиболее популярными являются сниппеты ES7 React/Redux/GraphQL/
Вот пример фрагментов кода 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
Расширение предоставляет гораздо больше фрагментов, специфичных для:
Реагировать
Реагировать на родной
Редукс
ГрафQL
PropTypes
Консоль
Тестовые сценарии
Есть также фрагменты, которые вставляют полные компоненты React. Например, набрав «rfc», а затем нажав tab, вы вставите следующий фрагмент компонента React:
import React from 'react’
export default function $1 () {
return
}
Если вы собираетесь установить это расширение, вам лучше запомнить хотя бы несколько фрагментов, которые помогут вам писать код быстрее. Использование сниппетов быстрее, чем
Рефакторинг
Написание кода React часто требует написания простых и быстрых инструкций для раннего тестирования функциональности. Довольно часто вы сталкиваетесь с необходимостью повторного использования написанного вами кода. Это означает, что вам нужно извлечь и реорганизовать свой код, чтобы выполнить мантру «написать один раз, использовать везде».
Вы можете потратить время на рефакторинг кода вручную или ускорить этот процесс, используя VS Code React Refactor, который поможет вам реорганизовать код всего за два шага.
демонстрация рефакторинга реакции
Довольно аккуратно, правда?
Авто инструменты
В этом разделе мы рассмотрим расширения, которые помогут вам автоматизировать частые операции с кодом при вводе.
Автоматическое закрытие тега
Хотя Emmet не используется, расширение Auto Close Tag может помочь вам автоматически закрыть теги JSX. Он также помещает курсор между тегами, как только он закрывается.
Вот краткая демонстрация расширения в действии:
автоматическое закрытие тега gif
Автоматическое переименование тега
Когда вы пишете код JSX, вы часто будете переименовывать теги, например,
демонстрация автоматического переименования
катящийся
Linting в React — это неотъемлемая часть цепочки инструментов TDD, которая помогает создавать высококачественный код. Это также важный шаг, когда кодовая база используется командой разработчиков, поскольку она обеспечивает единый стиль кодирования для всех. Линтинг чрезвычайно полезен для обнаружения ошибок при вводе нового кода.
ESLint — самый популярный линтер JavaScript, его проще всего настроить и настроить. ESLint имеет ряд плагинов, поддерживающих библиотеку React. Поддержка ESLint в VS Code обеспечивается расширением ESLint. Когда VS Code активен, он будет постоянно запускать ESLint в фоновом режиме и выделять ошибки по мере ввода и сохранения кода. Расширение также предоставляет возможность автоматического исправления проблем через контекстное меню.
Как и в случае с Prettier, для работы расширения ESLint необходимо выполнить ряд шагов. Настройка ESLint в VS Code для работы с вашим проектом — это довольно сложный процесс, и я рекомендую вам посмотреть это видео о том, как установить и настроить ESLint.
Обязательно ознакомьтесь с нашей статьей «Запуск и работа с ESLint «, если вам нужна дополнительная информация о линтинге JavaScript. Вы должны знать, что существует
Существуют и другие инструменты линтера, но вы, скорее всего, решите, что ESLint — лучший из них.
Резюме
Поскольку мы подходим к концу этой статьи, я хотел бы упомянуть, что есть много других расширений JavaScript VS Code, которые могут вас заинтересовать. Одно из расширений, которое я хотел бы выделить, — Bracket Pair Colorizer 2. Я нашел его очень полезным для идентификации длинных разделов блоков кода. Расширение придает каждой паре совпадающих скобок разный цвет, что позволяет легко увидеть, где заканчивается один блок кода и начинается другой.
Мы также живем в эпоху ИИ, и с моей стороны было бы благоразумно упомянуть о новых расширениях для разработки с помощью ИИ, которые теперь доступны на рынке VS Code. У меня пока нет большого опыта работы с ними, но я решил перечислить наиболее известные из них:
Tabnine Autocomplete AI
Автозаполнение кода Kite AI
Visual Studio IntelliCode
Судя по моим исследованиям, разработчики JavaScript больше всего любят Tabnine. Он хорошо предсказывает следующую строку кода, предоставляя лучшие предложения, чем IntelliSense. Вот интересный разговор, который я наткнулся на расширение:
Я надеюсь, что это руководство поможет вам значительно повысить скорость написания кода и продуктивность при разработке проектов React с использованием VS Code.
