Создание react js в visual studio
I’ve started developing WebApps with react.js recently, and have been a fan of VS Code for a while, so the first thing that came into my mind before getting into the process of developing my first serious project in React was “what is the best VS Code setup to speedup my dev process”. After doing some googling and surfing, I ended up with “Create-React-App” + “ESLint” + “Prettier” + “ES7 React/Redux/GraphQL/React-Native snippets”.
1- Download and install Node.js. You need npm and npx commands (Node.js package manager) in order to install the required packages.
Develop i ng web apps with react.js is a bit different than developing with vanilla javascript/html. React is a javascript framework for building interactive UI views and supports the concept of UI components, which are self-contained UI modules that can be rendered in a virtual DOM (ReactDOM) and are composable so they can be nested in order to render some sophisticated and complex web UX. Though you can add react to your existing website using <script/> , if you are building a new react project from scratch it is recommended to use a react tool-chain as a starter kit in order to achieve the best user and developer experience. Unless you are building a custom app with specific requirements, the Create-React-App should very well suffice your needs.
It is a popular tool-chain and is very easy to set up:
Creating your app this way will also set up a scaffold for your new project which you can customize and expand upon.
In addition, It will set up your React dev environment and will install and configure Webpack, Babel, ESLint and Prettier for your React dev env so you won’t need to worry about them.
Now, You can switch to your app folder and run the app.
ESLint is a linter which analyzes your code and will warn you in the case of any problems with the code. It also helps to enforce coding style conventions and will detect the anti-patterns in your coding style. To use ESLint in VS Code you need to install both the ESLint module in your project workspace and the ESLint extension for VS Code. When you create your app using “Create-React-App” ESLint will get installed as part of “Create-React-App” dependencies. So you only need to install the ESLint extension. You might also need to customize ESLint for your project by generating a .eslintrc config file in your project root.
- Install ESLint extension for VS Code; You can either install it through VS Code extensions or launch VS Code quick open Ctrl+P or Command+P and type:
- Configure ESLint for your project:
This will initialize eslint for your project. You can pick a popular style or configure your own style and then follow the instructions. It will create a .eslintrc file in your projects root. If you want to have flexibility in defining your linter rules choose > Answer questions about your style , Otherwise go with > Use a popular style guide and select your favorite style. Either way, make sure you answer “yes” when you are asked about if you use react or JSX.
Prettier is an opinionated code formatter. It is opinionated as in it will apply some predefined rules to format your code. You might lose some flexibility on how you like to style your code, but after all, it is not a bad idea to let an extension take care of cleaning up your code, so you can focus your attention and precious time on generating high quality codes! To get it work in VS Code, you need to both install the Prettier module in your project and the Prettier extension for VS Code. When you create your app using “Create-React-App” Prettier module will get installed as part of “Create-React-App” dependencies. So you only need to install the Prettier extension.
- Install Prettier extension for VS Code; You can either install it through VS Code extensions or launch VS Code quick open Ctrl+P or Command+P and type:
- Configure Prettier for your VS Code workspace; to integrate Prettier with ESLint and configure it to work with your JSX files add the following to your VS Code workspace settings:
also if you want VS Code format the code when you save your files add the following to your VS Code workspace settings:
Otherwise you will need to manually format your code every time you make a change by pushing Shift+Alt+F
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.
Tip: To test that you have Node.js and npm correctly installed on your machine, you can type node --version and npm --version in a terminal or command prompt.
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.
Note: If you've previously installed create-react-app globally via npm install -g create-react-app , we recommend you uninstall the package using npm uninstall -g create-react-app to ensure that npx always uses the latest version.
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:
To open your React application in VS Code, open another terminal or command prompt window, navigate to the my-app folder and type 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
As you start typing in index.js , you'll see smart suggestions or completions.
After you select a suggestion and type . , you see the types and methods on the object through IntelliSense.
VS Code uses the TypeScript language service for its JavaScript code intelligence and it has a feature called Automatic Type Acquisition (ATA). ATA pulls down the npm Type Declaration files ( *.d.ts ) for the npm modules referenced in the package.json .
If you select a method, you'll also get parameter help:
Go to Definition, Peek definition
Through the TypeScript language service, VS Code can also provide type definition information in the editor through Go to Definition ( F12 ) or Peek Definition ( ⌥F12 (Windows Alt+F12 , Linux Ctrl+Shift+F10 ) ). Put the cursor over the App , right click and select Peek Definition. A Peek window will open showing the App definition from App.js .
Press Escape to close the Peek window.
Hello World!
Let's update the sample application to "Hello World!". Create a new H1 header with "Hello, world!" and replace the <App /> tag in ReactDOM.render with element .
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.
Note: This tutorial assumes you have the Edge browser installed. If you want to debug using Chrome, replace the launch type with pwa-chrome . There is also a debugger for the Firefox browser.
Set a breakpoint
To set a breakpoint in index.js , click on the gutter to the left of the line numbers. This will set a breakpoint which will be visible as a red circle.
Configure the debugger
We need to initially configure the debugger. To do so, go to the Run view ( ⇧⌘D (Windows, Linux Ctrl+Shift+D ) ) and click on the gear button or Create a launch.json link to create a launch.json debugger configuration file. Choose Edge: launch from the Select Environment dropdown list. This will create a launch.json file in a new .vscode folder in your project which includes a configuration to launch the website.
We need to make one change for our example: change the port of the url from 8080 to 3000 . Your launch.json should look like this:
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.
You can step through your source code ( F10 ), inspect variables such as element , and see the call stack of the client side React application.
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'.
Once the ESLint extension is installed and VS Code reloaded, you'll want to create an ESLint configuration file, .eslintrc.js . You can create one using the extension's ESLint: Create ESLint configuration command from the Command Palette ( ⇧⌘P (Windows, Linux Ctrl+Shift+P ) ).
The command will prompt you to answer a series of questions in the Terminal panel. Take the defaults, and it will create a .eslintrc.js file in your project root that looks something like this:
ESLint will now analyze open files and shows a warning in index.js about 'App' being defined but never used.
You can modify the ESLint rules in the .eslintrc.js file.
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:
This topic describes some of the advanced JavaScript features supported by Visual Studio Code. Using the TypeScript language service, VS Code can provide smart completions (IntelliSense) as well as type checking for JavaScript.
IntelliSense
Visual Studio Code's JavaScript IntelliSense provides intelligent code completion, parameter info, references search, and many other advanced language features. Our JavaScript IntelliSense is powered by the JavaScript language service developed by the TypeScript team. While IntelliSense should just work for most JavaScript projects without any configuration, you can make IntelliSense even more useful with JSDoc or by configuring a jsconfig.json project.
For the details of how JavaScript IntelliSense works, including being based on type inference, JSDoc annotations, TypeScript declarations, and mixing JavaScript and TypeScript projects, see the JavaScript language service documentation.
When type inference does not provide the desired information, type information may be provided explicitly with JSDoc annotations. This document describes the JSDoc annotations currently supported.
In addition to objects, methods, and properties, the JavaScript IntelliSense window also provides basic word completion for the symbols in your file.
Typings and Automatic Type Acquisition
IntelliSense for JavaScript libraries and frameworks is powered by TypeScript type declaration (typings) files. Type declaration files are written in TypeScript so they can express the data types of parameters and functions, allowing VS Code to provide a rich IntelliSense experience in a performant manner.
Many popular libraries ship with typings files so you get IntelliSense for them automatically. For libraries that do not include typings, VS Code's Automatic Type Acquisition will automatically install community maintained typings file for you.
Automatic type acquisition requires npmjs, the Node.js package manager, which is included with the Node.js runtime. In this image you can see IntelliSense, including the method signature, parameter info, and the method's documentation for the popular lodash library.
Type declaration files are automatically downloaded and managed by Visual Studio Code for packages listed in your project's package.json or that you import into a JavaScript file.
You can alternately explicitly list packages to acquire type declaration files for in a jsconfig.json.
Most common JavaScript libraries ship with declaration files or have type declaration files available. You can search for a library's type declaration file package using the TypeSearch site.
Fixing npm not installed warning for Automatic Type Acquisition
Automatic Type Acquisition uses npm, the Node.js package manager, to install and manage Type Declaration (typings) files. To ensure that Automatic Type Acquisition works properly, first ensure that you have npm installed on your machine.
Run npm --version from a terminal or command prompt to quickly check that npm is installed and available.
If you have npm installed but still see a warning message, you can explicitly tell VS Code where npm is installed with the typescript.npm setting. This should be set to the full path of the npm executable on your machine, and this does not have to match the version of npm you are using to manage packages in your workspace. typescript.npm requires TypeScript 2.3.4+.
For example, on Windows, you would add a path like this to your settings.json file:
JavaScript projects (jsconfig.json)
The presence of a jsconfig.json file in a directory indicates that the directory is the root of a JavaScript project. jsconfig.json specifies the root files and the options for the language features provided by the JavaScript language service. For common setups, a jsconfig.json file is not required, however, there are situations when you will want to add a jsconfig.json .
- Not all files should be in your JavaScript project (for example, you want to exclude some files from showing IntelliSense). This situation is common with front-end and back-end code.
- Your workspace contains more than one project context. In this situation, you should add a jsconfig.json file at the root folder for each project.
- You are using the TypeScript compiler to down-level compile JavaScript source code.
Location of jsconfig.json
To define our code as a JavaScript project, create jsconfig.json at the root of your JavaScript code as shown below. A JavaScript project is the source files of the project and should not include the derived or packaged files (such as a dist directory).
In more complex projects, you may have more than one jsconfig.json file defined inside a workspace. You will want to do this so that the source code in one project does not appear in the IntelliSense of another project.
Illustrated below is a project with a client and server folder, showing two separate JavaScript projects:
Writing jsconfig.json
Below is a simple template for jsconfig.json file, which defines the JavaScript target to be ES6 and the exclude attribute excludes the node_modules folder. You can copy and paste this code into your jsconfig.json file.
The exclude attribute tells the language service which files are not part of your source code. If IntelliSense is slow, add folders to your exclude list (VS Code will prompt you to do this if it detects slow completions). You will want to exclude files generated by a build process (such as a dist directory). These files will cause suggestions to show up twice and will slow down IntelliSense.
You can explicitly set the files in your project using the include attribute. If no include attribute is present, then this defaults to including all files in the containing directory and subdirectories. When a include attribute is specified, only those files are included.
Here is an example with an explicit include attribute:
The best practice, and least error prone route, is to use the include attribute with a single src folder. Note that file paths in exclude and include are relative to the location of jsconfig.json .
For more information, see the full jsconfig.json documentation.
Migrating to TypeScript
It is possible to have mixed TypeScript and JavaScript projects. To start migrating to TypeScript, rename your jsconfig.json file to tsconfig.json and set the allowJs property to true . For more information, see Migrating from JavaScript.
Note: jsconfig.json is the same as a tsconfig.json file, only with allowJs set to true. See the documentation for tsconfig.json here to see other available options.
Type checking JavaScript
VS Code allows you to leverage some of TypeScript's advanced type checking and error reporting functionality in regular JavaScript files. This is a great way to catch common programming mistakes. These type checks also enable some exciting Quick Fixes for JavaScript, including Add missing import and Add missing property.
TypeScript can infer types in .js files same as in .ts files. When types cannot be inferred, they can be specified using JSDoc comments. You can read more about how TypeScript uses JSDoc for JavaScript type checking in Type Checking JavaScript Files.
Type checking of JavaScript is optional and opt-in. Existing JavaScript validation tools such as ESLint can be used alongside the new built-in type checking functionality.
You can get started with type checking a few different ways depending on your needs.
Per file
The easiest way to enable type checking in a JavaScript file is by adding // @ts-check to the top of a file.
Using // @ts-check is a good approach if you just want to try type checking in a few files but not yet enable it for an entire codebase.
Using a setting
You can opt individual files out of type checking with a // @ts-nocheck comment at the top of the file:
You can also disable individual errors in a JavaScript file using a // @ts-ignore comment on the line before the error:
Using jsconfig or tsconfig
To enable type checking for JavaScript files that are part of a jsconfig.json or tsconfig.json , add "checkJs": true to the project's compiler options:
This enables type checking for all JavaScript files in the project. You can use // @ts-nocheck to disable type checking per file.
JavaScript type checking requires TypeScript 2.3. If you are unsure what version of TypeScript is currently active in your workspace, run the TypeScript: Select TypeScript Version command to check. You must have a .js/.ts file open in the editor to run this command. If you open a TypeScript file, the version appears in the lower right corner.
Global variables and type checking
Let's say that you are working in legacy JavaScript code that uses global variables or non-standard DOM APIs:
If you try to use // @ts-check with the above code, you'll see a number of errors about the use of global variables:
- Line 2 - Property 'webkitNotifications' does not exist on type 'Window'.
- Line 2 - Cannot find name 'CAN_NOTIFY'.
- Line 3 - Property 'webkitNotifications' does not exist on type 'Window'.
If you want to continue using // @ts-check but are confident that these are not actual issues with your application, you have to let TypeScript know about these global variables.
To start, create a jsconfig.json at the root of your project:
Then reload VS Code to make sure the change is applied. The presence of a jsconfig.json lets TypeScript know that your Javascript files are part of a larger project.
Now create a globals.d.ts file somewhere your workspace:
d.ts files are type declarations. In this case, globals.d.ts lets TypeScript know that a global CAN_NOTIFY exists and that a webkitNotifications property exists on window . You can read more about writing d.ts in the TypeScript documentation. d.ts files do not change how JavaScript is evaluated, they are used only for providing better JavaScript language support.
Using tasks
Using the TypeScript compiler
One of the key features of TypeScript is the ability to use the latest JavaScript language features, and emit code that can execute in JavaScript runtimes that don't yet understand those newer features. With JavaScript using the same language service, it too can now take advantage of this same feature.
The TypeScript compiler tsc can down-level compile JavaScript files from ES6 to another language level. Configure the jsconfig.json with the desired options and then use the –p argument to make tsc use your jsconfig.json file, for example tsc -p jsconfig.json to down-level compile.
Read more about the compiler options for down level compilation in the jsconfig documentation.
Running Babel
The Babel transpiler turns ES6 files into readable ES5 JavaScript with Source Maps. You can easily integrate Babel into your workflow by adding the configuration below to your tasks.json file (located under the workspace's .vscode folder). The group setting makes this task the default Task: Run Build Task gesture. isBackground tells VS Code to keep running this task in the background. To learn more, go to Tasks.
Once you have added this, you can start Babel with the ⇧⌘B (Windows, Linux Ctrl+Shift+B ) (Run Build Task) command and it will compile all files from the src directory into the lib directory.
Tip: For help with Babel CLI, see the instructions in Using Babel. The example above uses the CLI option.
Disable JavaScript support
If you prefer to use JavaScript language features supported by other JavaScript language tools such as Flow, you can disable VS Code's built-in JavaScript support. You do this by disabling the built-in TypeScript language extension TypeScript and JavaScript Language Features (vscode.typescript-language-features) which also provides the JavaScript language support.
To disable JavaScript/TypeScript support, go to the Extensions view ( ⇧⌘X (Windows, Linux Ctrl+Shift+X ) ) and filter on built-in extensions (Show Built-in Extensions in the . More Actions dropdown), then type 'typescript'. Select the TypeScript and JavaScript Language Features extension and press the Disable button. VS Code built-in extensions cannot be uninstalled, only disabled, and can be re-enabled at any time.
Partial IntelliSense mode
VS Code tries to provide project-wide IntelliSense for JavaScript and TypeScript, which is what makes features such as auto-imports and Go to Definition possible. However, there are some cases where VS Code is limited to working only with your currently opened files and is unable to load the other files that make up your JavaScript or TypeScript project.
This can happen in a few instances:
- You are working with JavaScript or TypeScript code on vscode.dev or github.dev and VS Code is running in the browser.
- You open a file from a virtual file system (such as when using the GitHub Repositories extension).
- The project is currently loading. Once loading completes, you will start getting project-wide IntelliSense for it.
In these cases, VS Code's IntelliSense will operate in partial mode. Partial mode tries its best to provide IntelliSense for any JavaScript or TypeScript files you have open, but is limited and is not able to offer any cross-file IntelliSense features.
Which features are impacted?
Here's an incomplete list of features that are either disabled or have more limited functionality in partial mode:
- All opened files are treated as part of a single project.
- Configuration options from your jsconfig or tsconfig (such as target ) are not respected.
- Only syntax errors are reported. Semantic errors — such as accessing an unknown property or passing the wrong type to a function — are not reported.
- Quick Fixes for semantic errors are disabled.
- Symbols can only be resolved within the current file. Any symbols imported from other files will be treated as being of the any type.
- Commands such as Go to Definition and Find All References will only work for opened files instead of across the entire project. This also means that symbol from any packages you install under node_module will not be resolved.
- Workspace symbol search will only include symbols from currently opened files.
- Auto imports are disabled.
- Renaming is disabled.
- Many refactorings are disabled.
Some additional features are disabled on vscode.dev and github.dev :
Checking if you are in partial mode
To check if the current file is using partial mode IntelliSense instead of project-wide IntelliSense, hover over the JavaScript or TypeScript language status item in the status bar:
The status item will show Partial mode if the current file is in partial mode.
Прошли те дни, когда мне, в процессе разработки, приходилось тратить время, переключаясь между терминалом, браузером и редактором. Теперь всё делается иначе — быстрее и удобнее. Сегодня я расскажу об оптимизации повседневных дел React-разработчика. А именно, речь пойдёт о том, как связать Visual Studio Code и Google Chrome. Это даст возможность отлаживать браузерный код в редакторе.
Средства отладки VS Code и jest от Facebook
Настройка тестового проекта
Прежде чем мы начнём осваивать отладку React в VS Code, создадим учебное приложение, с которым будем экспериментировать. Я часто пользуюсь create-react-app, так как очень не люблю вручную создавать пустые проекты. Поэтому предлагаю задействовать его и в этом руководстве. Как вариант, если у вас уже есть приложение, вы можете воспользоваться им.
Итак, создадим тестовый проект. Для этого надо сделать следующее:
- Установите create-react-app глобально, выполнив команду npm i -g create-react-app .
- После установки создайте проект командой create-react-app vscode-tutorial .
Настройка VS Code
Теперь установим расширение VS Code, которое позволит редактору взаимодействовать с Chrome. VS Code подключается к Chome с использованием протокола удалённой отладки. Это — тот же протокол, который используют инструменты разработчика Chrome. Но, благодаря такому подходу, вместо того, чтобы работать со стандартными инструментами Chrome, вы можете использовать для отладки браузерного кода VS Code.
Установка расширения Debugger for Chrome
Итак, для того, чтобы наладить взаимодействие VS Code и Chrome, нужно установить расширение, которое называется Debugger for Chrome . Для его установки надо перейти на панель расширений и выполнить поиск по названию расширения. В результате должно получиться примерно следующее:
Поиск расширения Debugger for Chrome
Подключение VS Code к Chrome
Далее, нужно настроить VS Code на подключение к Chrome. Делается это так:
- Щёлкните по значку отладки.
- Откройте выпадающее меню (около кнопки Play ) и выберите пункт Add Configuration… .
- В выпадающем списке Select Environment выберите Chrome .
Настройка связи VS Code и Chrome
В корень проекта будет автоматически добавлена папка .vscode . В ней будет находиться файл launch.json , который используется для настройки отладчика VS Code для текущего проекта. Каждый раз, когда вы создаёте новый проект, вам нужно выполнять ту же последовательность действий для настройки удалённой отладки (ещё можно просто скопировать папку .vscode из одного проекта в другой).
Полный список конфигурационных опций можно найти здесь.
Использование отладчика
Теперь почти всё готово к работе. Следующий шаг заключается в использовании тестового проекта для того, чтобы проверить отладчик.
Запуск отладчика
Запустить отладчик можно, выполнив одно из следующих действий:
- Нажать F5 .
- Щёлкнуть по зелёной кнопке Play на панели отладки.
- Выбрать команду меню Debug → Start Debugger .
Панель инструментов, которая появляется при включении отладчика
Установка точки останова
Точки останова используются для того, чтобы сообщить отладчику о том, что ему нужно приостановить выполнение кода в определённом месте. Это позволяет программисту исследовать переменные, стек вызовов и вносить в код изменения в процессе выполнения приложения.
Установим точку останова в тестовом приложении. Откроем файл src/App.js и щёлкнем мышью по полю левее строки 11 . Тут должна появиться красная точка, которая указывает на то, что точка останова была добавлена. Вот, чтобы было понятно, анимированная версия этой инструкции:
Установка точки останова
Запуск сервера разработки
Запуск сервера
Сработавшая точка останова
Если у вас всё заработало — примите поздравления! Вы только что узнали о том, как настроить удалённую отладку в VS Code. Если вы хотите узнать подробности о самом процессе отладки в VS Code — почитайте это.
Непрерывное тестирование с помощью jest
Мне удобно, чтобы в процессе работы над кодом выполнялись модульные тесты. А именно, чтобы они вызывались всякий раз, когда я вношу изменения в программу. Благодаря create-react-app всё, что нужно для реализации такого сценария, настраивается автоматически. Для того, чтобы запустить jest , достаточно ввести в терминале команду npm test . Благодаря этому система будет наблюдать за файлами и автоматически запускать тесты при их сохранении. Выглядит это примерно так:
Непрерывное тестирование в VS Code
Итоги
В этом материале мы рассказали о том, как настроить взаимодействие VS Code и Chrome для организации удалённой отладки React-приложений. Надеемся, эта простая методика поможет сэкономить немного времени, если раньше вам приходилось постоянно переключаться между редактором, браузером и терминалом.
Читайте также: