Как запустить код javascript в 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.

Настройка VS Code для разработки на JavaScript

Visual Studio Code или просто VS Code – это бесплатный, популярный и имеющий множество дополнений текстовый редактор, который в первую очередь предназначен для создания и отладки современных веб- и облачных приложений.

Разработан он компанией Microsoft и доступен для операционных систем Windows, MacOS и Linux.

Распространяется данная программа бесплатно, исходный код её доступен на GitHub.

VS Code поддерживает большое количество языков программирования, включает в себя отладчик, средства для работы с Git, подсветку синтаксиса, технологию автодополнения IntelliSense, инструменты для рефакторинга, терминал и многое другое.

VS Code является достаточно гибким инструментом, расширяемым с помощью плагинов, доступных на Visual Studio Marketplace. Открыть панель с расширениями в программе можно через комбинацию клавиш Ctrl+Shift+X .

Плагинов для Visual Studio Code очень много, но в рамках этой статьи рассмотрим только наиболее популярные из них. В VS Code уже встроен такой плагин как Emmet. Если вы не знакомы с ним, то он предназначен для быстрого набора кода. Дополнительно его устанавливать не нужно.

Установка VS Code

Для установки VS Code на компьютер необходимо перейти на этот сайт. После этого на странице выбрать вашу операционную систему и нажать на значок «Загрузки». После завершения скачивания программы установить её себе на компьютер.

Чтобы лучше ориентироваться в программе вы можете установить языковый пакет для русского языка. Для этого откройте панель «Расширения» ( Ctrl+Shift+X ) и введите в ней текст «Russian Language Pack for Visual Studio Code». После этого выберите его в результатах поиска и установите его.

В Visual Studio Code имеется огромное количество различных плагинов кроме языковых пакетов. Предназначены они для расширения функциональности этого редактора. Все плагины для этого редактора размещены на Marketplace.

Общая настройка VS Code

VS Code содержит большое количество настроек, с помощью которых вы можете настроить этот редактор под себя.

Изменение настроек в VS Code осуществляется в соответствующем окне. Открыть его можно несколькими способами:

• через комбинацию клавиш Ctrl+, ;
• через пункт меню «Файл -> Настройки -> Параметры» (в версии на английском языке «File -> Preferences -> Settings»);
• нажать на значок шестерёнки и выбрать в открывшемся меню пункт «Параметры» (Settings).

Список параметров, которые пользователи наиболее часто настраивают:

• editor.tabsize — число пробелов при табуляции;
• editor.insertSpaces — вставлять ли пробелы при нажатии Tab ;
• editor.detectIndentation — нужно ли параметры «#editor.tabsize» и «editor.insertSpaces» определять автоматически при открытии файла на основе его содержимого;
• editor.wordWrap — управляет тем, как следует переносить строки;
• editor.fontSize — размер шрифта в пикселях;
• editor.mouseWheelZoom — нужно ли включать изменение размера шрифта в редакторе при нажатой клавише Ctrl и движении колесика мыши;
• editor.minimap.enabled — включает или отключает отображение мини-карты;
• editor.formatOnSave — выполнять ли автоматическое форматирование файла при его сохранении;
• workbench.startupEditor — управляет тем, что будет отображаться при запуске, если содержимое редактора не было восстановлено из предыдущего сеанса;
• files.insertFinalNewline — если этот параметр включен, то при сохранении файла в его конец вставляется пустая строка;
• files.trimFinalNewlines — если этот параметр активен, то при сохранении файла будут удалены все пустые строки, идущие за последней в конце файла;
• files.trimTrailingWhitespace — если этот параметр включен, то при сохранении файла будут удалены все пробельные символы на концах строк;
• files.autoSave — для включения автосохранения файлов;
• terminal.integrated.cwd — позволяет задать путь явного запуска, по которому будет запущен терминал;
• telemetry.enableTelemetry — включает или отключает отправку сведений об использовании и ошибках в веб-службу Майкрософт;
• telemetry.enableCrashReporter — разрешает отправку отчетов о сбоях в веб-службу Майкрософт;

Изменять настройки можно как глобально, так и конкретно для текущего проекта. Изменение глобальных настроек осуществляется в окне «Параметры» на вкладке «Пользователь». Эти настройки сохраняются в файл «settings.json». Открыть его можно нажав на значок «Открыть параметры (JSON)».

Пример файла «settings.json»:

{ "editor.wordWrap": "wordWrapColumn", "editor.wordWrapColumn": 120, "editor.minimap.enabled": false, "editor.formatOnSave": true, "editor.tabSize": 2, "editor.detectIndentation": false, "editor.fontSize": 17, "editor.mouseWheelZoom": true, "workbench.startupEditor": "none", "files.insertFinalNewline": true, "files.trimFinalNewlines": true, "files.trimTrailingWhitespace": true, "telemetry.enableTelemetry": false, "telemetry.enableCrashReporter": false, "files.autoSave": "afterDelay", "files.autoSaveDelay": 10000 }

Кстати, изменять настройки также можно просто посредством редактирования этого файла.

Сохранение настроек для рабочей директории выполняется в специальный файл «settings.json», который будет добавлен в папку «.vscode». Настройка параметров для рабочей директории (проекта) можно также выполнить просто посредством редактирования этого файла.

Настройка VS Code для HTML и CSS

Visual Studio Code обеспечивает базовую поддержку при написании HTML и CSS из коробки. Имеется подсветка синтаксиса, умные дополнения с IntelliSense и настраиваемое форматирование. VS Code также имеет отличную поддержку Emmet.

Зачем нужен Emmet? Он позволяет очень быстро писать код.

Например, Emmet аббревиатура ul>li*3>span.item-$ после нажатии клавиши Tab создаст следующий код:

В CSS аббревиатура Emmet как dn создаст код display: none .

VS Code имеет встроенные средства для форматирования кода. Настроить параметры форматирования можно в настройках. Находятся они в разделах «Расширения -> HTML» и «Расширения -> CSS».

Комбинация клавиш для выполнения форматирования в VS Code: Shift+Alt+F .

Функциональность VS Code при работе с HTML и CSS можно улучшить с помощью расширений.

Вот перечень некоторых из них:

• Auto Rename Tag – автоматически изменяет имя закрывающего тега при переименовывании открывающегося;
• Auto Close Tag – автоматически добавляет закрывающий HTML/XML тег при вводе закрывающей скобки открывающегося тега (кроме HTML, это дополнение добавляет эту возможность в JavaScript и многие другие языки);
• HTMLHint – плагин для статического анализа HTML кода;
• HTML CSS Support — поддержка CSS для документов HTML;
• IntelliSense for CSS class names in HTML — плагин для предложения вариантов завершения имени CSS класса в HTML на основе определений, найденных им в вашем рабочем пространстве;
• Autoprefixer — для автоматического добавления CSS свойств с префиксами;
• CSS Peek — позволяет посмотреть свойства, прикреплённые к классу или идентификатору без переключения на CSS файл, в котором они описаны;
• Prettier — Code formatter — для форматирования кода (HTML, CSS, JavaScript и др.);

VS Code имеет возможность, которая позволяет сворачивать области CSS кода заключенные между /*#region*/ и /*#endregion*/ :

/*#region*/ . /*#endregion*/

Настройка VS Code для разработки на JavaScript

Разработку веб-проекта в Windows 10 можно ввести не только с использованием программ, предназначенных только для этой операционной системы, но и посредством WSL (Linux). Если вам нравится Linux и вы хотите его использовать, то Windows 10 позволяет вам это сделать из коробки (то есть непосредственно из дистрибутива). В следующем разделе приведена инструкция по установке WSL в Windows 10 и настройке Visual Studio Code для её использования в качестве среды разработки.

Кроме этого, ОС Linux в большинстве случаев — это система, которая затем у вас будет установлена на продакшене. А это значит, что вы получите окружение как на сервере или более близкое к этому.

Если вы не хотите использовать WSL в качестве среды разработки или работаете в другой операционной системе, то в этом случае можете сразу же перейти к разделу «Установка и настройка ES Lint».

Как в Windows 10 установить WSL и использовать её в VS Code

Коротко о подсистеме Windows для Linux (WSL). В Windows 10 появилась возможность осуществлять веб-разработку прямо в среде на основе Linux. Для этого вам необходимо просто включить компонент Windows 10 «Подсистема Windows для Linux (WSL)» и установить из Microsoft Store «любимый» дистрибутив Linux (например, Ubuntu 18.04). Подсистема WSL появилась в Windows 10, начиная с обновления «Anniversary Update» (1607), а версия 2004 этой ОС уже включает WSL 2.

Более подробно процесс установки WSL описан в этой статье, а именно в разделах «Включение подсистемы Windows для Linux» и «Установка приложения «Ubuntu». Если вы ещё не читали эту статью, то можете это сделать, перейдя по представленной выше ссылке.

Установка расширения «Remote – WSL» в VS Code. Для использования WSL в качестве среды для полной разработки прямо из VS Code необходимо установить расширение «Remote – WSL».

Это позволит вам ввести веб-разработку прямо в среде на основе Linux, использовать специфичные для неё наборы инструментов и утилит, а также запускать и отлаживать свои приложения в Linux, не выходя при этом из Windows.

Это расширение позволит выполнять команды непосредственно в WSL, а также редактировать файлы, расположенные в WSL или в смонтированной файловой системе Windows (локальные диски находятся в /mnt ) не беспокоясь о проблемах с совместимостью.

После установки расширения и перезагрузки редактора VS Code у вас появится индикатор WSL в нижнем левом углу окна программы.

При нажатии на него вам будут показаны команды Remote-WSL. Используя их, вы можете открыть новое окно VS Code, в котором в качестве среды будет использоваться WSL. При этом команда «Remote-WSL: New Window» выполнит это с использованием дистрибутива Linux, который у вас назначен по умолчанию, а команда «Remote-WSL: New Window using Distro. » — используя конкретный дистрибутив Linux из установленных.

Версия дистрибутива Linux, которая сейчас используется в WSL отображается в индикаторе следующим образом:

Установка и настройка ESLint

ESLint – это инструмент, который крайне желательно установить в систему, если вы разрабатываете код на JavaScript. Он будет показывать вам ошибки в коде, а также направлять вас при его написании так, чтобы он был выдержан в едином стиле.

Перед тем как переходить к установке ESLint сначала инсталлируем в ОС «Node.js v12.x».

В Ubuntu это осуществляется следующим образом:

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - sudo apt-get install -y nodejs

