Vs code импорт html

How do I import a file into VS code?

This was my last resort after trying and failing with these methods:

1. Update VS Code (v. 1.45.
2. Install types for your package, e.g. npm install –save @types/react-bootstrap.
3. Add jsconfig. json file and play with the settings as other people suggested.
4. Try out all the plugins for automatic imports.

How do I export VS code?

How do I export Visual Studio code as EXE?

Open the “bin” folder. Inside the bin folder you will find a folder called “Debug” or a folder called “Release” depending on the build configuration you chose. Inside the “Debug” (or “Release”) folder you will find all the resources required to run your application (usually a .exe file, a .

How do I add PDF code to Visual Studio?

1. One way would be to launch a process from your app that will open the default registered viewer of PDF files (such as Adobe Reader) on your PC and pass the full path to the PDF file as a parameter:
2. Another way would be to create a Windows form in your app and add web browser control to it.

How do I create a Visual Studio PDF code?

So just go File->Print, then choose Microsoft Print to PDF as the printer, then choose where to save your printout.

Can you print from Visual Studio code?

Visual Studio Code Printing. The print icon on the toolbar prints the document in the active editor. Or you can right-click on a file in the file explorer pane and choose Print from the context menu.

Источник

VS Code: вам не нужно это расширение

Перевод статьи «VS Code: You don’t need that extension».

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

1. Автоматическое переименование тегов и закрывающие теги

1. Переименование HTML-тегов сразу парами. То есть, вы редактируете открывающий, а закрывающий меняется автоматически.
2. Вставка закрывающего тега при добавлении нового (следующего) открывающего.

Расширения

• Auto Rename Tag (3,3 млн. загрузок): «Автоматически переименовывает парный HTML/XML-тег, так же, как делает Visual Studio IDE».
• Auto Close Tag (3,1 млн. загрузок): «Автоматически добавляет закрывающий HTML/XML-tag, так же, как делает Visual Studio IDE или Sublime Text.»

Настройка

Название этого параметра несколько расплывчатое и неясное, поэтому многие люди так никогда его и не находят! В настоящее время поддерживаются HTML-файлы и есть открытый issue по добавлению поддержки JSX.

Editor: Rename on Type : «Контролирует автоматическое переименование по мере ввода». Значение по умолчанию — false .

settings.json:

2. Синхронизация настроек

VS Code теперь поддерживает синхронизацию настроек на разных машинах. Эту фичу можно посмотреть в превью на VS Code Insiders. Очень скоро она попадет в стандартную версию.

Я сейчас испытываю этот функционал и пока вроде все хорошо.

Расширения

Settings Sync (1,8 млн. загрузок): синхронизирует ваши настройки, сочетания клавиш, сниппеты, расширения и файлы запуска с GitHub Gist.

Функционал VS Code и его настройка

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

Вы можете использовать аккаунт Microsoft или GitHub и выбрать, что именно хотите синхронизировать.

3. Автоимпорт модулей

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

Расширения

• Auto import (1,1 млн. загрузок): «Автоматически находит, парсит и дополняет названия методов и событий для всех доступных импортов. Работает с Typescript и TSX».
• Move TS — Move TypeScript files and update relative imports (308 тысяч загрузок): «Поддерживает перемещение TypeScript-файлов и обновление связанных импортов в рамках рабочего пространства».
• Auto Import — ES6, TS, JSX, TSX (157 тысяч загрузок).

Настройки

JavaScript > Suggest: Auto Imports : «Включает/отключает предложения автоимпорта. Необходимо использование в рабочем пространстве Typescript 2.6.1 или новее». Значение по умолчанию: true.

TypeScript > Suggest: Auto Imports : все то же самое, что и для JavaScript.

JavaScript > Update Imports on File Move: Enabled : «Включает/отключает автоматическое обновление путей импорта, когда вы переименовываете или перемещаете файл в VS Code. Необходимо использование в рабочем пространстве Typescript 2.9 или новее». Значение по умолчанию: prompt.

TypeScript > Update Imports on File Move: Enabled : все то же самое, что и для JavaScript.

settings.json

"javascript.suggest.autoImports": true, "typescript.suggest.autoImports": true, "javascript.updateImportsOnFileMove.enabled": "always", "typescript.updateImportsOnFileMove.enabled": "always",

Кроме того, если вы хотите, чтобы ваши импорты упорядочивались при сохранении, вы можете добавить настройку, приведенную ниже. Это удалит неиспользуемые предложения импорта и поместит предложения импорта с абсолютными путями сверху. Я большой поклонник таких задач «настрой и забудь».

4. Сниппеты HTML и CSS

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

Расширения

• HTML Snippets (3,8 млн. загрузок): поддержка автодополнения HTML-тегов, включая сниппеты HTML5.
• HTML Boilerplate (684 тысяч загрузок): «Генератор базовых бойлерплейт-сниппетов HTML5».
• CSS Snippets (22 тысячи загрузок): расширение предоставляет готовые сокращения для CSS-сниппетов.

Функционал VS Code

В VS Code встроен Emmet. Он предлагает сокращение и раскрытие сниппетов для HTML и CSS. По умолчанию Emmet включен для файлов html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, less and stylus. Подробнее можно почитать в руководстве пользователя VS Code.

Чтобы создать бойлерплейт для HTML, вы набираете ! и нажимаете Tab.

Вам доступны сокращения, использующие CSS-селекторы, например:

Также доступны раскрытия — это когда вы, к примеру, набираете « a », нажимаете Tab и поучаете , причем курсор сразу оказывается между кавычками.

Это лишь беглый обзор того, что касается HTML. Но аналогичные возможности есть и для CSS. Например, мне очень нравится автоматическое добавление vendor-префиксов. Подробнее читайте в документации Emmet, а на будущее — вот вам шпаргалка.

Сниппеты можно кастомизировать, а также создавать свои. Делается это путем добавления их в json-файл snippets.json.

При желании можно включить Emmet для большего числа языков, например, для Vue. Для этого нужно добавить строку в settings.json :

Я большой поклонник Emmet. Когда привыкаешь к использованию сниппетов, писать и редактировать HTML и CSS получается просто молниеносно быстро.

5. Фейковый текст (рыба)

Часто возникает необходимость вставить какой-нибудь бессодержательный текст, чтобы заполнить веб-страницу и увидеть, как выглядит UI. Наверняка вам знакомы генераторы «lorem ipsum».

Расширение

Функционал VS Code

Как мы уже говорили, в VS Code встроен Emmet, а у него есть сокращение lorem. Наберите « lorem», нажмите Tab, и получите параграф на 30 слов.

Вы можете использовать этот функционал для генерации самых разных блоков. Например, сокращение «p*2>lorem» сгенерирует примерно такое:

 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
 
Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!
 

6. Автообрезка

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

Расширения

Trailing Spaces (447 тысячи загрузок): «Подсвечивайте повторяющиеся пробелы и моментально удаляйте их!»

Autotrim (15 тысяч загрузок): «После редактирования строк кода (например, удаления слов) часто остаются повторяющиеся пробелы. Это расширение отслеживает, на каких строках находится курсор, и удаляет повторяющиеся пробелы в тех строках, где курсора нет».

Настройки VS Code

Files : Trim Trailing Whitespace : «При включении обрезает повторяющиеся пробелы при сохранении файла». Значение по умолчанию — false .

settings.json

"files.trimTrailingWhitespace": true

А вы знаете какие-нибудь настройки VS Code, позволяющие обходиться без популярных расширений? Поделитесь в комментариях!

Источник