Visual Studio Code 1.30 добавили поддержку TypeScript 3.2.2 и многострочный поиск


Оглавление (нажмите, чтобы открыть):

Настройка редактора кода Visual Studio Code

Более 5 лет для своей работы я использовал редактор кода Notepad ++, это действительно простая «рабочая лошадка», которая, не смотря на свою простоту,имеет все необходимые базовые функции для написании кода и большой потенциал для расширяемости. Но, как говорится, все когда то заканчивается… Конечно же время не стоит на месте, все развивается, движется вперед, совершенствуется… Чего нельзя, к сожалению, сказать о Notepad++ �� Особенно огорчает дизайн и его привязка к ОС «Windows».

И вот ответ на мою боль — редактор исходного кода «Visual Studio Code»! Современный, бесплатный и кроссплатформенный, созданный в компании Microsoft.

Редактор кода Visual Studio Code

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

  • C++
  • C#
  • CSS
  • Dockerfile
  • HTML
  • JavaScript
  • Java
  • JSON
  • Less
  • Markdown
  • PHP
  • Python
  • Sass
  • TypeScript
  • Shell Script (Bash)
  • Rust
  • Swift
  • Visual Basic
  • XML, XSL, YAML

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

Поддержка синтаксиса Emmet

Внимание верстальщики! В «Visual Studio Code» уже включена поддержка Emmet. И вызывается ее исполнение простым нажатием клавиши TAB (табуляция). Для тех кто не в курсе приведу простой пример: что бы нам получить подобную HTML-структуру

нам достаточно ввести в документе следующего рода комбинацию и нажать клавишу табуляции, вуаля! И строчка превращается …

div>div>p>ul>li*5

Ну а каркас HTML документа по стандартам W3 HTML5 и подавно создать легко:

Освоив не хитрый синтаксис emmet вы определенно сэкономите свое время и нервы при работе с кодом HTML и CSS �� Попробуйте …

Расширения

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

  • PHP Debug (использует библиотеку XDebug и незаменим при отладке PHP-кода )
  • Bootstrap 3 Snippets (сниппеты популярного HTML-CSS-JS фреймворка)
  • Debugger for Chrome (Отладка кода JavaScript в браузере Chrome)
  • WordPress Snippet (функции WordPress)

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

Как установить расширение?

Установка происходит проще-простого. Либо из меню интерфейса редактора, где необходимо в разделе расширений ввести ключевое слово и воспользоваться поиском:

Либо (для более продвинутых) с помощью комбинации клавиш Ctrl+P и в появившуюся строку поиска необходимо забить ключевое слово, либо прямую ссылку для установки расширения, которую можно найти под каждым расширением на его странице, на сайте редактора «Visual Studio Code»:

При помощи специальных команд, в строке поиска можно осуществить фильтрацию к вашим расширениям по :

  • @popular (популярные)
  • @recommended (рекомендуемые)
  • @outdated (требуемые обновления)

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


Файл → Параметры → Параметры пользователя

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

Пользовательская настройка редактора

В своем предыдущем редакторе Notepad++ я определенно привык к двум вещам:

  1. При открытии новых файлов они не должны вызывать открытие новой копии редактора, а должны открываться в текущей копии, в новых вкладках. За это отвечает следующий параметр: «window.openFilesInNewWindow»: false,значение которого необходимо поменять с true на false
  2. Управление переносом строк

Все это мгновенно настраивается. Ниже приведен список настроек редактора с комментариями. Ознакомьтесь на досуге.

Предварительная версия TypeScript 3.6: что нового

Команда TypeScript сообщила 16 августа о выпуске предварительной версии (release candidate) TypeScript 3.6. В течение нескольких недель команда планирует стабилизировать предварительную версию. После этого TypeScript 3.6 выйдет официально.

Релиз кандидат доступен на NuGet. Также его можно установить через npm.

Давайте посмотрим, какие возможности предлагает TypeScript 3.6.

Строгие генераторы

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

Также генераторы ожидали, что типом yield по умолчанию является any .

TypeScript 3.6 ожидает, что в первом примере curr.value имеет тип string . Это возможно благодаря изменениям в определении типов в Iterator и IteratorResult . Также появился новый тип для представления генераторов: Generator .

Iterator в TypeScript 3.6 позволяет пользователям указывать тип принимаемых и возвращаемых данных, а также тип данных, которых принимает next .

