Как запустить файл js в visual studio code

JavaScript in Visual Studio Code

Visual Studio Code includes built-in JavaScript IntelliSense, debugging, formatting, code navigation, refactorings, and many other advanced language features.

Most of these features just work out of the box, while some may require basic configuration to get the best experience. This page summarizes the JavaScript features that VS Code ships with. Extensions from the VS Code Marketplace can augment or change most of these built-in features. For a more in-depth guide on how these features work and can be configured, see Working with JavaScript.

IntelliSense

IntelliSense shows you intelligent code completion, hover information, and signature information so that you can write code more quickly and correctly.

Sorry, your browser doesn’t support HTML 5 video.

VS Code provides IntelliSense within your JavaScript projects; for many npm libraries such as React , lodash , and express ; and for other platforms such as node , serverless, or IoT.

See Working with JavaScript for information about VS Code’s JavaScript IntelliSense, how to configure it, and help troubleshooting common IntelliSense problems.

JavaScript projects (jsconfig.json)

A jsconfig.json file defines a JavaScript project in VS Code. While jsconfig.json files are not required, you will want to create one in cases such as:

• If not all JavaScript files in your workspace should be considered part of a single JavaScript project. jsconfig.json files let you exclude some files from showing up in IntelliSense.
• To ensure that a subset of JavaScript files in your workspace is treated as a single project. This is useful if you are working with legacy code that uses implicit globals dependencies instead of imports for dependencies.
• If your workspace contains more than one project context, such as front-end and back-end JavaScript code. For multi-project workspaces, create a jsconfig.json at the root folder of each project.
• You are using the TypeScript compiler to down-level compile JavaScript source code.

To define a basic JavaScript project, add a jsconfig.json at the root of your workspace:

 "compilerOptions":  "module": "CommonJS", "target": "ES6"  >, "exclude": ["node_modules"] > 

See Working with JavaScript for more advanced jsconfig.json configuration.

Tip: To check if a JavaScript file is part of JavaScript project, just open the file in VS Code and run the JavaScript: Go to Project Configuration command. This command opens the jsconfig.json that references the JavaScript file. A notification is shown if the file is not part of any jsconfig.json project.

Snippets

VS Code includes basic JavaScript snippets that are suggested as you type;

Sorry, your browser doesn’t support HTML 5 video.

There are many extensions that provide additional snippets, including snippets for popular frameworks such as Redux or Angular. You can even define your own snippets.

Tip: To disable snippets suggestions, set editor.snippetSuggestions to «none» in your settings file. The editor.snippetSuggestions setting also lets you change where snippets appear in the suggestions: at the top ( «top» ), at the bottom ( «bottom» ), or inlined ordered alphabetically ( «inline» ). The default is «inline» .

JSDoc support

VS Code understands many standard JSDoc annotations, and uses these annotations to provide rich IntelliSense. You can optionally even use the type information from JSDoc comments to type check your JavaScript.

Sorry, your browser doesn’t support HTML 5 video.

