Запустить typescript в visual studio code

Обновлено: 06.07.2024

Любой JavaScript это по сути TypeScript, а все TypeScript-коды компилируются в хороший, чистый JavaScript. С официально разрешенным ES6 (EcmaScript2015), TypeScript продолжает предлагать отличную совместимость и новые функции и, таким образом, TypeScript остается отличным языком для разработки JavaScript. Этот фантастический язык теперь имеет великого компаньона: Visual Studio Code - нового редактора кода от Microsoft, который, кстати, был создан с помощью TypeScript! Поэтому, вполне естественно, что они прекрасно работают друг с другом.

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

Скачайте Visual Studio Code с официального сайта и запустите процесс установки. После завершения инсталляции вы можете приступить к написанию скриптов.

Если раньше вы пользовались разными версиями TypeScript, убедитесь, что %PATH% (системная переменная) обновлена и указывает на последнюю установленную версию. В противном случае некоторые вещи могут не работать.

Работа с TypeScript

Стандартная конфигурация выглядит следующим образом:

Теперь, когда у нас есть файл проекта, мы можем начать создавать ts-файлы с кодом. Выберите в меню Файл -> Новый файл. Добавьте в него следующие строки и сохраните как hello-world.ts:

Здесь ничего сложного: обычный класс, который выводит текст на консоль и возвращает целое число 1 .

Билдинг и компиляция

Для начала нажмите Ctrl+Shift+B . Если это ваша первая попытка создания проекта, VS Code предложит вам создать Task Runner (Средство выполнения задач). Нажмите на Configure Task Runner (Настроить средство выполнения задач) для настройки конфигурационного файла.

Task Runner использует файл конфигурации, который дает VS Code указание использовать специальные исполнительные файлы с определенными параметрами. В нашем случае нам интересен TypeScript компилятор

После завершения процесса вы должны увидеть папку .vscode с файлом task.json.

Откройте файл task.json для редактирования. Создайте конфигурацию для того, чтобы VS Code запустил tsc.exe с hello-world.ts в качестве аргумента по аналогии с приведенным ниже примером:

Хоть всё и выглядит нормально, давайте попробуем воспользоваться возможностями файла tsconfig.json чтобы поменять некоторые параметры билдинга. Вы можете изменить предыдущее задание, чтобы оно выглядело так:

Опишем кратко определение задания:

version: версия таска
command: какой исполнительный файл вызвать
showOutput: [ silent , always , never ]
isShellCommand: запускает команду tsc (VS Code напрямую исполняет ее)
args : пустой, т.к. переписан tsconfig.json
problemMatcher: строка массива строк, основанная на предопределенных сопоставителях задач. Сейчас нет смысла это трогать

Информация об ошибках, возникающих в процессе разработки очень важна. Вот почему я всегда устанавливаю "showOuput": "always" . Это изменяет поведение Окна Вывода, заставляя его всегда быть на виду в процессе разработки. Доступные значения определяют, как ведет себя окно вывода:

silent: окно вывода появляется только в случае, если нет никаких ошибок в коде. Это значение по умолчанию
always: окно вывода всегда на виду
never: пользователь должен самостоятельно открывать окно вывода через меню «Вид», либо через сочетание клавиш Ctrl+Shift+U

Теперь в каталоге вашего проекта вы должны увидеть следующие файлы:

С добавлением новых файлов и ростом вашего проекта, обязательно убедитесь в том, что включили все *.ts -файлы, которые хотите скомплировать, в tsconfig.json file . Это поможет убедиться в том, что весь ваш код переводится в JavaScript и сливается в один файл, как в наших предыдущих настройках.

Ошибки при создании

Visual Studio Code отличная система предупреждения об ошибках. У вас появляется несколько вариантов отображения ошибок. Первый – через IntelliSense, как на картинке ниже:

Второй – маленький значок, говорящий о том, что что-то идет не так. Значок располагается в левом нижнем углу на панели задач:

