создание react приложения vs code
Как настроить VS Code для разработки на React
Разработчикам React нужен редактор кода, который позволит им продуктивно писать код React. Есть тысячи бесплатных расширений в VS Кодекса рынка, который может помочь перегружать ваш рабочий процесс разработки. В этой статье я выделю ряд расширений и настроек, которые повысят вашу продуктивность кодирования React до профессионального уровня.
Некоторые из перечисленных здесь расширений не относятся к React, но, тем не менее, они повысят вашу эффективность и скорость кодирования. На самом деле, вы найдёте лишь несколько расширений, которые действительно будут полезны в вашем ежедневном графике кодирования.
Внедрение инструментов и методов, перечисленных в этой статье, вероятно, сэкономит вам часы разработки — часы, которые были бы потрачены на решение многих мелких, но важных проблем. Они также помогут вам уменьшить количество ошибок при кодировании. Ключ к продуктивности — автоматизировать как можно больше задач. Следующие расширения и настройки помогут вам достичь этой цели.
Языковая поддержка
Когда вы устанавливаете VS Code в первый раз, он предоставит вам множество функций прямо из коробки без использования каких-либо расширений, таких как подсветка синтаксиса для JavaScript и поддержка кода TypeScript и JSX.
Ниже приведён снимок вкладки » Добро пожаловать». Вы всегда можете найти его в меню » Справка «.
Здесь вам нужно выполнить начальную настройку. Поскольку наше внимание сосредоточено на React, мы начнём с настройки расширения языка JavaScript, которое предоставит нам дополнительные функции, необходимые для нашего рабочего процесса продуктивного программирования.
Расширение языка JavaScript
На вкладке Добро пожаловать в разделе Инструменты и языки щёлкните ссылку JavaScript для установки. Появится запрос на перезагрузку, который вы должны нажать, чтобы новая функция вступила в силу.
Расширение языка JavaScript предоставляет несколько функций, в том числе:
Полный список и документацию по этим функциям можно найти в документации VS Code. Я настоятельно рекомендую вам прочитать каждую функцию, чтобы узнать, как использовать их в рабочем процессе разработки.
На рисунке ниже показан пример использования Intellisense и автоматического импорта в действии.
После установки языковой функции JavaScript VS Code может предложить вам предоставить jsconfig.jsonфайл в корне вашего проекта. В этом нет необходимости, но настройка этого параметра поможет IntelliSense предоставлять более точные подсказки. Вот пример конфигурации:
Приведённая выше конфигурация сообщает языковому серверу JavaScript, какие файлы являются частью вашего исходного кода, а какие нет. Это гарантирует, что языковая служба анализирует только ваш исходный код и, следовательно, работает быстро.
Поддержка TypeScript
TypeScript настоятельно рекомендуется, если вы планируете создавать крупномасштабные и сложные проекты React. Это связано с тем, что TypeScript обеспечивает безопасность типов и, таким образом, снижает вероятность доставки ошибочного кода в ваших интерфейсных приложениях. VS Code обеспечивает поддержку языка TypeScript из коробки, предоставляя ряд функций, таких как:
В TypeScript код JSX записывается с.tsxрасширениями файлов. После компиляции на выходе будет файл с.jsxрасширением.
Обратите внимание, что VS Code не предоставляет компилятор для TypeScript. Вы должны установить его в своей глобальной среде Node.js следующим образом:
В качестве альтернативы вы можете установить расширение Compile Hero Pro, которое предоставляет компилятор для TypeScript и многих других языков, включая:
Расширение предоставляет гораздо больше настраиваемых параметров того, когда и как компилировать ваш TypeScript и код стиля. Если вы хотите узнать больше о настройке React и TypeScript, я рекомендую вам ознакомиться с другой нашей статьёй » React with TypeScript: Best Practices » для более подробного объяснения.
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 более «похожим на атом», требуется следующая конфигурация :
Обязательно прочтите инструкции по настройке вашего расширения сочетаний клавиш. Документацию можно найти, просто щёлкнув расширение раскладки клавиатуры на панели расширений.
Поддержка Emmet JSX
Emmet — это набор инструментов для веб-разработки, который позволяет более эффективно писать HTML-код. Если вы новичок в Эммете, посмотрите демо, чтобы увидеть, как это работает.
VS Code поставляется со встроенным Emmet и уже поддерживает синтаксис JSX. К сожалению, большинство стартовых проектов React используют это.jsрасширение. Проблема в том, что VS Code не распознаёт такие файлы как код React, поэтому функции JSX не активируются. Есть два способа исправить это:
Чтобы получить доступ 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 читать эти правила и отменять свои собственные. Просто выполните следующие шаги, чтобы настроить его:
VS Code теперь будет соблюдать эти правила для форматирования вашего кода. Давайте быстро поговорим о окончаниях строк. Windows использует CRLFдля обозначения завершения строки, в то время как системы на базе UNIX используют LF. Если вы используете файлы со смешанными окончаниями строк, вы столкнётесь с рядом проблем при фиксации файлов. Вы можете настроить Git на обработку окончаний строк.
Подход, который я предпочитаю, заключается в том, чтобы просто заставить все файлы проекта на любой платформе использовать LFокончания строк. Обратите внимание, что EditorConfigне будет преобразовывать окончания строк для существующих файлов. Он установит только LFдля новых файлов. Чтобы преобразовать все существующие файлы, у вас есть два варианта:
Prettier
Prettier — это программа для форматирования кода, которую проще всего настроить для кода JavaScript. Он поддерживает JavaScript, TypeScript, JSX, CSS, SCSS, Less и GraphQL. Чтобы настроить его, выполните следующие действия:
1. Установите похорошелакод форматера расширения.
2. Убедитесь, что VS Code использует Prettier в качестве средства форматирования по умолчанию. Обновите jsonследующим образом:
5. Обновите json, добавив эту команду в свой scriptsраздел:
Шаги 3–5 вам придётся проделать для каждого проекта, который Prettier должен поддерживать. Теперь вы можете щёлкнуть formatкоманду под npm scriptsпанелью VS Code, как показано на скриншоте ниже.
Как вариант, вы можете просто запустить команду npm run formatPrettier.
Это приведёт к тому, что все ваши файлы будут переформатированы правильно и последовательно в соответствии с правилами Prettier по умолчанию и теми, которые вы переопределили в.prettierrcи.editorconfigфайлах. Окончания строк также будут согласованы.
Как вы могли заметить, настройки формата кода теперь расположены в трёх разных местах. Вы можете задаться вопросом, что произойдёт, если у нас будут противоречивые правила. Если Prettier активирован, он будет обрабатывать эти правила в соответствии со следующим приоритетом:
Более красивая конфигурация имеет приоритет в случае конфликта.
HTML в JSX
Любой достойный разработчик знает, что HTML-код, который вы нашли где-то в Интернете, часто копируют и вставляют в свой код React. Для этого часто требуется преобразовать атрибуты HTML в допустимый синтаксис JSX. К счастью, есть расширение под названием html to JSX, которое выполнит преобразование за вас. После его установки вы сможете легко:
Это означает, что такие атрибуты classбудут преобразованы в className. Это действительно большая экономия времени.
Реагировать на фрагменты
На торговой площадке VS Code есть множество расширений сниппетов для проектов JavaScript. Для React наиболее популярными являются фрагменты ES7 React / Redux / GraphQL / React-Native. После того, как вы установите этот, вам, вероятно, не нужно будет устанавливать ещё один, так как он содержит более чем достаточно фрагментов, чем вы можете запомнить.
Вот образец фрагментов кода JavaScript:
Приставка
Метод
Расширение предоставляет множество других фрагментов, относящихся к:
Есть также фрагменты, которые вставляют полные компоненты React. Например, набрав «rfc» и затем нажав, tabвы вставите следующий фрагмент компонента React:
Если вы собираетесь установить это расширение, вам лучше запомнить хотя бы несколько фрагментов, которые помогут вам писать код быстрее. Использование фрагментов быстрее, чем копирование и вставка.
Рефакторинг
Написание кода React часто требует написания простых и быстрых операторов для ранней проверки функциональности. Довольно часто возникает необходимость повторно использовать написанный код. Это означает, что вам необходимо извлечь и реорганизовать свой код, чтобы выполнить мантру «напиши один раз, используй везде».
Вы можете потратить время на рефакторинг кода вручную или ускорить процесс с помощью VS Code React Refactor, который поможет вам выполнить рефакторинг кода всего за два шага.
Довольно аккуратно, правда?
Авто Инструменты
В этом разделе мы рассмотрим расширения, которые помогут вам автоматизировать частые операции с кодом по мере ввода.
Автоматическое закрытие тега
Не используя Emmet, расширение Auto Close Tag может помочь вам автоматически закрыть теги JSX. Он также помещает курсор между тегами, как только он закрывается.
Вот небольшая демонстрация расширения в действии:
Автоматическое переименование тега
Когда вы пишете код JSX, вы часто будете переименовывать теги, например,
Linting
Заключение
Подойдя к концу этой статьи, я хотел бы упомянуть, что есть ещё много расширений JavaScript VS Code, которые могут вас заинтересовать. Одно расширение, которое я хотел бы выделить, — это Bracket Pair Colorizer 2. Я нашёл это очень полезным для определения длинных участков блоков кода. Расширение придаёт каждой паре совпадающих скобок разный цвет, что позволяет легко увидеть, где заканчивается один блок кода и начинается другой.
Мы также живём в эпоху искусственного интеллекта, и для меня было бы благоразумно упомянуть о новых расширениях разработки с использованием искусственного интеллекта, которые теперь доступны на торговой площадке VS Code. У меня пока нет большого опыта работы с ними, но я подумал, что перечислю здесь самые известные:
Судя по моим исследованиям, Табнин, похоже, пользуется наибольшей любовью у разработчиков JavaScript. Он хорошо предсказывает следующую строку кода, предлагая лучшие предложения, чем IntelliSense. Вот интересный разговор о расширении:
Я надеюсь, что это руководство поможет вам значительно улучшить скорость кодирования и производительность при разработке проектов React с использованием VS Code.
Using React in Visual Studio Code
React is a popular JavaScript library developed by Facebook for building web application user interfaces. The Visual Studio Code editor supports React.js IntelliSense and code navigation out of the box.
Welcome to React
We’ll be using the create-react-app generator for this tutorial. To use the generator as well as run the React application server, you’ll need Node.js JavaScript runtime and npm (Node.js package manager) installed. npm is included with Node.js which you can download and install from Node.js downloads.
You can now create a new React application by typing:
where my-app is the name of the folder for your application. This may take a few minutes to create the React application and install its dependencies.
Let’s quickly run our React application by navigating to the new folder and typing npm start to start the web server and open the application in a browser:
You should see the React logo and a link to «Learn React» on http://localhost:3000 in your browser. We’ll leave the web server running while we look at the application with VS Code.
Markdown preview
In the File Explorer, one file you’ll see is the application README.md Markdown file. This has lots of great information about the application and React in general. A nice way to review the README is by using the VS Code Markdown Preview. You can open the preview in either the current editor group (Markdown: Open Preview ⇧⌘V (Windows, Linux Ctrl+Shift+V ) ) or in a new editor group to the side (Markdown: Open Preview to the Side ⌘K V (Windows, Linux Ctrl+K V ) ). You’ll get nice formatting, hyperlink navigation to headers, and syntax highlighting in code blocks.
Syntax highlighting and bracket matching
Now expand the src folder and select the index.js file. You’ll notice that VS Code has syntax highlighting for the various source code elements and, if you put the cursor on a parenthesis, the matching bracket is also selected.
IntelliSense
If you select a method, you’ll also get parameter help:
Go to Definition, Peek definition
Press Escape to close the Peek window.
Hello World!
Once you save the index.js file, the running instance of the server will update the web page and you’ll see «Hello World!» when you refresh your browser.
Tip: VS Code supports Auto Save, which by default saves your files after a delay. Check the Auto Save option in the File menu to turn on Auto Save or directly configure the files.autoSave user setting.
Debugging React
To debug the client side React code, we’ll use the built-in JavaScript debugger.
Set a breakpoint
Configure the debugger
Ensure that your development server is running ( npm start ). Then press F5 or the green arrow to launch the debugger and open a new browser instance. The source code where the breakpoint is set runs on startup before the debugger was attached, so we won’t hit the breakpoint until we refresh the web page. Refresh the page and you should hit your breakpoint.
For more information about the debugger and its available options, check out our documentation on browser debugging.
Live editing and debugging
If you are using webpack together with your React app, you can have a more efficient workflow by taking advantage of webpack’s HMR mechanism which enables you to have live editing and debugging directly from VS Code. You can learn more in this Live edit and debug your React apps directly from VS Code blog post and the webpack Hot Module Replacement documentation.
Linting
Linters analyze your source code and can warn you about potential problems before you run your application. The JavaScript language services included with VS Code has syntax error checking support by default, which you can see in action in the Problems panel (View > Problems ⇧⌘M (Windows, Linux Ctrl+Shift+M ) ).
Try making a small error in your React source code and you’ll see a red squiggle and an error in the Problems panel.
Linters can provide more sophisticated analysis, enforcing coding conventions and detecting anti-patterns. A popular JavaScript linter is ESLint. ESLint, when combined with the ESLint VS Code extension, provides a great in-product linting experience.
First, install the ESLint command-line tool:
Then install the ESLint extension by going to the Extensions view and typing ‘eslint’.
ESLint will now analyze open files and shows a warning in index.js about ‘App’ being defined but never used.
Let’s add an error rule for extra semi-colons:
Now when you mistakenly have multiple semicolons on a line, you’ll see an error (red squiggle) in the editor and error entry in the Problems panel.
Popular Starter Kits
In this tutorial, we used the create-react-app generator to create a simple React application. There are lots of great samples and starter kits available to help build your first React application.
VS Code React Sample
This is a sample React application, which creates a simple TODO application and includes the source code for a Node.js Express server. It also shows how to use the Babel ES6 transpiler and then use webpack to bundle the site assets.
TypeScript React
If you’re curious about TypeScript and React, you can also create a TypeScript version of the create-react-app application by specifying that you want to use the TypeScript template:
Отладка React-приложений в VS Code
Прошли те дни, когда мне, в процессе разработки, приходилось тратить время, переключаясь между терминалом, браузером и редактором. Теперь всё делается иначе — быстрее и удобнее. Сегодня я расскажу об оптимизации повседневных дел React-разработчика. А именно, речь пойдёт о том, как связать Visual Studio Code и Google Chrome. Это даст возможность отлаживать браузерный код в редакторе.
Средства отладки VS Code и jest от Facebook
Настройка тестового проекта
Прежде чем мы начнём осваивать отладку React в VS Code, создадим учебное приложение, с которым будем экспериментировать. Я часто пользуюсь create-react-app, так как очень не люблю вручную создавать пустые проекты. Поэтому предлагаю задействовать его и в этом руководстве. Как вариант, если у вас уже есть приложение, вы можете воспользоваться им.
Итак, создадим тестовый проект. Для этого надо сделать следующее:
Настройка VS Code
Теперь установим расширение VS Code, которое позволит редактору взаимодействовать с Chrome. VS Code подключается к Chome с использованием протокола удалённой отладки. Это — тот же протокол, который используют инструменты разработчика Chrome. Но, благодаря такому подходу, вместо того, чтобы работать со стандартными инструментами Chrome, вы можете использовать для отладки браузерного кода VS Code.
Установка расширения Debugger for Chrome
Поиск расширения Debugger for Chrome
Подключение VS Code к Chrome
Далее, нужно настроить VS Code на подключение к Chrome. Делается это так:
Настройка связи VS Code и Chrome
Полный список конфигурационных опций можно найти здесь.
Использование отладчика
Теперь почти всё готово к работе. Следующий шаг заключается в использовании тестового проекта для того, чтобы проверить отладчик.
Запуск отладчика
Запустить отладчик можно, выполнив одно из следующих действий:
Панель инструментов, которая появляется при включении отладчика
Установка точки останова
Точки останова используются для того, чтобы сообщить отладчику о том, что ему нужно приостановить выполнение кода в определённом месте. Это позволяет программисту исследовать переменные, стек вызовов и вносить в код изменения в процессе выполнения приложения.
Установка точки останова
Запуск сервера разработки
Перейдите по адресу http://localhost:3000/ и вы увидите, как страница «застынет». Это происходит из-за того, что сработала точка останова. Если перейти в VS Code, можно заметить, что строка 11 будет выделена, а на панели отладки появятся сведения о стеке вызовов.
Сработавшая точка останова
Если у вас всё заработало — примите поздравления! Вы только что узнали о том, как настроить удалённую отладку в VS Code. Если вы хотите узнать подробности о самом процессе отладки в VS Code — почитайте это.
Непрерывное тестирование с помощью jest
Непрерывное тестирование в VS Code
Итоги
В этом материале мы рассказали о том, как настроить взаимодействие VS Code и Chrome для организации удалённой отладки React-приложений. Надеемся, эта простая методика поможет сэкономить немного времени, если раньше вам приходилось постоянно переключаться между редактором, браузером и терминалом.
Уважаемые читатели! Пользуетесь ли вы какими-нибудь полезными мелочами, которые повышают производительность труда при разработке веб-приложений?