Quickly create JSDoc comments for functions by typing /** before the function declaration, and select the JSDoc comment snippet suggestion:

Sorry, your browser doesn’t support HTML 5 video.

To disable JSDoc comment suggestions, set «javascript.suggest.completeJSDocs»: false .

Hover Information

Hover over a JavaScript symbol to quickly see its type information and relevant documentation.

The ⌘K ⌘I (Windows, Linux Ctrl+K Ctrl+I ) keyboard shortcut shows this hover information at the current cursor position.

Signature Help

As you write JavaScript function calls, VS Code shows information about the function signature and highlights the parameter that you are currently completing:

Signature help is shown automatically when you type a ( or , within a function call. Press ⇧⌘Space (Windows, Linux Ctrl+Shift+Space ) to manually trigger signature help.

Auto imports

Automatic imports speed up coding by suggesting available variables throughout your project and its dependencies. When you select one of these suggestions, VS Code automatically adds an import for it to the top of the file.

Just start typing to see suggestions for all available JavaScript symbols in your current project. Auto import suggestions show where they will be imported from:

If you choose one of these auto import suggestions, VS Code adds an import for it.

In this example, VS Code adds an import for Button from material-ui to the top of the file:

To disable auto imports, set «javascript.suggest.autoImports» to false .

Tip: VS Code tries to infer the best import style to use. You can explicitly configure the preferred quote style and path style for imports added to your code with the javascript.preferences.quoteStyle and javascript.preferences.importModuleSpecifier settings.

Formatting

VS Code’s built-in JavaScript formatter provides basic code formatting with reasonable defaults.

The javascript.format.* settings configure the built-in formatter. Or, if the built-in formatter is getting in the way, set «javascript.format.enable» to false to disable it.

For more specialized code formatting styles, try installing one of the JavaScript formatting extensions from the Marketplace.

JSX and auto closing tags

All of VS Code’s JavaScript features also work with JSX:

You can use JSX syntax in both normal *.js files and in *.jsx files.

VS Code also includes JSX-specific features such as autoclosing of JSX tags:

Sorry, your browser doesn’t support HTML 5 video.

Set «javascript.autoClosingTags» to false to disable JSX tag closing.

Code navigation

Code navigation lets you quickly navigate JavaScript projects.

• Go to Definition F12 — Go to the source code of a symbol definition.
• Peek Definition ⌥F12 (Windows Alt+F12 , Linux Ctrl+Shift+F10 ) — Bring up a Peek window that shows the definition of a symbol.
• Go to References ⇧F12 (Windows, Linux Shift+F12 ) — Show all references to a symbol.
• Go to Type Definition — Go to the type that defines a symbol. For an instance of a class, this will reveal the class itself instead of where the instance is defined.

You can navigate via symbol search using the Go to Symbol commands from the Command Palette ( ⇧⌘P (Windows, Linux Ctrl+Shift+P ) ).

• Go to Symbol in File ⇧⌘O (Windows, Linux Ctrl+Shift+O )
• Go to Symbol in Workspace ⌘T (Windows, Linux Ctrl+T )

Rename

Press F2 to rename the symbol under the cursor across your JavaScript project:

Refactoring

VS Code includes some handy refactorings for JavaScript such as Extract function and Extract constant. Just select the source code you’d like to extract and then click on the lightbulb in the gutter or press ( ⌘. (Windows, Linux Ctrl+. ) ) to see available refactorings.

Available refactorings include:

• Extract to method or function.
• Extract to constant.
• Convert between named imports and namespace imports.
• Move to new file.

See Refactorings for more information about refactorings and how you can configure keyboard shortcuts for individual refactorings.

Unused variables and unreachable code

Unused JavaScript code, such the else block of an if statement that is always true or an unreferenced import, is faded out in the editor:

You can quickly remove this unused code by placing the cursor on it and triggering the Quick Fix command ( ⌘. (Windows, Linux Ctrl+. ) ) or clicking on the lightbulb.

To disable fading out of unused code, set «editor.showUnused» to false . You can also disable fading of unused code only in JavaScript by setting:

"[javascript]":  "editor.showUnused": false >, "[javascriptreact]":  "editor.showUnused": false >, 

Organize Imports

The Organize Imports Source Action sorts the imports in a JavaScript file and removes any unused imports:

Sorry, your browser doesn’t support HTML 5 video.

You can run Organize Imports from the Source Action context menu or with the ⇧⌥O (Windows, Linux Shift+Alt+O ) keyboard shortcut.

Organize imports can also be done automatically when you save a JavaScript file by setting:

"editor.codeActionsOnSave":  "source.organizeImports": true > 

Code Actions on Save

The editor.codeActionsOnSave setting lets you configure a set of Code Actions that are run when a file is saved. For example, you can enable organize imports on save by setting:

// On save, run both fixAll and organizeImports source actions "editor.codeActionsOnSave":  "source.fixAll": true, "source.organizeImports": true, > 

You can also set editor.codeActionsOnSave to an array of Code Actions to execute in order.

Here are some source actions:

• «organizeImports» — Enables organize imports on save.
• «fixAll» — Auto Fix on Save computes all possible fixes in one round (for all providers including ESLint).
• «fixAll.eslint» — Auto Fix only for ESLint.
• «addMissingImports» — Adds all missing imports on save.

See Node.js/JavaScript for more information.

Code suggestions

VS Code automatically suggests some common code simplifications such as converting a chain of .then calls on a promise to use async and await

Sorry, your browser doesn’t support HTML 5 video.

Set «javascript.suggestionActions.enabled» to false to disable suggestions.

Enhance completions with AI

GitHub Copilot is an AI-powered code completion tool that helps you write code faster and smarter. You can use the GitHub Copilot extension in VS Code to generate code, or to learn from the code it generates.

GitHub Copilot provides suggestions for numerous languages and a wide variety of frameworks, and it works especially well for Python, JavaScript, TypeScript, Ruby, Go, C# and C++.

You can learn more about how to get started with Copilot in the Copilot documentation.

Once you have the Copilot extension installed and enabled, you can test it our for your JavaScript projects.

Create a new file — you can use the File: New File command in the Command Palette ( F1 ).

In the JavaScript file, type the following function header:

function calculateDaysBetweenDates(begin, end)  

Copilot will provide a suggestion like the following — use Tab to accept the suggestion:

Inlay hints

Inlay hints add additional inline information to source code to help you understand what the code does.

Parameter name inlay hints show the names of parameters in function calls:

This can help you understand the meaning of each argument at a glance, which is especially helpful for functions that take Boolean flags or have parameters that are easy to mix up.

To enable parameter name hints, set javascript.inlayHints.parameterNames . There are three possible values:

• none — Disable parameter inlay hints.
• literals — Only show inlay hints for literals (string, number, Boolean).
• all — Show inlay hints for all arguments.

Variable type inlay hints show the types of variables that don’t have explicit type annotations.

Property type inlay hints show the type of class properties that don’t have an explicit type annotation.

Parameter type hints show the types of implicitly typed parameters.

Return type inlay hints show the return types of functions that don’t have an explicit type annotation.

References CodeLens

The JavaScript references CodeLens displays an inline count of reference for classes, methods, properties, and exported objects:

To enable the references CodeLens, set «javascript.referencesCodeLens.enabled» to true .

Click on the reference count to quickly browse a list of references:

Update imports on file move

When you move or rename a file that is imported by other files in your JavaScript project, VS Code can automatically update all import paths that reference the moved file:

Sorry, your browser doesn’t support HTML 5 video.

The javascript.updateImportsOnFileMove.enabled setting controls this behavior. Valid settings values are:

• «prompt» — The default. Asks if paths should be updated for each file move.
• «always» — Always automatically update paths.
• «never» — Do not update paths automatically and do not prompt.

Linters

Linters provides warnings for suspicious looking code. While VS Code does not include a built-in JavaScript linter, many JavaScript linter extensions available in the marketplace.

Tip: This list is dynamically queried from the VS Code Marketplace. Read the description and reviews to decide if the extension is right for you.

Type checking

You can leverage some of TypeScript’s advanced type checking and error reporting functionality in regular JavaScript files too. 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 tried to infer types in .js files the same way it does in .ts files. When types cannot be inferred, they can be specified explicitly with JSDoc comments. You can read more about how TypeScript uses JSDoc for JavaScript type checking in Working with JavaScript.

Type checking of JavaScript is optional and opt-in. Existing JavaScript validation tools such as ESLint can be used alongside built-in type checking functionality.

Debugging

VS Code comes with great debugging support for JavaScript. Set breakpoints, inspect objects, navigate the call stack, and execute code in the Debug Console. See the Debugging topic to learn more.

Debug client side

You can debug your client-side code using a browser debugger such as our built-in debugger for Edge and Chrome, or the Debugger for Firefox.

Debug server side

Debug Node.js in VS Code using the built-in debugger. Setup is easy and there is a Node.js debugging tutorial to help you.

Popular extensions

VS Code ships with excellent support for JavaScript but you can additionally install debuggers, snippets, linters, and other JavaScript tools through extensions.

Tip: The extensions shown above are dynamically queried. Click on an extension tile above to read the description and reviews to decide which extension is best for you. See more in the Marketplace.

Next steps

Read on to find out about:

• Working with JavaScript — More detailed information about VS Code’s JavaScript support and how to troubleshoot common issues.
• jsconfig.json — Detailed description of the jsconfig.json project file.
• IntelliSense — Learn more about IntelliSense and how to use it effectively for your language.
• Debugging — Learn how to set up debugging for your application.
• Node.js — A walkthrough to create an Express Node.js application.
• TypeScript — VS Code has great support for TypeScript, which brings structure and strong typing to your JavaScript code.

Common questions

Does VS Code support JSX and React Native?

VS Code supports JSX and React Native. You will get IntelliSense for React/JSX and React Native from automatically downloaded type declaration (typings) files from the npmjs type declaration file repository. Additionally, you can install the popular React Native extension from the Marketplace.

To enable ES6 import statements for React Native, you need to set the allowSyntheticDefaultImports compiler option to true . This tells the compiler to create synthetic default members and you get IntelliSense. React Native uses Babel behind the scenes to create the proper run-time code with default members. If you also want to do debugging of React Native code, you can install the React Native Extension.

Does VS Code support the Dart programming language and the Flutter framework?

Yes, there are VS Code extensions for both Dart and Flutter development. You can learn more at the Flutter.dev documentation.

IntelliSense is not working for external libraries

Automatic Type Acquisition works for dependencies downloaded by npm (specified in package.json ), Bower (specified in bower.json ), and for many of the most common libraries listed in your folder structure (for example jquery-3.1.1.min.js ).

ES6 Style imports are not working.

When you want to use ES6 style imports but some type declaration (typings) files do not yet use ES6 style exports, then set the TypeScript compiler option allowSyntheticDefaultImports to true.

 "compilerOptions":  "module": "CommonJS", "target": "ES6", // This is the line you want to add "allowSyntheticDefaultImports": true  >, "exclude": ["node_modules", "**/node_modules/*"] > 

Can I debug minified/uglified JavaScript?

Yes, you can. You can see this working using JavaScript source maps in the Node.js Debugging topic.

How do I disable Syntax Validation when using non-ES6 constructs?

Some users want to use syntax constructs like the proposed pipeline ( |> ) operator. However, these are currently not supported by VS Code’s JavaScript language service and are flagged as errors. For users who still want to use these future features, we provide the javascript.validate.enable setting.

With javascript.validate.enable: false , you disable all built-in syntax checking. If you do this, we recommend that you use a linter like ESLint to validate your source code.

Can I use other JavaScript tools like Flow?

Yes, but some of Flow’s language features such as type and error checking may interfere with VS Code’s built-in JavaScript support. To learn how to disable VS Code’s built-in JavaScript support, see Disable JavaScript support.

Как использовать Visual Studio Code для разработки и отладки Node.js

Ознакомьтесь с инструкциями по разработке и отладке проекта на JavaScript в Node.js с помощью Visual Studio.

Подготовка среды

1. Установка Visual Studio Code.
2. Установите git. Интеграция Visual Studio Code с git предоставляет возможность управления Системой управления версиями на боковой панели.
3. Добавьте необходимые переменные среды. В примерах этой статьи используется строка подключения базы данных MongoDB. Если у вас нет доступной базы данных mongoDB, вы можете:
   • Запустить этот локальный проект в конфигурации с несколькими контейнерами. При такой конфигурации один из контейнеров должен являться базой данных mongoDB. Установите Docker и расширение Remote — Containers, чтобы получить конфигурацию с несколькими контейнерами, при которой на одном контейнере будет выполнятся локальная база данных mongoDB.
   • Выберите создание ресурса Azure Cosmos DB для базы данных MongoDB. Дополнительные сведения см. в этом учебнике.

Клонирование проекта

Чтобы приступить к работе, клонируйте пример проекта, выполнив следующие действия.

1. Откройте Visual Studio Code.
2. Нажмите клавишу F1, чтобы отобразить палитру команд.
3. В командной строке палитры введите gitcl , выберите команду Git: Клонировать и нажмите клавишу ВВОД.
4. Если появится запрос ввести URL-адрес репозитория, введите https://github.com/Azure-Samples/js-e2e-express-mongodb , затем нажмите клавишу ВВОД.
5. Выберите (или создайте) локальный каталог, в который нужно клонировать проект.

Установка зависимостей

В этом проекте Node.js сначала необходимо установить все зависимости проекта из npm.

1. Нажмите клавиши CTRL + SHIFT + ` , чтобы отобразить интегрированный терминал Visual Studio Code.
2. Используйте следующую команду для установки зависимостей:

npm install 

Переход к файлам и коду проекта

Чтобы ориентироваться в базе кода, поэкспериментируем с возможностями навигации в среде Visual Studio Code.

1. Нажмите клавиши CTRL + p.
2. Введите .js , чтобы отобразить файлы JavaScript/JSON рядом с родительской папкой каждого файла.
3. Выберите файл server.js, который является скриптом запуска приложения.
4. Наведите указатель мыши на метку времени в строке 11. Эта возможность быстро проверять переменные, модули и типы в файле полезна во время разработки проектов.
5. Щелкнув мышь на переменной , например метку времени , можно просмотреть все ссылки на эту переменную в одном файле. Чтобы просмотреть все ссылки на переменную в проекте, щелкните переменную правой кнопкой мыши и в контекстном меню выберите Найти все ссылки.

Использование функции автозаполнения в mongoDB

1. Открытие файла data.js
2. В строке 84 введите новое использование переменной db путем ввода db. . Visual Studio Code отображает доступные члены API, доступные в db .

Автозаполнение работает, потому что Visual Studio Code использует TypeScript в фоновом режиме (даже для JavaScript), чтобы передавать информацию о вводе, которая может передаваться в список завершения при вводе. Это автоматическое приобретение типов работает для более чем 2000 сторонних модулей, таких как React, Подчеркивание и Express.

Модули, которые поддерживает эта функция автозаполнения, можно увидеть в созданном сообществом проекте DefinitelyTyped, который является источником для всех определений типов TypeScript.

Выполнение локального приложения Node.js

Когда вы изучили код, пришло время запустить приложение. Чтобы запустить приложение из Visual Studio Code, нажмите клавишу F5 . При запуске кода с помощью F5 (режим отладки) Visual Studio Code запускает приложение и показывает окно консоли отладки, отображающее StdOut для приложения.

Кроме того, консоль отладки подключается к только что запущенному приложению, чтобы вы могли вводить выражения JavaScript, которые будут обрабатываться в приложении. В этой консоли также есть функция автоматического заполнения. Чтобы увидеть это поведение, введите в консоли process.env :

Откройте браузер и перейдите к http://localhost:8080 , чтобы просмотреть запущенное приложение. Введите текст в текстовое поле, чтобы добавить элемент, чтобы получить представление о том, как работает приложение.

Отладка локального приложения Node.js

Кроме того что в Visual Studio Code можно запустить приложение и взаимодействовать с ним через консоль, вы также можете задавать точки останова непосредственно в коде. Например, введите CTRL + P , чтобы отобразить средство выбора файлов. После отображения средства выбора файлов и выберите файл server.js .

Задайте точку останова в строке 53, которая является оператором if в маршруте для добавления нового элемента. Чтобы задать точку останова, щелкните область слева от номера строки в редакторе, как показано на следующем рисунке.

Помимо стандартных точек останова, средство Visual Studio Code поддерживает условные точки останова, которые позволяют указать время остановки приложения. Чтобы задать условную точку останова, щелкните правой кнопкой мыши область слева от строки, в которой нужно приостановить выполнение, выберите Add Conditional Breakpoint (Добавить условную точку останова) и укажите выражение JavaScript (например, foo = «bar» ) или число операций выполнения, определяющих условие, при котором приложение должно быть остановлено.

После установки точки останова вернитесь в работающее приложение в браузере и добавьте запись. Это действие немедленно приводит к приостановке выполнения приложения в строке 28, в которой задана точка останова:

Когда приложение будет приостановлено, можно навести указатель мыши на выражения кода, чтобы просмотреть их текущие значения, проверить локальные переменные или контрольные значения и стек вызовов, а также использовать панель инструментов отладки для пошагового выполнения кода. Нажмите клавишу F5, чтобы возобновить выполнение приложения.

Локальная полностековая отладка в Visual Studio Code

Интерфейсная и серверная часть записываются с помощью JavaScript. То есть, если вы выполняете отладку серверного кода (Node/Express), в определенный момент может потребоваться отладить код интерфейса (Angular).

Хотя вы смогли запустить и отладить код Node.js без какой-либо конфигурации Visual Studio Code, для отладки интерфейсного веб-приложения необходимо использовать файл launch.json , который указывает Visual Studio Code, как запустить приложение.

Этот пример приложения включает launch.json следующие параметры отладки:

< // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ < "name": "Test", "request": "launch", "runtimeArgs": [ "run-script", "test" ], "runtimeExecutable": "npm", "skipFiles": [ "/**" ], "type": "pwa-node" >, < "name": "Start", "request": "launch", "runtimeArgs": [ "run-script", "start" ], "runtimeExecutable": "npm", "skipFiles": [ "/**" ], "type": "pwa-node" > ] > 

Средство Visual Studio Code определило, что скриптом запуска приложения является server.js.

Открыв файл launch.json, выберите «Добавить конфигурацию» (в правом нижнем углу) и выберите Chrome: «Запустить с помощью userDataDir«.

Добавление новой конфигурации запуска для Chrome позволяет отладить внешний код JavaScript.

Наведите указатель мыши на любой заданный параметр, чтобы увидеть его функцию. Кроме того, обратите внимание, что Visual Studio Code автоматически определяет URL-адрес приложения. Задайте для свойства webRoot значение $/public , чтобы отладчик Chrome знал, где найти внешние ресурсы приложения:

< "type": "chrome", "request": "launch", "name": "Launch Chrome", "url": "http://localhost:8080", "webRoot": "$/public", "userDataDir": "$/.vscode/chrome" > 

Чтобы запустить и выполнить отладку внешнего и внутреннего кода одновременно, необходимо создать комплексную конфигурацию запуска, которая сообщает средству Visual Studio Code, какой набор конфигураций нужно выполнять параллельно.

Добавьте следующий фрагмент кода в качестве свойства верхнего уровня в файл launch.json (как одноуровневое свойство имеющегося свойства configurations).

"compounds": [ < "name": "Full-Stack", "configurations": ["Launch Program", "Launch Chrome"] >] 

Строковые значения, указанные в массиве compounds.configurations, ссылаются на имя отдельных записей в списке конфигураций. Если вы уже изменили эти имена, внесите соответствующие изменения в массив. Например, перейдите на вкладку «Отладка» и выберите для выбранной конфигурации значение Full-Stack (Полный стек) (имя составного конфигурации) и нажмите клавишу F5 для запуска.

Выполнение конфигурации запускает приложение Node.js (это можно увидеть в выходных данных консоли отладки) и Chrome (который настроен для перехода к приложению Node.js по адресу http://localhost:8080 ).

Нажмите клавиши CTRL+P и введите (или выберите) значение todos.js, которое является основным контроллером Angular внешней части приложения.

Установите точку останова на строке 11, которая является точкой входа для создаваемой записи из списка задач.

Вернитесь к выполняемому приложению и добавьте новую запись. Вы увидите, что средство Visual Studio Code приостановило выполнение кода Angular.

Как и во время отладки Node.js, можно навести указатель мыши на выражения, просмотреть локальные переменные и контрольные значения, обработать выражения в консоли и т. д.

Есть две прохладные вещи, которые следует заметить:

• В области Стек вызовов отображаются два разных стека: Node и Chrome. При этом указано, какой из стеков приостановлен.
• Вы можете переходить между внешним и внутренним кодом, нажав клавишу F5, чтобы запустить и активировать точку останова, заданную ранее в маршруте Express.

После этого вы можете эффективно отладить внешний и внутренний код JavaScript или код полного стека JavaScript непосредственно в Visual Studio Code.

Концепция комплексного отладчика не ограничивается только двумя целевыми процессами и кодом JavaScript. Поэтому, если вы работаете с приложением-микрослужбой (это может быть polyglot), можно использовать тот же рабочий процесс (после установки соответствующих расширений для языка или платформы).

Следующие шаги

Учебник. React в Windows для начинающих

Если вы только начинаете свое знакомство с React, это руководство поможет вам начать работу.

• Несколько основных терминов и понятий
• Использование React в Visual Studio Code
• Использование React с API

Необходимые компоненты

• Установка React (выбор между установкой Windows и подсистемой Windows для Linux):
  • установка React в Windows;
  • установка React в подсистеме Windows для Linux.

  Несколько основных терминов и понятий

  React — это библиотека JavaScript для создания пользовательских интерфейсов.

  • Это решение с открытым кодом — вы можете участвовать в этом проекте, публикуя проблемы и запросы на вытягивание. (См. эту документацию!)
  • Это декларативная библиотека — вы пишете нужный код, с которым затем React выполняет все действия JavaScript и DOM, чтобы получить нужный результат.
  • Она также основана на компонентах — приложения создаются с помощью готовых и многократно используемых независимых модулей кода, которые управляют собственным состоянием и которые можно объединить с помощью платформы React. Это позволяет передавать данные через приложение, сохраняя состояние из модели DOM.
  • Девиз React: «Научись один раз, используй везде». Целью является повторное использование кода, а не предположения каким образом вы будете использовать пользовательский интерфейс с другими технологиями. Вместо этого нужно сделать компоненты многократно используемыми без необходимости перезаписывать существующий код.
  • JSX — это расширение синтаксиса для JavaScript, написанное для использования с React. Оно выглядит как HTML, но фактически является файлом JavaScript, который необходимо скомпилировать или преобразовать в обычный код JavaScript.
  • Виртуальная модель DOM — модель DOM представляет пользовательский интерфейс приложения. При каждом изменении состояния пользовательского интерфейса приложения модель DOM обновляется для представления изменений. Если модель DOM обновляется часто, производительность снижается. Виртуальная модель DOM — это визуальное представление модели DOM, поэтому при изменении состояния приложения обновляется виртуальная модель DOM, а не сама модель DOM, что позволяет оптимизировать производительность. Это репрезентация объекта DOM, упрощенная копия.
  • Представления — это то, что видит пользователь в браузере. В React представление связано с понятием элементов отрисовки, которые пользователь должен видеть на экране.
  • Состояние — это данные, хранимые в разных представлениях. Состояние обычно зависит от прав и действий пользователя. Например, при входе на веб-сайт может отображаться ваш профиль пользователя (представление) с вашим именем (состояние). Данные состояния зависят от пользователя, но представление не меняется.

  Использование React в Visual Studio Code

  Создать приложение с помощью React можно разными способами (примеры см. в статье Общие сведения о React). В этом учебнике описано, как использовать create-react-app для ускорения настройки работающего приложения React, чтобы вы могли сосредоточиться на экспериментах с кодом, а не отвлекаться на средства сборки.

  1. Используйте create-react-app в Windows или WSL (см. предварительные требования выше), чтобы создать новый проект: npx create-react-app hello-world .
  2. Измените каталоги, чтобы перейти в папку для нового приложения ( cd hello-world ), и запустите приложение ( npm start ). Новое приложение React Hello World будет скомпилировано. Затем оно откроется в веб-браузере по умолчанию по адресу localhost:3000.
  3. Закройте приложение React (CTRL+С) и откройте его файлы кода в VS Code, введя code . .
  4. Найдите файл src/App.js и перейдите в следующий раздел заголовка:

  Edit src/App.js and save to reload.
   

  Измените его следующим образом:

  Hello World! This is my first React app.
   

  

  Использование React с API

  Используя то же приложение Hello World, созданное с помощью React и обновленное в Visual Studio Code, мы добавим вызов API для отображения некоторых данных.

  Во-первых, мы удалим все содержимое из этого файла app.js и сделаем из него компонент класса. Сначала мы импортируем компонент из React для создания компонента класса. (Типов компонентов два: класс и функция.) В оператор return() также будет добавлен пользовательский код JSX. Чтобы увидеть результат, нужно перезагрузить страницу. Теперь файл app.js будет выглядеть так:

  import React, < Component >from 'react'; class App extends Component < render() < return ( 
  Hello world! This is my first React app.
   ); > > export default App; 

  

  Затем мы настроим локальное состояние, в котором можно хранить данные из API. Объект состояния позволяет хранить данные, которые будут использоваться в представлении. Представление визуализируется на странице в render() . Чтобы добавить локальное состояние, необходимо сначала добавить конструктор. При реализации конструктора для подкласса React.Component следует вызывать super(props) перед любым другим оператором. В противном случае this.props не удастся определить в конструкторе, что может привести к ошибкам. Данные в компоненты передают свойства. Нам также нужно инициализировать локальное состояние и назначить объект this.state . Мы будем использовать posts в качестве пустого массива, который можно заполнить отправленными данными из API. Теперь файл app.js будет выглядеть так:

  import React, < Component >from 'react'; class App extends Component < constructor(props) < super(props); this.state = < posts: [] >> render() < return ( 
  Hello world!
   ); > > export default App; 

  import React, < Component >from 'react'; class App extends Component < constructor(props) < super(props); this.state = < posts: [] >> componentDidMount() < const url = "https://jsonplaceholder.typicode.com/albums/1/photos"; fetch(url) .then(response =>response.json()) .then(json => this.setState(< posts: json >)) > render() < return ( 
  Hello world!
   ); > > export default App; 

   render() < const < posts >= this.state; return ( 
   
   ( 
   
  ID #  
  > 
   
   ))>
   ); > 

  

• Снова запустите приложение React ( npm start ) и перейдите в локальном веб-браузере по адресу localhost:3000 , чтобы увидеть отображаемые данные API.

Дополнительные ресурсы

• Официальная документация по React: вся актуальная информация о React.
• Надстройки Microsoft Edge для средств разработчиков React: вы можете добавить две вкладки (Components (Компоненты) и Profiler (Профилировщик)) в средства разработчиков Microsoft Edge, чтобы упростить разработку на React.
• Схема обучения React содержит модули онлайн-курсов, которые помогут вам приступить к работе с основами.

Учебник. Создание приложения Node.js и Express в Visual Studio

Область применения:Visual Studio Visual Studio для Mac Visual Studio Code

В этой статье вы узнаете, как использовать Visual Studio для создания простого веб-приложения Node.js, использующего платформу Express.

Прежде чем приступить к работе, изучите краткий список вопросов и ответов, который познакомит вас с некоторыми основными понятиями.

• Что такое Node.js? Node.js — это серверная среда выполнения JavaScript, выполняющая код JavaScript.
• Что такое npm? Диспетчер пакетов упрощает использование и совместное использование библиотек исходного кода Node.js. npm —это стандартный диспетчер пакетов Node.js. Диспетчер пакетов npm упрощает установку, обновление и удаление библиотек.
• Что такое Express? Express — это серверная платформа веб-приложений, которую использует Node.js для создания веб-приложений. При использовании Express существует множество различных способов создания пользовательского интерфейса. Реализация, предоставляемая в этом руководстве, использует обработчик шаблонов по умолчанию генератора приложений Express, называемый Pug, для отрисовки внешнего интерфейса.

Необходимые компоненты

Обязательно установите следующие компоненты:

• Visual Studio 2022 версии 17.4 или более поздней версии с установленной рабочей нагрузкой ASP.NET и веб-разработки . Перейдите на страницу скачиваемых материалов Visual Studio, чтобы установить ее бесплатно. Если вам нужно установить рабочую нагрузку и у вас уже есть Visual Studio, перейдите в раздел Средства>Получить средства и компоненты. , после чего запустится Visual Studio Installer. Выберите рабочую нагрузку ASP.NET и разработка веб-приложений, а затем щелкните Изменить.
• npm (https://www.npmjs.com/), который входит в состав Node.js
• npx (https://www.npmjs.com/package/npx).

Создание своего приложения

1. В окне запуска (чтобы открыть его, щелкните Файл>Окно запуска) выберите Создание нового проекта.
2. Найдите Express в строке поиска в верхней части и выберите приложение JavaScript Express.
3. Присвойте имена проекту и решению.

Просмотр свойств проекта

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

Файл launch.json хранит параметры запуска, связанные с кнопкой Запуск на панели инструментов отладки. В настоящее время файл launch.json должен находиться в папке .vscode.

Сборка проекта

Выберите Сборка>Собрать решение, чтобы собрать проект.

Запуск приложения

Нажмите клавишу F5 или кнопку Запуск в верхней части окна, чтобы открыть командную строку.

• npm под управлением команды node ./bin/www

Проверьте наличие в консоли сообщений, например сообщения с указанием обновить версию Node.js.

Затем появится базовое приложение Express!

Отладка приложения

Теперь мы рассмотрим несколько способов отладки приложения.

Во-первых, если приложение по-прежнему работает, нажмите клавиши SHIFT +F5 или нажмите красную кнопку остановки в верхней части окна, чтобы остановить текущий сеанс. Возможно, вы заметите, что остановка сеанса закрывает браузер, показывающий приложение, но оставляет позади окна командной строки, выполняющего процесс Node. На данный момент вернитесь и закройте все задерживающиеся командные строки. Далее в этой статье описано, почему может потребоваться оставить процесс узла запущенным.

Отладка процесса узла

В раскрывающемся списке рядом с кнопкой «Пуск » вы увидите следующие параметры запуска:

• localhost (Edge)
• localhost (Chrome)
• Отладка Dev Env
• Запуск узла и браузера

Перейдите вперед и выберите параметр «Запустить узел» и «Браузер «. Теперь, прежде чем нажать клавишу F5 или снова нажать кнопку «Пуск «, установите точку останова в index.js (в папке маршрутов ), выбрав левую полоску перед следующей строкой кода: res.render(‘index’, < title: 'Express' >);

Вы также можете поместить курсор в строку кода и нажать клавишу F9 , чтобы переключить точку останова для этой строки.

Затем нажмите клавишу F5 или выберите «Начать отладку отладки», чтобы отладить>приложение.

Вы увидите, что отладчик приостанавливается в простой точке останова. Пока оно приостановлено, вы можете проверить состояние приложения. При наведении указателя мыши на переменные можно изучить их свойства.

Завершив проверку состояния, нажмите клавишу F5 , чтобы продолжить работу, и приложение должно загрузиться должным образом.

На этот раз при нажатии кнопки «Остановить» вы увидите, что окно браузера и командной строки закрываются. Чтобы узнать, почему ознакомьтесь с файлом launch.json.

Общие сведения о launch.json

Файл launch.json в настоящее время находится в папке VSCODE . Если в Обозреватель решений не отображается папка VSCODE, выберите «Показать все файлы«.

Если вы работали с Visual Studio Code раньше, файл launch.json будет выглядеть знакомым. Файл launch.json здесь работает так же, как и в Visual Studio Code, чтобы обозначить конфигурации запуска, используемые для отладки. Каждая запись указывает один или несколько целевых объектов для отладки.

Первые две записи являются записями браузера, и они должны выглядеть примерно так:

 < "name": "localhost (Edge)", "type": "edge", "request": "launch", "url": "http://localhost:3000", "webRoot": "$\\public" >, < "name": "localhost (Chrome)", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "$\\public" > 

В приведенных выше записях type отображается тип браузера. Если вы запускаете только тип браузера в качестве единственного целевого объекта отладки, Visual Studio отлаживать только процесс внешнего браузера, а процесс node будет запущен без подключения отладчика, то есть любые точки останова, заданные в процессе узла, не будут привязываться.

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

В начале этого раздела вы закрыли окно командной строки для установки точек останова в процессе Node. Чтобы процесс узла был отлаживаемым, его необходимо перезапустить с присоединенным отладчиком. Если не отладочный процесс узла не выполняется, попытка запустить процесс Узла в режиме отладки (без перенастройки порта) завершится ошибкой.

edge В настоящее время и chrome являются единственными поддерживаемыми типами браузеров для отладки.

Третья запись в файле launch.json указывает node тип отладки и должен выглядеть примерно так:

 < "name": "Debug Dev Env", "type": "node", "request": "launch", "cwd": "$/bin", "program": "$/bin/www", "stopOnEntry": true > 

Эта запись запустит только процесс узла в режиме отладки. Браузер не будет запущен.

Четвертая запись, указанная в файле launch.json*, является следующей конфигурацией составного запуска.

Эта составная конфигурация совпадает с конфигурацией составного запуска vscode и позволяет отлаживать интерфейсную и серверную части. Вы можете увидеть, что он просто ссылается на отдельные конфигурации запуска для процессов узла и браузера.

В конфигурации запуска можно использовать множество других атрибутов. Например, можно скрыть конфигурацию из раскрывающегося списка, но при этом можно ссылаться, задав hidden атрибут в объекте presentation значение true .

 < "name": "localhost (Chrome)", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "$\\public", "presentation": < "hidden": true >> 

Нажмите кнопку » Параметры » для списка атрибутов, которые можно использовать для улучшения возможностей отладки. Обратите внимание, что на данный момент поддерживаются только конфигурации запуска . Любая попытка использовать конфигурацию подключения приведет к сбою развертывания.

Читать:
Как посмотреть данные карты в apple pay