Нажмите на иконку, и в верхней части окна перед вами выскочит окошко, показывающее номер строки и колонки, где находится ошибка, а также описание и тип ошибки, как на картинке ниже:

Резюме

Visual Studio Code отлично подходит при работе с TypeScript. В следующем посте Gulp и Visual Studio Code я расскажу как добавить Gulp к проекту для выполнения различных задач: компиляции ваших *.ts файлов, минимизации кода, компиляции LESS/SASS и т.д.

Вы можете добавить в проекты поддержку TypeScript, используя пакет TypeScript SDK, который доступен по умолчанию в Visual Studio Installer или в виде пакета npm. Для проектов, которые разработаны в Visual Studio 2019, рекомендуется использовать пакеты npm TypeScript. Они обеспечивают лучшую переносимость между разными средами и платформами.

Добавление поддержки TypeScript с использованием npm

Пакет npm TypeScript позволяет включить поддержку TypeScript. Когда в проект устанавливается пакет npm или TypeScript 2.1 или более новой версии, в редактор загружается соответствующая версия языковой службы TypeScript.

Следуя инструкциям, установите рабочую нагрузку разработки Node.js и среду выполнения Node.js.

Для самой простой интеграции с Visual Studio создайте проект с помощью одного из шаблонов Node.js для TypeScript, например шаблона пустого веб-приложения Node.js. Либо используйте шаблон Node.js для JavaScript, предоставляемый в Visual Studio, и следуйте инструкциям в этом разделе или используйте проект Открыть папку.

Установите пакет npm для TypeScript, если он еще не включен в ваш проект.

В Обозревателе решений (область справа) откройте package.json в корневом каталоге проекта. Перечисленные пакеты соответствуют пакетам в узле npm в Обозревателе решений. Дополнительные сведения см. в разделе Управление пакетами npm.

Установить пакет npm TypeScript для проекта Node.js можно с помощью командной строки или IDE. Чтобы установить пакет с помощью IDE, щелкните правой кнопкой мыши узел npm в Обозревателе решений, выберите Установить новый пакет npm, найдите TypeScript и установите пакет.

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

Если пакет не будет включен в проект, добавьте файл с расширением .tsconfig в корневой каталог проекта. Для этого щелкните правой кнопкой мыши узел проекта и выберите Добавить > Новый элемент. Выберите Файл конфигурации TypeScript JSON, а затем нажмите кнопку Добавить.

Visual Studio добавит файл tsconfig.json в корневую папку проекта. Этот файл можно использовать для настройки параметров компилятора TypeScript.

Откройте файл tsconfig.json и обновите его, задав необходимые параметры компилятора.

Ниже приведен пример простого файла tsconfig.json.

include указывает компилятору, где искать файлы TypeScript (*.ts).
Параметр outDir указывает выходную папку для обычных файлов JavaScript, которые преобразуются компилятором TypeScript.
Параметр sourceMap указывает, нужно ли компилятору создать файлы sourceMap.

В приведенной выше конфигурации представлен пример базовой конфигурации TypeScript. Сведения о других параметрах см. в разделе о файле tsconfig.json.

Построение приложения

В проект добавьте файлы TypeScript ( .ts) или TypeScript JSX ( .tsx), а затем добавьте код TypeScript. В качестве простого примера TypeScript используйте следующий код:

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

Если необходимо выполнить сборку с помощью стороннего средства, например webpack, можно добавить в файл package.json скрипт сборки для командной строки:

Пример использования webpack с React и файла конфигурации webpack см. в статье Учебник. Создание приложения Node.js и React в Visual Studio.

Пример использования Vue.js с TypeScript см. в статье Создание приложения Vue.js.

Если необходимо настроить такие параметры, как начальная страница, путь к среде выполнения Node.js, порт приложения или аргументы среды выполнения, щелкните правой кнопкой мыши узел проекта в Обозревателе решений и выберите Свойства.