Новый тип Generator всегда итерабельный, также у него всегда есть методы return и throw .

Мастер Йода рекомендует:  Инструменты для работы с интернетом вещей и звонки в смешанной реальности обзор конференции

TypeScript 3.6 конвертирует IteratorResult в различаемое объединение. Это позволяет определять разницу между получаемыми и возвращаемыми данными.

В TypeScript 3.6 используется yield в теле функции-генератора. Это позволяет корректно представлять данные, которые передаются в генератор в результате вызова next() .

Также в TypeScript 3.6 можно явно указывать тип данных, полученных из yield expression . В примере ниже next() можно выбрать только с типом данных boolean . В зависимости от значения done , value может быть строкой или числом.

Детали можно найти в пулреквесте.

Более точный оператор Array Spread

До появления стандарта ES-2015 в циклах for/of или спред-операторах массивов были довольно неудобные emit ’ы. Поэтому в TypeScript используется более простой дефолтный emit , который поддерживает только массивы. Также он поддерживает итерацию других типов данных с флагом —downlevelIteration . При использовании этого флага код получается более точным, но менее лаконичным.

Параметр —downlevelIteration в новой версии исключён, так как большинство пользователей пользуются итерацией по массивам. Тем не менее emit , который поддерживает только массивы, работает по-другому в некоторых пограничных случаях.

Обратите внимание на пример ниже.


Он эквивалентен массиву из следующего примера.

Однако TypeScript трансформирует его в такой код.

В то же время Array(5) создаёт массив с длинной 5, но без определённых элементов.

При использовании метода slice() TypeScript создаёт массив, в котором значения не определены, но у которого есть индексы.

Этот нюанс может показаться несущественным, но он доставляет неудобства специалистам. Поэтому в TypeScript 3.6 представлен новый инструмент __spreadArrays . Подробную информацию о нём можно найти в соответствующем пулреквесте.

Более удобные промисы

Промисы — самый распространённый способ работы с асинхронными данными. Однако использование API, ориентированных на промисы, доставляет разработчикам неудобства. В TypeScript 3.6 улучшена работа с неправильно обрабатываемыми промисами.

Например, специалисты иногда забывают использовать .then() или await перед передачей промисов в другую функцию. Новая версия TypeScript сообщает об этой ошибке и предлагает пользователю использовать await .

Также разработчики иногда пытаются получить доступ к методу до использования await или .then() . Пример ниже показывает, как TypeScript 3.6 реагирует на эту ошибку.

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

Также появилась опция быстрого исправления описанной выше ошибки (см. иллюстрацию).

Улучшена поддержка юникода в идентификаторах

В релиз кандидате TypeScript 3.6 улучшена поддержка юникода в идентификаторах. Пример ниже.

Поддержка import.meta в System.js

В TypeScript 3.6 включена поддержка трансформации import.meta в context.meta . Нагляднее в коде.

Методы доступа get и set можно использовать в окружающем контексте

В более ранних версиях методы доступа get и set нельзя было использовать в окружающем контексте (например, в declare class ). Теперь разработчики могут пользоваться геттерами и сеттерами.

Окружающие классы и функции можно объединять

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

Это позволяет использовать такой код.

Раньше пришлось бы писать так.

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

API теперь поддерживают —build и —incremental

Начиная с версии 3.0 в TypeScript включена поддержка —build , а в версии 3.4 добавлена поддержка —incremental . Эти флаги позволяют гибко структурировать проекты и ускоряют разработку. К сожалению, —build и —incremental не работали со сторонними инструментами, например, Gulp или Webpack. В TypeScript 3.6 данная возможность появилась.

Чтобы создавать сборки с —incremental , разработчики могут использовать API createIncrementalProgram и createIncrementalCompilerHost . Новая функция readBuilderProgram позволяет использовать файлы из .tsbuildinfo , сгенерированные указанными API.


Решена проблема точки с запятой

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

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

Умный синтаксис автоимпорта

Старые версии TypeSript по умолчанию используют для автоимпорта синтаксис ECMAScript. Это неприемлемо для части проектов TypeScript с определёнными настройками компилятора, а также для проектов Node с использованием нативного JavaScript, где используется require .

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

Методы со строковым именем constructor становятся конструктором