Вводить эти команды будем через терминал VS Code. Открыть его можно посредством комбинации клавиш Ctrl+Shift+` или кликнув в главном меню на пункт «Терминал -> Создать терминал».

Проверить номер установленной версии «Node.js» можно так:

node -v

После установки «Node.js» создадим папку для проекта в файловой системе ОС, а затем откроем её с помощью VS Code.

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

npm init -y

В результате выполнения этой команды у вас появится файл «package.json». Этот файл кроме информации о проекте и других вещей, ещё будет содержать набор зависимостей для данного проекта. Имея этот файл, мы сможем при необходимости очень быстро развернуть проект на любом другом компьютере.

Теперь перейдём к установке ESLint и некоторых других npm пакетов в проект:

sudo npm install --save-dev eslint eslint-config-airbnb-base eslint-plugin-import

Ключ —save-dev используется для того чтобы сделать запись об этих пакетах в «package.json». Данный ключ добавит их в секцию devDependencies .

Установка npm пакетов осуществляется в папку «node_modules» этого проекта.

В качестве стиля кода мы будем использовать Airbnb . Это руководство используется многими известными организациями и имеет очень большое количество звёзд на GitHub.

Для того, чтобы можно было использовать Airbnb для расширения базовой конфигурации ESLint мы установили пакеты eslint-config-airbnb-base (без зависимостей от React) и eslint-plugin-import (для поддержки синтаксиса импорта/экспорта ES6+ и предотвращения проблем с неправильным написанием путей к файлам и имен импорта).

После окончания загрузки пакетов приступим к интегрированию ESLint в Visual Studio Code. Осуществляется это посредством установки расширения с одноимённым названием.

Для того чтобы ESLint работал необходимо создать конфигурационный файл. Это можно выполнить как посредством команды ./node_modules/.bin/eslint —init (настройка осуществляется посредством ответов на вопросы мастера), так и самостоятельно.

Конфигурационный файл необходим для задания настроек, в соответствии с которыми ESLint будет осуществлять проверку JavaScript кода.

Чтобы сделать это самостоятельно нам необходимо в корне проекта создать файл .eslintrc и добавить в него, например, следующие данные:

{ "env": { "browser": true, "es6": true }, "extends": "airbnb-base", "parserOptions": { "ecmaVersion": 6 } }

Эти данные будут определять следующие настройки для ESLint:

• env — это свойство определяет среды, в которых JavaScript должен работать. Для фронтенда средой выступает браузер, поэтому добавим в env свойство «browser»: true . Свойство «es6»: true предназначено для автоматического включения синтаксиса ES6.
• extends — предназначен для указания конфигурации, с помощью которой мы хотим расширить общую конфигурацию ESLint. В качестве значения extends укажем конфигурацию airbnb-base (без React). При необходимости можно указать не одну, а несколько конфигурации. В этом случае каждая следующая конфигурация будет расширять предыдущую. Т.е. если мы укажем какую-то конфигурацию после airbnb-base , то она будет уже расширять не общую конфигурацию ESLint, а airbnb-base ;
• parserOptions — позволяет задать параметры языку JavaScript, которые мы хотим поддерживать. В настоящее время рекомендуется использовать при разработке проектов синтаксис ECMAScript 6. Указание поддержки этой версии осуществляется посредством задания ключу ecmaVersion значения 6. При необходимости вы можете указать вместо этой другую версию.

Если вам необходимо дополнительно линтить ошибки кода, размещенного в теге , то установите плагин eslint-plugin-html :

sudo npm install --save-dev eslint-plugin-html

Форматирование кода JavaScript будем выполнять с помощью Prettier. Для правильной совместной работы Prettier и ESLint установим следующие npm пакеты:

sudo npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier

Для того чтобы ESLint не просматривал определённые папки и не выдавал по ним ошибки следует создать файл .eslintignore и прописать их в нём:

/.vscode /.git node_modules

Если у вас включено стандартное форматирование кода в VS Code при сохранении, то чтобы в качестве плагина для форматирования js файлов применялся ESLint, следует в конфигурационный файл «settings.json» добавить следующее:

"editor.formatOnSave": true, // добавить это "[javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }, "eslint.format.enable": true

Если вы хотите чтобы при сохранении файлов форматировались только js файлы, то editor.formatOnSave необходимо установить значение false , а true этому ключу только в секции «[javascript]» :

"editor.formatOnSave": false, "[javascript]": { "editor.formatOnSave": true, "editor.defaultFormatter": "dbaeumer.vscode-eslint" }, "eslint.format.enable": true

Теперь, ESlint будет проверять JavaScript код и показывать в нём ошибки и предупреждения. Они будут помечаться с использованием волнистых линий.

Результат проверки JavaScript кода ESLint:

Дополнительная настройка VS Code

Вот ещё некоторый список плагинов для VS Code, которые могут расширить возможности Visual Studio Code для фронтенд разработки и не только:

• Project Manager – для удобного управления вашими проектами, независимо от того, где они расположены;
• LiveServer – локальный сервер с возможностью автоматического обновления страниц в браузере при их изменении (запустить сервер можно посредством нажатия на иконку «Go Live» в строке состояния или выбора пункта «Open with Live Server» в контекстном меню области редактора);
• Debugger for Chrome – применяется для отладки JavaScript кода в среде редактора на основе браузера Chrome или любого другого, который поддерживает протокол Chrome Debugger;
• Settings Sync – плагин для синхронизации настроек VS Code (хранение настроек осуществляется на GitHub);
• Visual Studio IntelliCode – система, которая предназначена для экономии вашего времени, помещая наиболее часто используемые элементы завершения для текущего контекста в верхней части списка;
• TODO HighLight – для выделения TODO, FIXME и другие аннотаций в коде;
• Version Lens – показывает информацию о версии пакета для npm, jspm, dub и dotnet ядра;
• GitLens – расширяет возможности Git встроенного в этот редактор (он позволяет очень просто понять почему и когда были изменены те или иные строки кода, изучить историю и развитие кодовой базы проекта и многое другое).

# Расширение для Visual Studio Code

Ride — расширение Visual Studio Code для работы с Ride и блокчейном Waves.

• Автодополнение кода (подсказки).
• Подсветка синтаксиса и ошибок.
• Интерактивная консоль JavaScript со встроенными функциями для взаимодействия с блокчейном.

# Установка и настройка

1. Скачайте и установите Visual Studio Code: https://code.visualstudio.com/

Чтобы изменить настройки для работы с блокчейном:

1. В списке расширений найдите Ride и нажмите кнопку .
2. Если требуется, измените сеть блокчейна и URL ноды.
3. Укажите секретную фразу (seed) аккаунта.

# Написание Ride-скрипта

Расширение работает с файлами .ride .

В процессе написания Ride-скрипта расширение:

• подсказывает названия встроенных функций, операторов, переменных и структур Ride — просто начните ввод или нажмите Ctrl + пробел (для macOS — Cmd ⌘ + пробел);
• подсвечивает ошибки.

# Установка скрипта

Отправить транзакцию установки dApp-скрипта, скрипта аккаунта или скрипта ассета можно с помощью интерактивной консоли JavaScript.

Пример установки dApp-скрипта:

const script = compile(contract()); const ssTx = setScript(script>, env.SEED); await broadcast(ssTx); 

• Функция contract() получает код скрипта с текущей активной вкладки редактора, где открыт файл .ride .
• Функция compile() компилирует код скрипта.
• Функция setScript() создает транзакцию вызова скрипта и подписывает с помощью секретной фразы, указанной в настройках расширения.
• Функция broadcast() отправляет транзакцию на ноду, указанную в настройках расширения.

# Интерактивная консоль JavaScript

В консоли можно запускать команды JavaScript. Консоль из коробки поддерживает функции для взаимодействия с блокчейном Waves: подписание и отправку транзакций, чтение данных блокчейна, работу с ключами аккаунта и др. См. Список функций js-test-env

Чтобы открыть консоль, перейдите в Command Palette (Ctrl + Shift + P или Cmd ⌘ + Shift + P) и выполните команду Start Waves JS Console.

Как пользоваться Visual Studio Code

Visual Studio Code – это один из наиболее популярных редакторов кода, разработанный корпорацией Microsoft. Он распространяется в бесплатном доступе и поддерживается всеми актуальными операционными системами: Windows, Linux и macOS. VS Code представляет собой обычный текстовый редактор с возможностью подключения различных плагинов, что дает возможность работать со всевозможными языками программирования для разработки любого IT-продукта.

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

Установка Visual Studio Code

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

1. Переходим на официальный сайт и загружаем установочный файл.
2. Следующим шагом запускаем установочник и ставим редактор кода на компьютер. В блоке «Выберите дополнительные задачи» рекомендую отметить два пункта, позволяющие запускать файлы через выпадающее меню – так вы сможете быстро открыть код в VS Code.

На этом установка завершена. Теперь мы можем использовать редактор кода по назначению. Обычно с этим не должно возникнуть никаких проблем, однако на слабых машинах запуск утилиты часто прерывается. Вылечить такой недуг можно с помощью добавления нового значения к пути ярлыка. Для этого откроем его свойства через правый клик мыши и в графе «Объект» пропишем —disable-gpu.

Готово! Теперь программа должна работать на любом компьютере.

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Интерфейс Visual Studio Code

При первом запуске перед нами отобразится окно приветствия, через которое можно получить быстрый доступ к ранее запущенным проектам либо создать новые. Весь интерфейс на английском языке (всего в несколько кликов он переводится на русский, но об этом чуть позже). Давайте пока разберемся с интерфейсом: откроем для примера файл с кодом, посмотрим, как его идентифицирует программа без предварительных настроек, и разберем каждый блок утилиты.

Запустить файл с кодом мы можем через правый клик мыши -> Открыть с помощью Code. Файл можно открыть и в программе: для этого в верхнем правом углу выбираем «File» и жмем «Open File…». После этого переходим в нужную директорию и выбираем файл.

В результате перед нами отобразится окно с кодом из файла. Давайте визуально разделим интерфейс на блоки и рассмотрим каждый из них более детально.

Первое, что бросается в глаза, – это блок кода, для которого отведено больше всего места. Название функций и прочее подсвечено разными цветами. Здесь же указан путь до файла, а чуть выше расположены вкладки-файлы, по которым можно перемещаться. С помощью них мы можем добавлять не просто один файл с кодом, а целый проект.

Следующий блок – левая панель управления, включающая в себя 5 основных вкладок: «Проводник», «Поиск», «Система управления версиями», «Запуск кода» и «Расширения». Первая предоставляет пользователю возможность просматривать содержимое проекта и быстро перемещаться внутри него.

Вторая вкладка – поиск. Используется для нахождения слов в документе. Он также может быть запущен с помощью комбинации клавиш «CTRL+SHIFT+F». Алгоритм использования довольно прост – вводим название в поиск и смотрим результат.

Система управления версиями – предназначена для взаимодействия с git.

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

Еще одна важная вкладка, с помощью которой из Visual Studio Code можно сделать функциональную утилиту, это «Расширения». В ней находятся установочники для всех популярных инструментов, используемых разработчиками.

Следующий блок – нижний статус-бар. В нем отображается общая информация о состоянии программы. Обратите внимание, что VS Code автоматически определяет язык программирования и информирует нас об этом.

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

Как видите, если пройтись по интерфейсу программы, то она уже не кажется такой сложной. Чтобы сделать все еще проще, давайте проведем русификацию всех элементов интерфейса. О том, как это сделать, поговорим далее.

Русификация Visual Studio Code

Чтобы провести русификацию программы, открываем вкладку с расширениями и прописываем запрос vscode-language-pack-ru. В результате будет отображен новый элемент с кнопкой «Install» – кликаем по ней и ожидаем завершения установки.

Перезагружаем программу и смотрим, что язык интерфейса был изменен на русский:

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

Внешний вид

Мы можем полностью изменить цветовую схему утилиты. Чтобы это сделать, воспользуемся комбинацией клавиш «CTRL+SHIFT+P» и введем запрос «theme». В отобразившемся списке выберем «Параметры: Цветовая тема».

В результате отобразится список возможных тем – для примера возьмем солнечную тему.

После применения темы интерфейс примет следующий вид:

Обратите внимание, что это не весь список тем – вы можете установить и другие. Для этого пролистайте в самый низ списка и выберите «Установить дополнительные цветовые темы…». После этого в левой части отобразится дополнительный блок с доступными цветовыми решениями.

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

Управление проектами

По умолчанию Visual Studio Code поддерживает работу с несколькими проектами, однако перемещаться между ними не очень удобно. Для удобства обычно используют плагин под названием Project Manager. С его помощью открывается возможность перемещения между рабочими областями всего в один клик. Установка проходит через магазин расширений, о котором мы говорили ранее. После того как менеджер проектов будет установлен, в левой панели управления появится новая вкладка для работы с плагином.

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

Автоформатирование кода

Один из важных этапов программирования – умение приводить все к единому виду с правильными отступами. Для таких задач в VS Code есть специальные плагины, позволяющие форматировать весь текстовый документ. Это такие расширения, как PHP-CS-Fixer для PHP, Prettier для JS/HTML/CSS и другие.

Рассмотрим, как форматируется код, написанный на JavaScript:

1. Возьмем для примера функцию, отступы в которой выстроены случайным образом.
2. Устанавливаем плагин Prettier через магазин расширений и открываем документ, который нужно отформатировать. Зажимаем комбинацию клавиш «CTRL+SHIFT+P» и вводим запрос «Format Document».
3. Смотрим на код и видим, что он преобразился и принял аккуратный вид.

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

Автодополнение

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

По умолчанию функция автодополнения в Visual Studio Code доступна только для некоторых языков. Для прочих языков программирования существуют дополнительные пакеты с окончанием «intellisense».

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

Рекомендую установить PHP Intellisense, CSS Intellisense и Path Intellisense.

Управление Vim

Vim – это свободный текстовый редактор, работающий на основе vi. По умолчанию он установлен на каждой операционной системе семейства Unix. Кроме того, он доступен и в Visual Studio Code. Для работы с ним потребуется установить расширение с аналогичным названием:

Теперь мы можем перемещаться по файлу клавишами h, j, k, l, использовать Esc и сохранять файл командой :w.

Отладка кода

Для того чтобы запустить код в VS Code, нам нужно воспользоваться одним из расширений. Например, для JavaScript подойдет Debugger for Chrome. Узнать, какое расширение необходимо для конкретного языка, можно через «Выполнить» -> «Установить дополнительные отладчики…».

В результате в левой части окна будет отображен список доступных плагинов – найдите в нем подходящий для вас и следуйте инструкции.

После того как нужный плагин будет установлен, можно запускать отладку кода. Для этого достаточно открыть пункт «Выполнить» и нажать на кнопку «Запустить отладку». Также это можно сделать с помощью клавиши «F5».

С помощью плагинов мы можем отладить код, написанный на любом языке программирования.

Заключение

Сегодня мы разобрали функционал инструмента Visual Studio Code. Данная среда хороша не только для профессионалов, но и для новичков, изучающих основы программирования. Одно из преимуществ программы – это минимальное требование к железу: запустить программу можно практически на любом компьютере.

Надеюсь, что работа в VS Code больше не будет для вас проблемой, а активные проекты ждет успех. Удачи!