При настройке сторонних средств в проектах Node.js не используются пути, заданные в разделе Средства > Параметры > Проекты и решения > Управление веб-пакетами > Внешние веб-инструменты. Эти параметры используются для проектов других типов.

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

Хотя сборка приложения выполняется автоматически при его запуске, рассмотрим, что происходит в процессе сборки.

Если вы создали сопоставители с исходным кодом, откройте папку, указанную в параметре outDir, где вы найдете созданные файлы *.js, а также созданные файлы *js.map.

Файлы сопоставителей с исходным кодом требуются для отладки.

Выполнение приложения

Инструкции по запуску приложения после его компиляции см. в разделе Создание первого приложения Node.js.

Автоматизация задач сборки

Для автоматизации задач сторонних средств, таких как npm и webpack, вы можете использовать обозреватель запускателя задач в Visual Studio.

TypeScript – это типизированный расширенный набор JavaScript, который компилируется в простой JavaScript. Давайте разберемся, что именно это означает:

типизированный язык позволяет определять переменные, параметры и типы данных.
как расширенный набор TypeScript вносит дополнительные функции в стандартный набор JavaScript. Валидный JavaScript является валидным TypeScript, но не наоборот.
компиляция в простой JavaScript нужна потому, что TypeScript не запускается браузером. Таким образом, доступные инструменты компилируют TypeScript в понятный браузеру JavaScript.

В этом руководстве мы покажем, как работать с TypeScript в Visual Studio Code, и рассмотрим преимущества их совместного использования.

Требования

Базовые навыки работы с JavaScript.
Локальная установка Node.js. Найти мануал по установке для вашей системы можно здесь.
Установка Visual Studio Code

1: Установка и компиляция TypeScript

Для начала нам нужно выполнить глобальную установку пакета TypeScript на ваш компьютер. Для этого запустите следующую команду в своем терминале:

npm install -g typescript

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

Перейдите в новый каталог:

Теперь нужно создать новый файл TypeScript. Эти файлы используют расширение .ts.

Теперь вы можете открыть VS Code и создать новый файл, нажав File → New File. После этого сохраните его, нажав File → Save As. В мануале мы назовем этот файл app.ts. В целом же имя файла не имеет значения, важно только его расширение .ts.

Файл должен начинаться со строки export <>;, чтобы VS Code распознал его как модуль.

Создайте функцию, которая будет выводить имя и фамилию из объекта person:

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

В приведенном ниже фрагменте представлен интерфейс для объекта Person с двумя свойствами: firstName и lastName. Сама же функция welcomePerson была изменена, чтобы принимать только объекты Person.

export <>;
function welcomePerson(person: Person) console.log(`Hey $ $`);
return `Hey $ $`;
>
const james = firstName: "James",
lastName: "Quick"
>;
welcomePerson(james);
interface Person firstName: string;
lastName: string;
>

Вы поймете преимущество этого хода, если попытаетесь передать в функцию welcomePerson какую-то строку.

Например, давайте заменим james:

Поскольку мы работаем с файлом TypeScript, VS Code немедленно сообщит вам, что функция ожидает объект Person, а не строку.

Argument of type '"James"' is not assignable to parameter of type 'Person'.

Теперь, когда у вас есть рабочий файл TypeScript, вы можете скомпилировать его в JavaScript. Для этого вам нужно вызвать функцию и указать, какой файл компилировать. Сделать это можно с помощью встроенного терминала VS Code.

app.ts:13:15 - error TS2345: Argument of type '"James"' is not assignable to parameter of type 'Person'.

Команда ls выведет список файлов по текущему пути:

Вы увидите исходный файл ts и новый файл js:

Откройте файл app.js в VS Code:

"use strict";
exports.__esModule = true;
function welcomePerson(person) console.log("Hey " + person.firstName + " " + person.lastName);
return "Hey " + person.firstName + " " + person.lastName;
>
var james = firstName: "James",
lastName: "Quick"
>;
welcomePerson(james);