Методы с названием constructor считаются конструктором независимо от того, как они объявляются: с помощью идентификатора или строкового имени.

Важное исключение — вычисляемые значения остаются методами.

Обновления DOM

Ниже несколько важных изменений.

  • Тип глобального объекта window изменился с Window на Window & typeof globalThis .
  • Вместо GlobalFetch используется WindowOrWorkerGlobalScope .
  • Вместо контекста experimental-webgl используется webgl или webgl2 .

Комментарии JSDoc не объединяются

В проектах JavaScript TypeScript обращается к комментариям JSDoc, чтобы определить объявленный типы.

Ключевые слова не могут содержать избегающие последовательности

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

Что дальше

Команда TypeScript ждёт обратную связь по релиз кандидату TypeScript 3.6. Полученные данные помогут выпустить официальную версию TypeScript.

Адаптированный перевод статьи Announcing TypeScript 3.6 RC. Мнение администрации «Хекслета» может не совпадать с мнением автора оригинальной публикации.

Как отключить лишние предложения автоматического импорта в VS Code / TypeScript?

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

Проблема заключается в том, что всякий раз, когда я печатаю что-то вроде

, IntelliSense VS Code показывает мне два предложения:

[1116 ] Как правильно запретить VS Code автоматически предлагать второй импорт?


библиотека tsconfig (тот, который использовался для генерации наборов для библиотеки):

project tsconfig (тот, который использовался в проекте, где используется библиотека):

Мастер Йода рекомендует:  Индексация страниц и разделов сайта поисковыми роботами Яндекс

Visual Studio Code 1.30 Released

Microsoft has released the development environment Visual Studio Code 1.30. The tool has received new features, as well as improved support for JavaScript and TypeScript.

The search tool in the new version of the editor allows you to make multi-line queries. You can add a new line to the query by pressing Shift + Enter or simply by pasting text from the clipboard.

Custom headers and menu items in Linux are now activated by default. Since some menus may go beyond the boundaries of the screen, the developers added the ability to scroll.

Menu items designed to work with the settings have been moved to the title bar of the editor.

In the snippet, new comment variables are implemented, allowing to leave lines or blocks of notes based on the language of the code.

Also, the developers added the Go to Declaration and Peek Declaration commands to Visual Studio Code 1.30 in addition to the existing Go to Definition and Peek Definition. This is due to the fact that in some languages ​​the concepts of definition and declaration are fundamentally different.

In Visual Studio Code 1.30, you can work with TypeScript 3.2.2. Display of callbacks in JavaScript and TypeScript is improved. The new version of the editor displays which function they belong to.

The developers have improved the integration with the repository. In the new version of the program, you can change the tool that opens the file by clicking on the version control panel.

The Visual Studio Code 1.30 error detection and removal tool allows you to delete debug consoles for inactive sessions. Improved concept of variable substitution in launch.json configuration. The initial debug configuration itself has been simplified by hiding minor elements and adding a Quick Pick interface.

You can set the task to run automatically when you open the project folder. In addition, several new tasks have been added to the task management command section, for example, Tasks: Rerun Last Task, which allows you to restart the previous process.

УСТАНОВКА TYPESCRIPT В VISUAL STUDIO CODE

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

Настройка среды

Есть несколько способов как работать с TypeScript. Сам TS (сокращенно от TypeScript) это препроцессор поэтому мы должны поставить какую-нибудь среду для работы с ним.

  1. Самый простой способ «поиграться с typescript» — это перейти на сайтwww.typescriptlang.org/play/

2. Способ второй можно скачать абсолютно беспутную и мощную IDE ( intelligent development environment ) от Microsoft по ссылке https :// www . visualstudio . com / ru / название IDE — Visual Studio Community 2020 при этом TS плагин уже встроен в неё. Если вы уже пользуетесь например VS 2015 и плагина для работы с TS еще нет, то скачать его можно по ссылке под видеоhttps://www.microsoft.com/ru-ru/download/details.aspx? >google -а «typescript for visual studio»

3. Способ третий можно использовать любой редактор кода. Обычно редакторы проще IDE и весят меньше, да и почти не нагружают вашу систему, поэтому редакторы иногда использовать удобнее. Я рекомендую использовать еще один мощный и бесплатный продукт опять же от Microsoft, который называется visual studio code. Данный редактор кроссплатформенный и доступен как для мак так и для линукс. Хорошо, что Бил Гейтс ушел на пенсию, друзья. Это побудило MS изменить политику в опенсорсную сторону. Ссылка для скачивания:https://code.visualstudio.com/ также найдете под видео. Установите visual studio code как обычно.