Обратите внимание, что шаблонные литералы, являющиеся функцией ES6, были скомпилированы как простая конкатенация строк в ES5. Скоро мы вернемся к этому вопросу.

Чтобы убедиться, что все работает, вы можете запустить JavaScript непосредственно, используя Node в своем терминале:

В консоли вы увидите имя:

Hey James Quick

2: Создание конфигурационного файла TypeScript

Итак, вы скомпилировали один файл, и это здорово. Но в реальном проекте вам может понадобиться настроить компиляцию всех файлов: к примеру, если файлы нужно будет компилировать в ES6 вместо ES5. Для этого можно создать конфигурационный файл TypeScript.

Чтобы создать этот файл, вы можете запустить следующую команду (подобную npm init):

Вы получите такой вывод:

message TS6071: Successfully created a tsconfig.json file.

Откройте новый файл tsconfig.json, и вы увидите множество различных опций, большинство из них будут закомментированы.

Внеся это изменение в tsconfig.json, запустите команду tsc в своем терминале:

Примечание: Здесь мы не указываем входной файл, хотя ранее делали это. Официальная документация проекта сообщает: если в командной строке указан входной файл, файлы tsconfig.json будут проигнорированы.

Теперь откройте только что созданный файл app.js:

"use strict";
Object.defineProperty(exports, "__esModule", < value: true >);
function welcomePerson(person) console.log(`Hey $ $`);
return `Hey $ $`;
>
const james = firstName: "James",
lastName: "Quick"
>;
welcomePerson(james);

Обратите внимание, что шаблонный литерал здесь сохраняет свой синтаксис, а это доказывает, что TypeScript был успешно скомпилирован в ES6.

Для примера можно изменить значение outDir с текущего каталога на каталог dist:

После повторной компиляции (tsc) ваш выходной файл JavaScript будет находиться внутри каталога dist.

Вы можете использовать команды cd и ls в своем терминале, чтобы изучить содержимое каталога dist:

Вы увидите ваш скомпилированный файл JavaScript в новом каталоге:

3: TypeScript и современные фронтэнд фреймворки

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

Angular CLI

Проекты Angular CLI поставляются с предварительной установкой TypeScript. Все настройки, включая проверку соблюдения стандартов кодирования, встроены в них по умолчанию. Создайте свой простой проект Angular CLI и внимательно изучите его, чтобы увидеть, как выглядит TypeScript в реальном приложении.

Create React App 2

Create React App не предоставляет TypeScript по умолчанию, но в последней версии его можно настроить таким образом. Если вам интересно узнать, как использовать TypeScript с Create React App, смотрите этот мануал.

Vue CLI 3

Vue CLI можно настроить на поддержку TypeScript при создании нового проекта. Больше информации об этом вы можете найти в Vue Docs.

Заключение

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

Представьте, что вы бы использовали строго типизированный язык типа JAVA с такой мощной IDE (интегрированной средой разработки), как Eclipse, а затем попробовали бы JavaScript. Думаю, вы были бы очень разочарованы.

Но не по причине каких-то недостатков этого языка: лично я предпочел бы работать с кодом на JavaScript, а не на JAVA. Дело в том, что функционал Eclipse основывается преимущественно на типах и других конструкциях JAVA, помогающих идентифицировать различные структуры. К таким структурам относятся типизированные переменные, классы, интерфейсы, абстрактные классы. И это далеко не полный их перечень.

А вот в JavaScript строгой типизации нет. Поэтому переменной, объявленной как Number , с тем же успехом легко присваивается другой тип, например строковый String . Можно ли ожидать в таком случае от IDE какого-то использования технологии IntelliSense? Нельзя.

Здесь как раз и пригодится TypeScript, у которого много скрытых преимуществ перед JS. Одно из них — возможность реально задействовать мощь IDE. TypeScript пора перестать быть прославленной версией Notepad и превратиться уже в очень полезный инструмент разработки программного обеспечения.

Дальше вашему вниманию будут представлены рекомендации по работе с кодом на VSCode и TypeScript.

Создание собственных пользовательских фрагментов кода

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

Имеющаяся в VSCode технология автодополнения IntelliSense предлагает фрагменты кода, которые включены по умолчанию. Нужно только запомнить префикс, который вводится для их запуска. Есть также возможность создавать собственные фрагменты.

Для просмотра списка доступных для TS фрагментов кода надо выбрать Insert Snippet («Вставить фрагмент кода») в палитре команд.

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

Но главное здесь не они, а возможность добавлять собственные фрагменты кода. Это делать очень легко и удобно.

Нужно нажать на User Snippets («Фрагменты кода пользователя») в File («Файл») > Preferences («Пользовательские настройки») (Code («Код») > Preferences («Пользовательские настройки») на macOS) и выбрать язык, на котором фрагменты кода будут доступны, или оставить global (глобальный), если они должны появиться для всех языков.

Чтобы определить пользовательский фрагмент кода, нужно добавить определение JSON в только что созданный (или только что открытый, если он уже существует) файл.

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

Нужно определить следующие элементы:

name (название), которое появится в выпадающем списке IntelliSense, если нет description (описания).
Необязательный элемент scope (область применения). Если это свойство не определено, фрагмент кода является глобальным. В противном случае приводится список языков, к которым он применяется.
prefix (префикс), т. е. слово (или список слов: его значение определяется и как массив строк), запускающее фрагмент.
body (тело), содержащее список строк кода. Внутри них добавляются теги VSCode, которые помогают перемещаться по нему с помощью клавиши TAB.
И, наконец, description (описание). Помните, что это необязательный элемент: если вы его не используете, то вместо него будет показываться название, когда элемент появится в выпадающем меню IntelliSense.

В приведенном выше примере был создан пользовательский фрагмент кода, который будет запускаться, как только вы начнете писать слово mylog. Этот фрагмент сразу напишет console.log . Интересно, что здесь также используется предопределенная переменная TM_SELECTED_TEXT , которая указывает на выбранный текст. Поэтому фрагмент кода, если он запускается вручную при выборе кода, инкапсулирует этот выбор внутри console.log .

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

TM_SELECTED_TEXT указывает на выбранный текст или пустую строку.
TM_CURRENT_LINE указывает на содержимое текущей строки.
TM_CURRENT_WORD указывает на содержимое слова, отмеченного курсором, или на пустую строку.
TM_LINE_INDEX указывает на номер строки с учетом нулевого индекса.
TM_LINE_NUMBER указывает на номер строки, начиная с индекса 1.
TM_FILENAME указывает на имя файла текущего документа.
TM_FILENAME_BASE указывает на имя файла текущего документа без его расширений.
TM_DIRECTORY указывает на каталог текущего документа.
TM_FILEPATH указывает на полный путь к файлу текущего документа.
CLIPBOARD указывает на содержимое буфера обмена.
WORKSPACE_NAME указывает на имя открытой рабочей области или папки.

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

CURRENT_YEAR выбранный год.
CURRENT_YEAR_SHORT последние две цифры года.
CURRENT_MONTH двузначное обозначение месяца (например, «02»).
CURRENT_MONTH_NAME полное название месяца (например, December «декабрь»).
CURRENT_MONTH_NAME_SHORT сокращенное название месяца (например, Dec «дек»).
CURRENT_DATE день месяца.
CURRENT_DAY_NAME название дня недели (например, Monday «понедельник»).
CURRENT_DAY_NAME_SHORT сокращенное название дня недели (например, Mon «пн»).
CURRENT_HOUR час в 24-часовом формате.
CURRENT_MINUTE минута.
CURRENT_SECOND секунда.
CURRENT_SECONDS_UNIX количество секунд, прошедших с начала эпохи Unix.