После установки откройте редактор visual studio code и перейдите во вкладку File-> open folder. В открывшемся диалоговом окне выберите расположение будущей папки и создайте её. Например, с именем “Test”, после чего нажмите ок.

В обозревателе решения наведите на папку Test и нажмите на иконку добавить файл.

Добавьте два файла index . html и App . ts ( app это сокращение от слова application )

Давайте сделаем красивую тему для файлов. (Внимание — это пункт вы можете пропустить.)


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

Для этого нажмите сочетание клавиш shift + ctrl + p и напечатайте “ icon ”

Обратите внимание из списка настроек мы видим надпись « Preferences : File Icon Theme »

Выберите этот пункт и нажмите “ enter ”. Появится еще один список где вы можете видеть доступные темы для файлов. Я люблю тему “ Seti ( Visual Studio Code )” – минимально и симпатично. Выберите её и нажмите “ enter ”.

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

Другой способ установить тему, более консервативный. Нажмите на File-> References -> settings

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

давайте обсудим visual studio code и TypeScript [закрыт]

  1. среда разработки [VSCode]
  2. TypeScrip
  3. конфиги [tsconfig.json] [jsconfig.json]

1. среда разработки [VSCode]

upd: @AK, был создан отдельный вопрос для этого обсуждения
Объединить метки Visual Studio Code

предлагаю:
[VSCode] = visual-studio-code
vscode — перекинуть и удалить (upd:не знал, что метки только в нижнем регистре)
[VSCode] — основная метка

обоснование:
считаю термин VSCode устоявшимся, в том числе в русскоязычном сообществе
https://www.google.ru/search?q=VSCode&lr=lang_ru

2. TypeScript

предлагаю:
[ts][d.ts] слинковать с typescript

обоснование:
у js есть линк с javascript

ts = js но с типами
d.ts — это только типы, могут использоваться совместно с чистым js НО при этом они остаются частью TypeScript

Мастер Йода рекомендует:  HTML5-видеоплееры, о которых вы должны знать

3. конфиги [tsconfig.json] [jsconfig.json]

сомнительно, но подумать стоит:
добавить [tsconfig.json] [jsconfig.json] и связать с чем?

по хорошему, tsconfig.json относится к TS, тут всё понятно
а вот с jsconfig.json непонятки используется компилятором tsc(TS) и редактором VSCode

отойдя от темы, (: c ?эстонским акцентом) как это будет по русски «types» ?

Visual Studio Code 1.30: добавили поддержку TypeScript 3.2.2 и многострочный поиск

Microsoft выпустила среду разработки Visual Studio Code 1.30. Инструмент получил новые функции редактора и поискового инструмента, а также улучшенную поддержку языков JavaScript и TypeScript.

Поиск и кастомизация в Visual Studio Code 1.30


Поисковый инструмент в новой версии редактора позволяет делать многострочные запросы. Добавить в запрос новую строку можно сочетанием клавиш Shift+Enter или просто вставив текст из буфера обмена.

Пользовательские заголовки и пункты меню в ОС Linux теперь активированы по умолчанию. Поскольку некоторые меню при этом могут выходить за границы экрана, разработчики добавили возможность прокрутки.

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

Изменения в модуле редактора

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

Также разработчики добавили в Visual Studio Code 1.30 команды Go to Declaration и Peek Declaration помимо уже существующих Go to Definition и Peek Definition. Это сделано в связи с тем, что в некоторых языках понятия определения и объявления принципиально различаются.

Поддержка языков

В Visual Studio Code 1.30 можно работать с TypeScript 3.2.2. Улучшено отображение обратных вызовов в JavaScript и TypeScript. Новая версия редактора отображает, какой функции они принадлежат.

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

Отладка

Инструмент поиска и устранения ошибок Visual Studio Code 1.30 позволяет удалять отладочные консоли неактивных сессий. Доработана концепция подстановки переменных при конфигурации launch.json. Саму стартовую конфигурацию отладки упростили, скрыв второстепенные элементы и добавив интерфейс Quick Pick.