А для динамического добавления валидных тегов комментария (и без выбора языка) имеются:

BLOCK_COMMENT_START на JavaScript выводится /* , а в HTML <!-- .
BLOCK_COMMENT_END на JavaScript выводится */ , а в HTML --> .
LINE_COMMENT на JavaScript выводится // .

Посмотрите на следующий фрагмент кода:

Ввод слова doc приведет к созданию блока комментариев и переместит курсор ровно туда, где находится $1 . Если что-то написать уже в этом месте и нажать на клавишу TAB, курсор переместится в $2 .

Вот как будет выглядеть итоговый результат:

Настраиваем то, как VSCode форматирует TypeScript

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

В окне настроек вводим typescript.formatting , после чего появляются 24 параметра форматирования.

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

Этот список параметров поможет настроить VSCode именно так, как вам надо. Закончив с настройкой, запустите их, выбрав Format Document («Форматировать документ») в палитре команд.

Легкий рефакторинг

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

К счастью, VSCode реализует набор очень симпатичных и удобных функций рефакторинга, которые доступны без каких-либо дополнительных расширений.

Переименование имеющихся символов

Переименовать переменную или класс во всем коде легко с помощью простого Search&Replace, конечно если их названия не являются частью других сущностей. Допустим, у вас класс с названием Car , а затем появляется переменная oCar , содержащая его экземпляр. И если вы захотите переименовать сам класс, возникнут проблемы.

В VSCode все намного проще: нужно найти одно из вхождений сущности, подлежащей переименованию, и нажать на F2 (или щелкнуть по ней правой кнопкой мыши и выбрать Rename Symbol («Переименовать символ»)). После установки нового названия оно будет корректно переименовано везде, где встречается (в том числе в определении).

Преобразование кода в функции или методы

Извлечение части логики в привычное место, например в функцию или метод, — очень распространенная техника рефакторинга.

Если используете что-то более одного раза, нужно это что-то извлечь

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

Выбираете его, нажимаете на лампочку, затем на Extract to function in global scope («Извлечь в функцию в глобальной области»):

После ввода названия новой функции получаете что-то вроде этого:

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

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

Упрощение сигнатуры функций

Есть еще одна интересная штука, которая проделывается с функциями или методами, принимающими слишком много аргументов. Это их упрощение посредством добавления деструктуризации объектов.

Посмотрите на следующую функцию:

Выберем все параметры, нажмем на лампочку, теперь выберем Convert Parameters to destructured object («Преобразовать параметры в деструктурированный объект») и получим что-то вроде этого:

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

Выбирая Extract to Type alias («Извлечь в псевдоним типа»), запрашиваем новое имя типа. Имя будет создано и помещено в сигнатуру функций:

Теперь, когда тип у нас определен, еще больше упростим код, чтобы он выглядел вот так:

Автоматические действия после сохранения файла

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

Для настройки этих действий нужно будет отредактировать файл settings.json для редактора. Просто добавляете (или редактируйте) запись для editor.codeActionsOnSave . И устанавливаете там список действий, выполняемых после сохранения файла, например запуск ESLint или добавление недостающих импортов.

И устанавливаем это в виде массива:

Если же вы хотите, чтобы параметры форматирования добавлялись при сохранении файла автоматически (вместо ручного форматирования документа), включите в settings.json следующую запись:

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

Счетчики CodeLens

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

Реализации и ссылки

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

Для активации этой функциональной возможности надо просто найти слово CodeLens на экране настроек, а затем подключить все нужные счетчики.

Вот что мы увидим в коде теперь:

Это те самые индикаторы: 3 references («3 ссылки») и 1 reference («1 ссылка»). Их добавляет непосредственно VSCode. Нажимая на эти индикаторы, получаем более подробное представление о коде, ссылающемся на ту или иную конструкцию (в данном случае определяемые типы):