Можно установить автоматическое выполнение задачи при открытии папки проекта. Кроме того, в раздел команд управления задачами добавлено несколько новых, например Tasks: Rerun Last Task, позволяющая перезапустить предыдущий процесс.

Visual Studio Code — кроссплатформенный инструмент с открытым исходным кодом, однако готовые сборки распространяются под проприетарной лицензией. ПО разрабатывается под операционные системы Windows, Linux и macOS.

Microsoft ежемесячно выпускает обновления для этой среды разработки, добавляя новые функции и улучшая старые. Например, в августовском релизе 1.27 редактор получил новый интерфейс редактора настроек. Тогда же разработчики опробовали настраиваемые панели меню и заголовков для Windows и Linux. Текущий апдейт датирован ноябрём 2020 года.

Конфигурация абсолютного пути кода Angular2, TypeScript и Visual Studio

4 Tomas [2020-10-13 10:07:00]

Как я уже объяснил мне в этом вопросе (спасибо вам, кстати), я могу использовать файл конфигурации TS, чтобы предоставить baseUrl и paths чтобы иметь возможность уменьшить бессмысленные пути, такие как ../../../../someModule в пути более короткие, псевдонимы, такие как @AliasPath/someModule . Итак, я изменил свой tsconfig.app.json (обратите внимание, что я изменил конфигурационный файл.app.json, а не основной файл tsconfig.json в корневой папке) со следующей строкой:

В коде я пытаюсь импортировать одну услугу:
import < CommunicationService >from «@services/communication.service»;

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

И сообщать о недостающих файлах на вкладке проблем:

Вопрос в том, как я могу проинструктировать TypeScript (потому что я предполагаю, что это проблема с TypeScript) о моих псевдонимах путей?

2 ответа

Начиная с TypeScript 3.1, конфигурация paths должна находиться в файле tsconfig.json . Он не будет выбран vscode, если он находится в tsconfig.app.json (но tsc -p tsconfig.app.json , очевидно, будет работать).

Чтобы убедиться, что файл TS является частью правильного tsconfig , запустите команду TypeScript: Go to project configuration команде TypeScript: Go to project configuration в VS Code. Это должно открыть tsconfig с установленными paths

1 LUXS [2020-10-07 20:34:00]


Это, кажется, проблема с VS Code, как вы можете видеть на следующей ссылке, например (это один из многих): VSCode игнорирует пути в tsconfig.app.json

Но я нашел обходной путь для меня, так как у меня была такая же проблема. Я только что установил ExtScript TypeScript Importer. Это решило это для меня.

Visual Studio Code 1.25 с TypeScript 3.0 стал очень медленным

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

> Executing task: tsc —watch -p y:\dev\iis\Apps\fserve\server\tsconfig.json

, а затем ничего не происходит . пять или более минут. И все еще жду, пока Intellisense полностью ударит.

Могу ли я сделать что-то неправильно?

1 ответ

Я разместил ответ здесь, введите описание ссылки здесь

Чтобы сохранить следующую ссылку:

Решено! Это приложение для видеосервера, и у меня был подкаталог с ссылками (ссылками) на большие библиотеки. Очевидно, машинописный поиск ищет во всех деревьях до его запуска.

Исправление не обязательно как таковое, но, возможно, машинопись может сказать, чем он занят, а именно — искать в дереве файлов.

ANFE’s blog

В продолжение этого поста создадим и запустим простейшую программу на TypeScript.

1. Создаем новую или открываем рабочую директорию в VS Code.

2. Создаем простейший TS-файл greeter.ts

3. Пробуем откомпилить его командой Ctrl+Shift+B
И получаем сообщение в VS Code: «No task runner configured».

4. Нажимаем на выпавшую кнопку «Configure Task Runner».
В созданном автоматически файле tasks.json изменяем строчку:

5. Создаем файл с настройками для TS-компилятора — tsconfig.json

6. После старта компиляции (Ctrl+Shift+B) рядом с исходным файлом greeter.ts должен появиться откомпилированный файл greeter.js

7. Вставляем скрипт в приготовленный index.html:

8. Устанавливаем http-сервер

9. Открываем терминал в рабочей директории и стартуем http-сервер командой

10. Открываем в браузере адрес локального http-сервера:

Теперь все готово для экспериментов с TypeScript кодом.

Добавить комментарий