Каталог расширений

Популярные теги

3gp       avi       fb2       jpg       mp3       pdf      

Как открыть файл в редакторе кода


Как открыть текстовый редактор: Блокнот, Word, способы | IT S.W.A.T.

Доброго дня и солнечного настроения всем, заглянувшим на огонёк. Сегодня расскажу, как открыть текстовый редактор. Кому-то это может показаться слишком банальным. Но, судя по популярности данного запроса в поисковиках, довольно много пользователей испытывают трудности с решением поставленной задачи. Не буду злорадствовать, а просто протяну им руку помощи, описав самые доступные методы запуска текстовых редакторов «Блокнот» и Word.

Блокнот

Начнём, пожалуй, с «Блокнота» (Notepad) – самого простого текстового редактора, входящего в стандартный набор программного обеспечения любой версии Windows. Открыть текстовый редактор «Блокнот» можно несколькими способами.

№1

Первый способ изначально предусмотрен разработчиками операционной системы. Я имею в виду зелёную кнопку «Пуск», которую можно обнаружить в левом нижнем углу экрана. После нажатия на неё раскроется меню со списком наиболее часто используемых пользователем программ и служебными ярлыками («Мой компьютер», «Панель управления» …).

В нижней части списка имеется отдельно стоящий пункт «Все программы», нажатие на него раскроет перечень установленных на ПК программ.

Среди этого множества имеется неприметный пункт «Стандартные», после раскрытия содержимого в его недрах отыщется и «Блокнот». Для запуска найденного редактора осталось только щёлкнуть по нему мышью.

№2

Обладатели самой последней на данный момент десятой версии Windows среди служебных элементов меню «Пуск» могли заметить пустую строку. Она являет собой удобную функцию «Поиск».

В более ранних редакциях ОС строки нет, но есть команда «Поиск», дополненная изображением лупы.

Просто вводим туда слово «блокнот» или в английском варианте notepad (одно и тоже), ждём и видим в результатах поиска нужное нам приложение. Его запуск легко осуществить двумя быстрыми щелчками левой кнопки мыши.

Методом №2, как правило, редко пользуются, но данное знание не будет лишним – так искать на компьютере можно всё что угодно.

№3

Третий вариант, по-моему, самый удобный. Я пользуюсь именно им. Смысл не в открытии имеющегося на компьютере изначального файла с расширением txt и именем «Блокнот», а в создании ещё одного такого документа. На свободном месте любого пространства (рабочий стол или внутренности какой-нибудь папки) нужно единожды щёлкнуть левой клавишей мыши. Результатом этих действий станет появление небольшого меню. В нижней его части присутствует команда «Создать».

Подсвечиваем её посредством наведения курсора и среди списка предложенных для создания документов выбираем «Текстовый».

Появится файл с активным именным полем – это значит, что требуется задать ему имя. Называем и нажимаем на клавишу Enter (Ввод). Открыть полученный текстовый файлик можно также двумя щелчками.

№4

Друзья, есть ещё один способ, как мне думается, используется он крайне редко и в основном сисадминами, но расскажу и о нём — открыть текстовый редактор «Блокнот» можно через командную строку. В «Пуске» находим команду «Выполнить» либо одновременно жмём на две клавиши – Win (нарисовано плывущее окошко) и английскую R (текущая настройка языка не играет роли, метод сработает в любом случае, даже если выбран русский).

В открывшемся окошке пишем notepad (важно написать именно английское название) и жмём OK. Готово, цель достигнута – «Блокнот» открыт.

В Windows имеется ещё один текстовый редактор, являющийся внутрисистемным средством. Запускается он тоже через командную строку посредством написания в ней команды edit, идентичной его названию. Эту информацию я привёл просто для справки.

Word

Открыть текстовый редактор Word можно теми же самыми методами, что описывались выше для «Блокнота» с некоторыми правками. Коротко о том же:

  1. Первый — в меню «Пуск» среди всех программ ищем не «Стандартные», а Microsoft Office, а в числе предложенных компонентов выбираем Word.
  2. Второй — в поисковую строку требуется вписать не «Блокнот», а Word, потом найти нужную программу в результатах (обычно самая верхняя) и открыть двойным щелчком.
  3. Используя третий метод, проделываем всё то же самое, но среди перечисленных для создания вариантов выбираем документ Word.
  4. В четвёртом способе вписываем в окошко «Выполнить» команду winword.exe (можно вводить коротко одним словом без точки и расширения на конце) вместо notepad.

Файл

Друзья, тему я раскрыл, но отдельно хочу ещё отметить то, как открыть любым текстовым редактором готовый файл. Это довольно просто – делаем на заданном документе один правый щелчок мышки и выбираем команду «Открыть с помощью».

Остаётся только в списке выбрать необходимый вариант (если нужного нет, то нажать на пункт «Выбрать программу» и поискать там) и задача будет решена.

На этом моё повествование подошло к концу. Вы же можете дополнить его своими, не рассмотренными мною, методами, описав их в комментариях. До свидания.

Как написать и запустить HTML на компьютере? — Блог HTML Academy

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

Шаг 1. Качаем текстовый редактор

Для того, чтобы написать код, сгодится вообще любой текстовый редактор. Подойдёт даже «Блокнот» на вашем компьютере (но в нём очень неудобно всё делать). Мы скачаем и установим хороший редактор, заточенный под веб-разработку. Покажем всё на примере Visual Studio Code.

Зайдите на https://code.visualstudio.com/ и скачайте редактор. Если у вас Windows, то нажмите на любую из синих кнопок. Если OS X или Linux — нажмите Other platforms.

Страницы загрузки Visual Studio Code

Установка пройдёт как обычно — нужно запустить файл VSCodeUserSetup, много раз нажать «Далее» и поставить пару галочек.

Шаг 2. Запускаем редактор и осматриваемся

Свежеустановленный VS Code встречает нас экраном с большим количеством ссылок. С ними можно познакомиться позже, а сейчас нужно настроить всё для работы.

Хорошо бы, чтобы во время работы все нужные файлы лежали в одной папке (пока проект маленький, так можно делать). Для этого добавим рабочую папку, чтобы VS Code показывал нам только её содержимое.

Добавление папки в Visual Studio Code

По шагам на скриншоте:

  1. Add workspace folder — открывает меню выбора папки.
  2. Создадим новую папку personal_page в любом удобном месте и зайдём в неё.
  3. Нажмём Add.

После этого слева появится панель Explorer с пустым рабочим пространством Untitled (Workspace). Мы создали папку, давайте её наполним.

Шаг 3. Добавляем файлы

После создания папка пустая. Щёлкнем правой кнопкой по заголовку personal_page и добавим три файла, которые понадобятся в работе — index.html, style.css и script.js. Для начала этого хватит.

Создание файлов в Visual Studio Code

Шаг 4. Делаем работу удобнее

Сейчас все три файла открыты во вкладках, и между ними не всегда удобно переключаться. Чтобы было удобнее, код со стилями можно перенести в другую часть окна, например, вниз. Для этого нажмите правой кнопкой по вкладке со style.css и выберите split down,чтобы увидеть результат.

Разделение экрана в Visual Studio Code

Шаг 5. Добавляем код

Пока отредактируем только index.html (файл с разметкой) и style.css (файл со стилями), а script.js оставим на будущее. Если у вас уже есть какой-нибудь код, напишите его, или используйте готовый — мы, например, возьмём код из интерактивных курсов.

index.html

<!DOCTYPE html>
 <html lang="ru">
 <head>
 <title>Сайт начинающего верстальщика</title>
 <link rel="stylesheet" href="style.css">
 </head>
 <body>
 <header>
 <nav>
 На главную
 </nav>
 </header>
 <main>
 <article>
 День первый. Как я забыл покормить кота
 
 Кто бы мог подумать, что семантика это так важно, мне срочно нужно было об этом поговорить.
 
 Взгляд упал на кота. Кот издал настойчивое «Мяу». И я понял — пришло время для первой записи в блог. И покормить кота.
 </article>
 <aside>
 Здесь могла быть ваша реклама.
 </aside>
 </main>
 <footer>
 Подвал сайта
 </footer>
 </body>
 </html>

style.css

Скопируем код со стилями из файла https://htmlacademy.ru/assets/courses/299/outlines.css — откройте его в браузере, скопируйте все строки и вставьте в файл style.css в редакторе.

Шаг 6. Запускаем код и смотрим на результат

Самый простой способ — открыть папку с файлами через проводник и запустить файл index.html. Вы увидите результат вёрстки в браузере, но это не слишком удобно — при любых изменениях придётся переходить в браузер и обновлять страницу.

Давайте настроим всё так, чтобы наша страничка открывалась сама и обновлялась, если вы что-то изменили в разметке или стилях.

Для этого нам понадобится расширение Live Server. Найти его можно прямо в VS Code (пятая иконка в меню слева) — введите название и нажмите Install. Другой способ — скачать Live Server из магазина расширений, но это менее удобно.

Расширение Live Server в Visual Studio Code

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

Оповещение безопасности Windows

Чтобы запустить код, нажмите кнопку Go Live на нижней панели.

Кнопка Go Live в Visual Studio Code

Результат выглядит так. Слева — редактор, справа — браузер. Теперь измените код в редакторе и сохраните его, а он автоматически изменится и в окне браузера.

Рабочее пространство: слева — Visual Studio Code, справа — браузер

Что мы сделали

  1. Установили и настроили редактор кода.
  2. Создали рабочую папку и добавили туда файлы нашего проекта.
  3. Научились редактировать и сохранять файлы с кодом.
  4. Установили расширение, чтобы сразу видеть результат вёрстки.

В следующих частях — о добавлении и проверке кода на JavaScript, и о том, как сделать работу с кодом ещё удобнее. Подпишитесь на нашу рассылку, чтобы не пропустить следующие выпуски.

Не знаете, какой код написать?

Знакомство с HTML и CSS на интерактивных курсах — бесплатно.

Регистрация

Нажатие на кнопку — согласие на обработку персональных данных

Внеклассное чтение:

Как открыть HTML файл на компьютере

Каждый вебмастер знает, что такое HTML: это – язык гипертекстовой разметки, с помощью которой создается разметка сайта, его структура, каркас, основа. Большинство web страниц в интернете имеют расширение HTML.

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

Содержание
  1. Как открыть HTML файл на компьютере
  2. Программы для чтения и редактирования HTML документов на ПК

Как на компьютере открыть HTML файл (документ)

Есть несколько вариантов того, как открыть HTML файл (документ) на компьютере.

Если внимательно посмотреть на картинку файла, то можно увидеть, что это изображение вашего браузера, используемого по умолчанию. В данном случае – это Opera. Если браузер по умолчанию Google Chrome, то, соответственно, будет виден значок Хрома. И т.д.

Как открыть HTML файл на компьютере

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

Но вы и так это пробовали и знаете, а значит перейдем ко второму варианту.

Второй же вариант предполагает открытие исходного кода HTML файла. Для этого следует:

  1. Кликнуть правой кнопкой мыши на файл, вызвав тем самым контекстное меню;
  2. Выбрать пункт «Открыть с помощью»;
  3. В выдвинувшемся меню выбрать «Выбрать другое приложение».

    Открытие документа с расширением HTML

  4. На открывшейся странице можно увидеть часть приложений (программ), с помощью которых можно открыть HTML файл на компьютере. И это все – браузеры. Чтобы читать и изменять код они не годятся. Поэтому необходимо прокрутить модальное окно немного вниз и нажать пункт «Еще приложения» (Стоит отметить, что инструкция написана для Windows 10, в других версиях операционной системы действия все те же самые, но пункты меню могут немного различаться).

    Открыть программу другим приложением в Windows 10

  5. И вот тут уже появляется полный список предустановленных в Windows программ, с помощью которых можно открыть HTML файл на компьютере.

    Просмотр, чтение, изменение HTML файлов

    В этом списке есть 2 программы, которые откроют не графическое отображение файла, как в браузере, а именно код. Эти программы: WordPad и Блокнот.
    Да-да, тот самый что ни есть стандартный «Блокнот» легко способен открыть документ с расширением HTML и посмотреть, прописанный в нем код.
    И WordPad и Блокнот являются текстовыми редакторами, а значит полностью справляются с поставленной задачей, но есть программы специализированные. Об одной из них пойдет речь ниже.
    Word и Excel для этой задачи не подходят, несмотря на то, что это текстовые редакторы, они откроют файл в графическом виде.

Лучшая программа для открытия HTML файлов | чтения HTML документов


Мы уже разобрались, что открыть HTML файл на компьютере можно с помощью Блокнота и WordPad. Это не самый лучший вариант для чтения и просмотра HTML-документов. Каждый вебмастер знает, что специализированные программы лучше подходят для подобной работы, они дают куда больше возможностей, за счет расширенного функционала.

Одной из самых лучших программ для открытия, редактирования, создания HTML файлов является текстовый редактор Notepad++.

Скачать программу для открытия HTML файлов Notepad++

Главные достоинства Notepad++:

  1. Это бесплатный текстовый редактор с открытым исходным кодом. Ну как тут не устоять перед халявой…
  2. Подсветка синтаксиса. HTML, CSS, PHP, JS в нем визуально выделены, что значительно упрощает просмотр и редактирование кода, текста.
  3. Автодополнение, автоматическое закрытие скобок и тегов.
  4. Возможность работы сразу с несколькими документами за счет удобных вкладок.
  5. Функция поиска – это вообще нечто. Можно найти искомый фрагмент не только внутри одного документа, но и выполнить поиск сразу во многих файлах, в рамках указанной папки.

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

Программы для открытия HTML документов

Конечно же, кроме Notepad++ есть и другие программы, с помощью которых можно открыть HTML файлы, выполнить просмотр кода и редактирование.

Некоторые из них платные, некоторые – бесплатные.

Список:

  1. Sublime Text
  2. Aptana Studio
  3. Adobe Dreamweaver
  4. RJ TextEd
  5. Komodo Edit

Как открыть HTML на телефоне Android

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

Для Android:

Уверен, для Айфонов с IOS так же есть подобные приложения. Для их поиска достаточно вбить в магазине приложений: «HTML редактор» или «HTML Editor». Ссылки не выкладываю, так как я счастливый обладатель смартфона на Android.

Не нашли ответ? Тогда воспользуйтесь формой поиска:

6 редакторов для работы с JavaScript

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

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

Скрытие блоков в Visual Studio Code

Желательно, чтобы подсвечивались ошибки — тогда вы сможете их сразу заметить и исправить:

Отображение ошибок в Visual Studio Code

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

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

Как работать с сайтом на своём компьютере

Как открыть сайт в браузере и в редакторе кода

Чтобы просмотреть сайт, нужно открыть файл index.html в любом браузере, который есть в вашей операционной системе.

Открываем сайт в браузере

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

Сайт-визитка в Chrome

Чтобы не только посмотреть, но и что-нибудь поменять на сайте, понадобится редактор кода. С распространёнными редакторами вы можете познакомиться в «Обзоре редакторов кода» в блоге Академии.

Откройте сайт-визитку в редакторе кода. Вот так он выглядит в Visual Studio Code:

index.html в редакторе Visual Studio Code

В файле index.html хранится разметка сайта, а в файле style.css - стили. В папке img лежат картинки, которые используется на сайте.

Обратите внимание, как в index.html подключается стилевой файл. Файлы index.html и style.css находятся в одной папке, поэтому достаточно указать название файла:

<link rel="stylesheet" href="style.css">

А вот картинки лежат в папке img. Пути к ним в разметке пишутся относительно index.html, поэтому в адресе картинки мы указываем название папки и название файла-картинки:

<img src="img/unknown-raccoon.svg" alt="Неопознанный енот">

То же в файле со стилями. Пути к картинкам в нём указаны относительно style.css:

Путь к картинке относительно style.css

Visual Studio Code – редактор кода для Linux, OS X и Windows / Блог компании Microsoft / Хабр

За свою долгую историю существования Microsoft выпустил немало инструментов разработки. Но так уж сложилось что на слуху у всех только лишь Visual Studio – большая и мощная IDE «комбайн» предназначенная для всего и вся. Развивается этот продукт уже более двух десятков лет и вобрал в себя самые разные функции. Многим этот инструментарий нравится и иногда даже задавали вопрос – будет ли перенесен Visual Studio на другие платформы. На что чаще всего получали ответ нет. Наверное, понятно почему, в целом такое портирование будет дорогим и неоправданно сложным, уж очень много всего в этой IDE завязано на Windows.

И вот, этой весной для многих неожиданностью было то что Microsoft представил новый продукт под названием Visual Studio Code, да еще и работающий сразу на трех платформах, Linux, OS X и Windows. Не замахиваясь на все функции полноценной IDE, внутри Microsoft решили переосмыслить подход, по которому строится основной инструментарий программиста и начали с самого главного – редактора кода. Visual Studio Code это именно редактор, но при этом обладающий функциями IDE, полагающийся на расширения.

Уже сейчас вы можете использовать Visual Studio Code для создания веб-проектов ASP.NET 5 или Node.js (в чем-то даже удобнее чем в «взрослой» Visual Studio), использовать различные языки, такие как JavaScript, TypeScript, C#, работать с пакетными менеджерами npm, скаффолдингом yeoman и даже осуществлять отладку. Плюсом ко всему будет отличный «интеллисенс», поддержка сниппетов кода, рефакторинг, навигация, многооконность, поддержка git и многое другое.

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

Mac OS X

  1. Загрузите Visual Studio Code для Mac OS X
  2. Откройте двойным щелчком архив VSCode-osx.zip
  3. Перетащите Visual Studio Code.app в папку Applications
  4. Добавьте Visual Studio Code в Dock выбрав в Options “Keep in Dock”

Совет: если вы хотите чтобы Visual Studio Code стартовал из терминала добавьте в ~/.bash_profile
code () { VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" --args $* ;} 

Linux

  1. Загрузите Visual Studio Code для Linux
  2. Создайте новую папку и распакуйте туда содержимое архива VSCode-linux-x64.zip
  3. Двойным щелчком запустите Code

Совет: если вы хотите чтобы Visual Studio Code стартовал из терминала добавьте на него ссылку
sudo ln -s /path/to/vscode/Code /usr/local/bin/code 

Windows

  1. Загрузите Visual Studio Code для Windows
  2. Щелкните двойным щелчком по загруженному файлу VSCodeSetup.exe для того чтобы запустить установку

Совет: если вы хотите чтобы Visual Studio Code стартовал из терминала сделайте logon/logoff, соответствующие пути к файлу прописываются в переменной PATH самим установщиком
Дополнительные инструменты

Без инструментария Visual Studio Code годится разве что для простого редактирования файлов, для полноценной работы понадобится сопутствующий инструментарий, который зависит от ваших целей и задач:
  • ASP.NET 5 — гибкий фреймворк создания современных веб-приложений
  • NodeJS (включает NPM) – платформа для создания масштабируемых сетевых приложений
  • git – система контроля версий
  • Yeoman – инструмент «скаффолдинга» примерно тоже самое что и File | New Project в VS
  • generator-aspnet — yeoman генератор для ASP.NET 5 приложений, выполните npm install -g generator-aspnet для установки
  • hottowel — yeoman генератор для быстрого создания AngularJS приложений, выполните npm install -g generator-hottowel для установки
  • Express – фреймворк для Node приложений, использует «движок» шаблонов Jade
  • gulp – инструментарий создания «тасков» для выполнения сопутствующих сборке проекта задач
  • mocha – фреймворк создания модульных тестов на JavaScript/Node
  • bower – клиентский пакетный менеджер
  • TypeScript – язык TypeScript, добавляет модульность, классы и прочие приятные вещи в ваш JavaScript код
  • TypeScript definition manager – определения TypeScript для популярных JavaScript библиотек, включают поддержку IntelliSense вVS Code

Начало работы

Чтобы попробовать в деле VS Code, проще всего создать веб-проект Node. Для этого установите Node на свой компьютер (ссылка выше) и выполните следующие команды:
npm install -g express npm install -g express-generator express myExpressApp cd myExpressApp npm install 

В текущем каталоге будет создан проект, который можно будет открыть в Visual Studio Code. Для того чтобы проверить, что все работает как надо, выполните команду npm start и запустите браузер по адресу http://localhost:3000.
После всех этих действий просто запустите VS Code в папке с проектом
Code . 

Если вы хотите попробовать возможности VS Code на примере ASP.NET 5 то можете воспользоваться инструкцией по адресу https://code.visualstudio.com/Docs/ASPnet5.

Базовые возможности Visual Studio Code

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

VS Code работает с файлами и папками в которых находятся проекты. В простейшем случае вы можете открыть файл на редактирование просто выполнив команду ./code index.html. Более интересным случаем является открытие папки. VS Code сам определяет тип проекта в зависимости от содержимого папки. Например, если в папке находятся файлы package.json, project.json, tsconfig.json или файлы .sln и .proj для Visual Studio ASP.NET 5.0 то VS Code включает много новых функций которые обеспечивают IntelliSence, подсказки, навигацию по коду, выполнение команд и многое другое.
Расположение основных элементов

VS Code обладает интуитивно понятной и простой схемой расположения основных элементов. Интерфейс разделен на четыре основных блока, это:
  1. Редактор, основной блок в котором осуществляется изменение содержимого открытого файла
  2. Сайдбар, с помощью которого можно увидеть различные представления файлов проекта
  3. Статусбар, показывающий текущий статус различных операций
  4. Вьюбар, позволяющий переключаться между режимами сайдбара и индицирующий с помощью иконок различную информацию, например количество исходящих git изменений
Каждый раз когда вы запускаете VS Code будет загружено последнее состояние основных элементов.

Редактор VS Code может открыть для редактирования на экране до трех файлов одновременно, располагая их друг за другом справа. Открыть дополнительные редакторы можно различными способами:
Ctrl (Mac: Cmd) и кликнуть на файле в обозревателе
Ctrl+\ для того чтобы разделить активный текущий редактор на два
Open to the Side в контекстном меню файла в обозревателе

Совет: Вы можете переместить сайдбар слева на право с помощью меню View, Move Sidebar а так же включить его видимость с помощью клавиатуры (Ctrl+B).
Палитра команд

Самым главным инструментом взаимодействия с редактором в VS Code является палитра команд. Вызвать ее можно через клавиатуру, нажав на комбинацию Ctrl+Shift+P. Множество команд перечисленных в палитре тоже привязаны к клавишам.

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

Некоторые часто используемые команды:

  • Ctrl+P навигация к файлу или символу по набранной строке
  • Ctrl+Tab циклично открывает последние отредактированные файлы
  • Ctrl+Shift+P выводит список команд редактора
  • Ctrl+Shift+O навигация к некоторому символу в файле
  • Ctrl+G навигация к строке в файле
  • Ctrl+Tab выводит список всех файлов которые были открыты от момента запуска VS Code, удерживайте Ctrl и нажимайте Tab до тех пор пока не выберите нужный файл
  • Alt+Left и Alt+Right навигация по ранее редактированным файлам и строкам назад и вперед

Обозреватель

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

Файлы, которые вы редактировали или открывали двойным щелчком в обозревателе, помещаются в верхнюю часть обозревателя и получают статус Working files:

Автосохранение

По умолчанию, VS Code работает в режиме явного сохранения, которое вы можете выполнить, нажав на комбинацию Ctrl+S. Этот режим совместим с большинством инструментов следящих за статусом файлов (например bower). Можно включить и режим автоматического сохранения (Auto Save), нажав Ctrl+Shift+P и набрать auto.
Поиск

Нажимите Ctrl+Shift+F и введите интересующую вас фразу. Результаты поиска будут сгруппированы, в дополнение вы можете развернуть узел группы чтобы посмотреть множественные вхождения. В строке поиска поддерживаются регулярные выражения.

Более детальный поиск может быть осуществлен с помощью команды Ctrl+Shift+J. Введите в дополнительные поля критерии поиска.

Возможности редактора

Подсказки IntelliSence

Где бы вы не находились в вашем коде, нажав на Ctrl+Space будет выведено окно подсказки IntelliSence. При наборе кода редактор будет показывать его автоматически.
Подсказки параметров

Для перегруженных функций вы можете листать варианты реализации используя клавиши Up и Down.
Сниппеты кода

VS Code поддерживает аббревиатуры Emmet. Вы можете использовать их при редактировании файлов HTML, Razor, CSS, Less, Sass, XML или Jade. Основной перечень аббревиатур можно посмотреть по адресу http://docs.emmet.io/cheat-sheet/.

Переход к определению символа

Нажав на F12 вы перейдете к определению символа. Если нажать Ctrl и провести курсором по символу вы увидите определение в дополнительном окне.
Переход к методу или переменной

Нажав на Ctrl+Shift+O вы откроете перечень методов в файле, в дополнение вы можете нажать двоеточие: и методы будут сгруппированы по типу. Нажав на Up и Down выберите нужный метод и курсор в редакторе перейдет на строку где находится выбранный метод.

Для языков C# и TypeScript вы можете использовать комбинацию Ctrl+T и набрать нужный метод или переменную, при этом будет осуществлен поиск по всем файлам в проекте.

Просмотр определения символа

Если вам необходимо быстро посмотреть на определение символа или на референсы, для того чтобы вспомнить детали реализации или использования, можно использовать поиск или переход к определению символов, что не всегда удобно так как переключает контекст.
В этом случае можно воспользоваться командами Reference Search (Shift+F12) или Peek Definition (Alt+F12) и результаты поиска будут отображаться в инлайн окошке:
Переименование методов и переменных

Нажав F2 вы можете изменить имя метода или переменной. Стандартная операция рефакторинга, но пока она поддерживается только для языков C# и TypeScript.

Отладка

В VS Code входит отладчик. Его возможности пока ограничены, и работают не на всех платформах. Тем не менее, вы можете использовать отладчик для языков JavaScript и TypeScript на всех платформах, а для C# и F# на платформах OS X и Linux.

Для того чтобы запустить отладку проекта Node, достаточно нажать на иконку бага в Activity Bar. После генерации файла launch.json запустится отладчик. Для проектов Node VS Code автоматически определяет каталог ./bin/www.

Сохраните конфигурационный файл и выберите пункт Launch в меню, установите точку останова и нажмите F5 для старта отладки.

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

Более подробно о возможностях отладчика можно почитать по адресу https://code.visualstudio.com/Docs/debugging в том числе о том как сконфигурировать Mono для отладки C# и F# кода на платформах OS X и Linux.

Контроль версий

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

Совет: установите credential helper для того чтобы не получать постоянные запросы на ввод данных учетной записи https://help.github.com/articles/caching-your-github-password-in-git/
Конфликты

VS Code позволяет осуществлять слияния и разрешение конфликтов при работе с системой контроля версий:
Полезные ссылки

Как вызвать редактор кода VS из терминала / командной строки

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
.

Параметры командной строки Visual Studio Code

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

Если вы ищете, как запускать инструменты командной строки внутри VS Code, см. Интегрированный терминал.

Справка командной строки

Чтобы получить обзор интерфейса командной строки VS Code, откройте терминал или командную строку и введите код --help .Вы увидите версию, пример использования и список параметров командной строки.

Запуск из командной строки

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

Примечание. Пользователи macOS должны сначала запустить команду ( Shell Command: Install 'code' command in PATH ), чтобы добавить исполняемый файл VS Code в переменную среды PATH .Прочтите руководство по установке macOS для получения помощи.

Установки

Windows и Linux должны добавить расположение двоичных файлов VS Code к вашему системному пути. Если это не так, вы можете вручную добавить местоположение в переменную среды Path ( $ PATH в Linux). Например, в Windows VS Code устанавливается в AppData \ Local \ Programs \ Microsoft VS Code \ bin . Чтобы просмотреть инструкции по настройке для конкретной платформы, см. Раздел Настройка.

Insiders: Если вы используете предварительную версию VS Code Insiders, вы запускаете свою сборку Insiders с code-insiders .

Основные варианты интерфейса командной строки

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

Аргумент Описание
-h или -help Использование печати
-v или - версия Версия для печати VS Code (например, 1.22.2), идентификатор фиксации GitHub и архитектура (например, x64).
-n или - новое окно Открывает новый сеанс VS Code вместо восстановления предыдущего сеанса (по умолчанию).
-r или - окно повторного использования Принудительно открывает файл или папку в последнем активном окне.
-g или -goto При использовании с файл: строка [: символ] открывает файл в определенной строке и необязательной позиции символа.Этот аргумент предоставляется, поскольку некоторые операционные системы допускают : в имени файла.
-d или --diff Откройте редактор различий файлов. Требуется два пути к файлам в качестве аргументов.
-w или - ждать Дождитесь закрытия файлов перед возвратом.
--locale Установите язык отображения (локаль) для сеанса VS Code.(например, en-US или zh-TW )

Открытие файлов и папок

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

  код index.html style.css documentation \ readme.md  

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

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

Если вы укажете более одной папки в командной строке, VS Code создаст Multi-root Workspace, включая каждую папку.

Аргумент Описание
файл Имя файла для открытия. Если файл не существует, он будет создан и помечен как отредактированный. Вы можете указать несколько файлов, разделив каждое имя файла пробелом.
файл: строка [: символ] Используется с аргументом -g . Имя файла для открытия в указанной строке и необязательной позиции символа. Таким образом можно указать несколько файлов, но перед использованием спецификатора file: line [: character] необходимо использовать аргумент -g (один раз).
папка Имя папки, которую нужно открыть. Вы можете указать несколько папок, и будет создана новая многокорневая рабочая область.

Работа с расширениями

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

Аргумент Описание
--install-extension Установите расширение. В качестве аргумента укажите полное имя расширения publisher.extension . Используйте аргумент --force , чтобы избежать запросов.
--uninstall-extension Удалите расширение. В качестве аргумента укажите полное имя расширения publisher.extension .
- отключаемые расширения Отключить все установленные расширения. Расширения по-прежнему будут отображаться в разделе Отключено представления Расширения, но они никогда не будут активированы.
- расширение списка Список установленных расширений.
- демонстрационные версии Показать версии установленных расширений при использовании --list-extensions
--enable -hibited-api Включает предлагаемые функции api для расширения. В качестве аргумента укажите полное имя расширения publisher.extension .

Расширенные параметры интерфейса командной строки

Есть несколько опций CLI, которые помогают с воспроизведением ошибок и расширенной настройкой.

Аргумент Описание
--extensions-dir Задайте корневой путь для расширений. Не действует в портативном режиме.
--user-data-dir Задает каталог, в котором хранятся пользовательские данные, полезно при работе с правами root. Не действует в портативном режиме.
-s, --status Распечатать информацию об использовании процесса и диагностику.
-p, --performance Начните с Developer: команда Startup Performance включена.
-disable-gpu Отключить аппаратное ускорение графического процессора.
- вербальный Распечатать подробный вывод (подразумевает --wait ).
- проф-стартап Запустить профилировщик ЦП во время запуска.
- журналы загрузки Загружает журналы из текущего сеанса в защищенную конечную точку.
Многокорневой
- добавить Добавить папку (и) в последнее активное окно для многокорневой рабочей области.

Открытие кода VS с URL-адресами

Вы также можете открывать проекты и файлы, используя механизм обработки URL-адресов платформы.Используйте следующие форматы URL-адресов для:

Открыть проект

  vscode: // file / {полный путь к проекту} / vscode: // файл / c: / myProject /  

Открыть файл

  vscode: // file / {полный путь к файлу} vscode: // файл / c: /myProject/package.json  

Открыть файл в строке и столбце

  vscode: // file / {полный путь к файлу}: строка: столбец vscode: // файл / c: /myProject/package.json: 5: 10  

URL-адрес можно использовать в таких приложениях, как браузеры или обозреватели файлов, которые могут анализировать и перенаправлять URL-адрес.Например, в Windows вы можете передать URL-адрес vscode: // непосредственно в проводник Windows или в командную строку как start vscode: // {полный путь к файлу} .

Примечание : Если вы используете сборки VS Code Insiders, префикс URL-адреса - vscode-insiders: // .

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

Читайте дальше, чтобы узнать о:

Общие вопросы

'код' не распознается как внутренняя или внешняя команда

Ваша ОС не может найти двоичный код VS Code , код на своем пути.Установки VS Code для Windows и Linux должны были установить VS Code на вашем пути. Попробуйте удалить и переустановить VS Code. Если код по-прежнему не найден, обратитесь к темам настройки платформы для Windows и Linux.

В macOS вам необходимо вручную запустить команду оболочки : установить команду 'code' в команде PATH (доступна через палитру команд ⇧⌘P (Windows, Linux Ctrl + Shift + P)). Дополнительные сведения см. В разделе по настройке macOS.

Как мне получить доступ к командной строке (терминалу) из VS Code?

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

Могу ли я указать расположение настроек для VS Code, чтобы иметь портативную версию?

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

06.11.2020

.

Базовое редактирование в Visual Studio Code

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

Сочетания клавиш

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

Множественный выбор (мульти-курсор)

VS Code поддерживает несколько курсоров для быстрого одновременного редактирования. Вы можете добавить вторичные курсоры (более тонкие) с помощью Alt + Click. Каждый курсор работает независимо в зависимости от контекста, в котором он находится. Обычный способ добавить дополнительные курсоры - использовать ⌥⌘ ↓ (Windows Ctrl + Alt + Down, Linux Shift + Alt + Down) или ⌥⌘ ↑ (Windows Ctrl + Alt + Up , Linux Shift + Alt + Up), которые вставляют курсоры ниже или выше.

Примечание: Драйвер вашей видеокарты (например, NVIDIA) может перезаписать эти ярлыки по умолчанию.

⌘D (Windows, Linux Ctrl + D) выделяет слово в курсоре или следующее вхождение текущего выделения.

Совет: Вы также можете добавить дополнительные курсоры с помощью ⇧⌘L (Windows, Linux Ctrl + Shift + L), которые будут добавлять выделение при каждом появлении текущего выделенного текста.

Модификатор нескольких курсоров

Если вы хотите изменить клавишу-модификатор для применения нескольких курсоров к Cmd + Click в macOS и Ctrl + Click в Windows и Linux, вы можете сделать это с помощью редактора .Настройка multiCursorModifier . Это позволяет пользователям из других редакторов, таких как Sublime Text или Atom, продолжать использовать знакомый им модификатор клавиатуры.

Можно установить значение:

  • ctrlCmd - Сопоставляет Ctrl в Windows и Cmd в macOS.
  • alt - существующий Alt по умолчанию.

Также есть пункт меню Используйте Ctrl + щелчок для мульти-курсора в меню Selection , чтобы быстро переключить этот параметр.

Жесты Go To Definition и Open Link также будут учитывать этот параметр и адаптироваться таким образом, чтобы они не конфликтовали. Например, если установлено значение ctrlCmd , несколько курсоров можно добавить с помощью Ctrl / Cmd + Click, а открытие ссылок или переход к определению можно вызвать с помощью Alt + Click.

Сжать / развернуть выделенную область

Быстро сжимать или расширять текущий выбор. Запустите его с помощью ⌃⇧⌘ ← (Windows, Linux Shift + Alt + Left) и ⌃⇧⌘ → (Windows, Linux Shift + Alt + Right).

Вот пример расширения выделения с помощью ⌃⇧⌘ → (Windows, Linux Shift + Alt + Right):

Выбор столбца (прямоугольника)

Поместите курсор в один угол и затем, удерживая Shift + Alt, перетащите в противоположный угол:

Примечание: это меняется на Shift + Ctrl / Cmd при использовании Ctrl / Cmd в качестве модификатора с несколькими курсорами.

Также существуют привязки клавиш по умолчанию для выбора столбца в macOS и Windows, но не в Linux.

Ключ Команда ID команды
⇧⌥⌘ ↓ (Windows Ctrl + Shift + Alt + вниз, Linux) Выбор столбца вниз курсорColumnSelectDown
⇧⌥⌘ ↑ (Windows Ctrl + Shift + Alt + Up, Linux) Выбор столбца вверх курсорColumnSelectUp
⇧⌥⌘ ← (Windows Ctrl + Shift + Alt + Left, Linux) Выбор столбца слева курсорColumnSelectLeft
⇧⌥⌘ → (Windows Ctrl + Shift + Alt + Right, Linux) Выбор столбца справа курсорColumnSelectRight
⇧⌥⌘PageDown (Windows Ctrl + Shift + Alt + PageDown, Linux) Выбор столбца на страницу вниз курсорColumnSelectPageDown
⇧⌥⌘PageUp (Windows Ctrl + Shift + Alt + PageUp, Linux) Выбор столбца Page Up курсорColumnSelectPageUp

Вы можете редактировать комбинации клавиш .json , чтобы связать их с чем-то более знакомым, если хотите.

Режим выбора столбца

Пользовательская настройка Editor: Column Selection управляет этой функцией. После входа в этот режим, как указано в строке состояния, жесты мыши и клавиши со стрелками по умолчанию создают выбор столбца. Этот глобальный переключатель также доступен через пункт меню Selection > Column Selection Mode . Кроме того, можно также отключить режим выбора столбца в строке состояния.

Сохранить / Автосохранение

По умолчанию VS Code требует явного действия для сохранения изменений на диск, ⌘S (Windows, Linux Ctrl + S).

Однако легко включить Автосохранение , которое сохранит ваши изменения после заданной задержки или когда фокус покидает редактор. Если этот параметр включен, нет необходимости явно сохранять файл. Самый простой способ включить автосохранение - использовать переключатель Файл > Автосохранение , который включает и выключает сохранение после задержки.

Для большего контроля над Автосохранение откройте настройки пользователя или рабочего пространства и найдите соответствующие настройки:

  • files.autoSave : Может принимать значения:
    • off - отключить автосохранение.
    • afterDelay - для сохранения файлов после заданной задержки (по умолчанию 1000 мс).
    • onFocusChange - для сохранения файлов при перемещении фокуса из редактора грязного файла.
    • onWindowChange - для сохранения файлов, когда фокус перемещается за пределы окна VS Code.
  • files.autoSaveDelay : Настраивает задержку в миллисекундах, когда files.autoSave настроен на afterDelay . По умолчанию 1000 мс.

Горячий выход

VS Code запоминает несохраненные изменения в файлах при выходе по умолчанию. Горячий выход запускается, когда приложение закрывается через Файл > Выход ( Код > Выход из в macOS) или когда закрывается последнее окно.

Вы можете настроить горячий выход, установив для files.hotExit следующие значения:

  • "выключено" : отключить горячий выход.
  • "onExit" : Горячий выход будет инициирован при закрытии приложения, то есть при закрытии последнего окна в Windows / Linux или при запуске команды workbench.action.quit (из палитры команд , сочетание клавиш или меню). Все окна без открытых папок будут восстановлены при следующем запуске.
  • "onExitAndWindowClose" : Горячий выход будет активирован при закрытии приложения, то есть при закрытии последнего окна в Windows / Linux или при запуске команды workbench.action.quit (из палитры команд , сочетание клавиш или меню), а также для любого окна с открытой папкой, независимо от того, последнее ли это окно. Все окна без открытых папок будут восстановлены при следующем запуске. Чтобы восстановить окна папок такими, какими они были до выключения, установите окно .восстановить Windows до все .

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

  • Windows % APPDATA% \ Code \ Backups
  • macOS $ ГЛАВНАЯ / Библиотека / Поддержка приложений / Код / Резервное копирование
  • Linux $ HOME / .config / Code / Резервные копии

Найти и заменить

VS Code позволяет быстро найти текст и заменить его в текущем открытом файле.Нажмите ⌘F (Windows, Linux Ctrl + F), чтобы открыть виджет поиска в редакторе, результаты поиска будут выделены в редакторе, на линейке обзора и на миникарте.

Если в текущем открытом файле есть несколько совпадающих результатов, вы можете нажать Enter и ⇧Enter (Windows, Linux Shift + Enter), чтобы перейти к следующему или предыдущему результату, когда поле ввода поиска находится в фокусе.

Строка поиска семян из выбранного

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

Эту функцию можно отключить, установив для editor.find.seedSearchStringFromSelection значение false .

Найти в выделенном

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

Если вы хотите, чтобы это было поведение виджета поиска по умолчанию, вы можете установить редактор .find.autoFindInSelection от до всегда или до multiline , если вы хотите, чтобы он запускался для выделенного текста только при выборе нескольких строк содержимого.

Расширенные возможности поиска и замены

Помимо поиска и замены простым текстом виджет поиска также имеет три расширенных параметра поиска:

  • Спичечный футляр
  • Совпадение слова целиком
  • Регулярное выражение

Замена футляра опоры поля ввода сохраняется, вы можете включить его, нажав кнопку «Сохранить футляр» ( AB ).

Поддержка нескольких строк и изменение размера виджета

Вы можете искать многострочный текст, вставляя текст в поля ввода «Найти» и «Заменить». Нажатие Ctrl + Enter вставляет новую строку в поле ввода.

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

Поиск по файлам

VS Code позволяет быстро искать по всем файлам в текущей открытой папке.Нажмите ⇧⌘F (Windows, Linux Ctrl + Shift + F) и введите поисковый запрос. Результаты поиска группируются в файлы, содержащие поисковый запрос, с указанием совпадений в каждом файле и его местоположения. Разверните файл, чтобы просмотреть все обращения в этом файле. Затем щелкните один из обращений, чтобы просмотреть его в редакторе.

Совет: Мы также поддерживаем поиск по регулярным выражениям в поле поиска.

Вы можете настроить параметры расширенного поиска, щелкнув многоточие ( Toggle Search Details ) под полем поиска справа (или нажав ⇧⌘J (Windows, Linux Ctrl + Shift + J)).Появятся дополнительные поля для настройки поиска.

Параметры расширенного поиска

В поле ввода под полем поиска вы можете ввести шаблоны, которые нужно включить или исключить из поиска. Если вы введете example , это будет соответствовать каждой папке и файлу с именем example в рабочей области. Если вы введете ./example , это будет соответствовать папке example / на верхнем уровне вашего рабочего пространства. Используйте ! , чтобы исключить эти шаблоны из поиска.! Example пропустит поиск в любой папке или файле с именем example . Используйте , для разделения нескольких шаблонов. Пути должны использовать косую черту. Вы также можете использовать синтаксис glob:

  • * для соответствия одному или нескольким символам в сегменте пути
  • ? для соответствия одному символу в сегменте пути
  • ** для соответствия любому количеству сегментов пути, включая ни одного
  • {} для группировки условий (например, {** / *.html, ** / *. txt} соответствует всем HTML и текстовым файлам)
  • [] для объявления диапазона символов для сопоставления (пример . [0-9] для сопоставления в примере .0 , пример.1 ,…)

VS Code по умолчанию исключает некоторые папки, чтобы уменьшить количество результатов поиска, которые вас не интересуют (например: node_modules ). Откройте настройки для изменения этих правил в файлах .exclude и search.exclude section.

Также обратите внимание на кнопку переключения «Использовать исключить настройки» и «Игнорировать файлы» в файлах , чтобы исключить поле . Переключатель определяет, следует ли исключать файлы, которые игнорируются вашими файлами .gitignore и / или совпадают с вашими файлами . Исключить и search.exclude settings.

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

Найти и заменить

Вы также можете искать и заменять файлы. Разверните виджет «Поиск», чтобы отобразить текстовое поле «Заменить».

Когда вы вводите текст в текстовое поле «Заменить», вы увидите отображение отложенных изменений. Вы можете заменить все файлы в текстовом поле «Заменить», заменить все в одном файле или заменить одно изменение.

Совет: Вы можете быстро повторно использовать предыдущий поисковый запрос, используя ↓ (Windows, Linux Down) и ↑ (Windows, Linux Up) для навигации по истории поисковых запросов.

IntelliSense

Мы всегда предлагаем автозавершение слов, но для богатых языков, таких как JavaScript, JSON, HTML, CSS, SCSS, Less, C # и TypeScript, мы предлагаем полноценный интерфейс IntelliSense. Если языковая служба знает возможные варианты завершения, предложения IntelliSense будут появляться по мере ввода. Вы всегда можете запустить его вручную с помощью ⌃Space (Windows, Linux Ctrl + Space). По умолчанию Tab или Enter являются триггерами принятия клавиатуры, но вы также можете настроить эти привязки клавиш.

Совет: Фильтрация предложений поддерживает CamelCase, поэтому вы можете вводить буквы в верхнем регистре в имени метода, чтобы ограничить количество предложений. Например, «cra» быстро вызовет «createApplication».

Совет. Предложения IntelliSense можно настроить с помощью параметров editor.quickSuggestions и editor.suggestOnTriggerCharacters .

Разработчики JavaScript и TypeScript могут воспользоваться репозиторием файлов декларации (типизации) типа npmjs, чтобы получить IntelliSense для общих библиотек JavaScript (Node.js, React, Angular). Вы можете найти хорошее объяснение использования файлов объявления типов в разделе о языке JavaScript и в руководстве по Node.js.

Дополнительные сведения см. В документе IntelliSense.

Форматирование

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

  • Форматировать документ (⇧⌥F (Windows Shift + Alt + F, Linux Ctrl + Shift + I)) - отформатировать весь активный файл.
  • Выбор формата (⌘K ⌘F (Windows, Linux Ctrl + K Ctrl + F)) - отформатировать выделенный текст.

Вы можете вызвать их из палитры команд (⇧⌘P (Windows, Linux Ctrl + Shift + P)) или из контекстного меню редактора.

VS Code имеет средства форматирования по умолчанию для JavaScript, TypeScript, JSON и HTML. У каждого языка есть определенные параметры форматирования (например, html.format.indentInnerHtml ), которые вы можете настроить в соответствии со своими предпочтениями в настройках пользователя или рабочей области. Вы также можете отключить средство форматирования языка по умолчанию, если у вас установлено другое расширение, обеспечивающее форматирование для того же языка.

  "html.format.enable": false  

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

  • editor.formatOnType - Отформатируйте строку после ввода.
  • editor.formatOnSave - Отформатировать файл при сохранении.
  • editor.formatOnPaste - Форматирует вставляемый контент.

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

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

Складной

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

Вы также можете использовать следующие действия:

  • Сгибание (⌥⌘ [(Windows, Linux Ctrl + Shift + [)) сгибает самую внутреннюю несвернутую область на курсоре.
  • Развернуть (⌥⌘] (Windows, Linux Ctrl + Shift +])) разворачивает свернутую область под курсором.
  • Toggle Fold (⌘K ⌘L (Windows, Linux Ctrl + K Ctrl + L)) складывает или разворачивает область под курсором.
  • Свернуть Рекурсивно (⌘K ⌘ [(Windows, Linux Ctrl + K Ctrl + [)) сгибает самую внутреннюю несвернутую область на курсоре и все области внутри этой области.
  • Рекурсивно развернуть (⌘K ⌘] (Windows, Linux Ctrl + K Ctrl +])) разворачивает область под курсором и все области внутри этой области.
  • Свернуть все (⌘K ⌘0 (Windows, Linux Ctrl + K Ctrl + 0)) сгибает все области в редакторе.
  • Развернуть все (⌘K ⌘J (Windows, Linux Ctrl + K Ctrl + J)) разворачивает все области в редакторе.
  • Fold Level X (⌘K ⌘2 (Windows, Linux Ctrl + K Ctrl + 2) для уровня 2) свертывает все области уровня X, кроме области в текущей позиции курсора.
  • Свернуть все комментарии блока (⌘K ⌘ / (Windows, Linux Ctrl + K Ctrl + /)) свернуть все области, которые начинаются с маркера комментария блока.

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

Начиная с версии 1.22, складывающиеся области также могут быть вычислены на основе синтаксических токенов настроенного языка редактора. Следующие языки уже обеспечивают сворачивание с учетом синтаксиса: Markdown, HTML, CSS, LESS, SCSS и JSON.

Если вы предпочитаете вернуться к сворачиванию на основе отступов для одного (или всех) из указанных выше языков, используйте:

  "[html]": { "редактор.foldStrategy ":" отступ " },  

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

Язык Начальная область Конечная область
Летучая мышь :: # регион или REM # регион :: # endregion или REM #endregion
C # # регион #endregion
C / C ++ # область прагмы #pragma endregion
CSS / Less / SCSS / * # регион * / / * # endregion * /
Coffeescript # регион #endregion
Ф № // # регион или (#_region) // # endregion или (#_endregion)
Java // # регион или // // #endregion или //
Уценка
Perl5 #region или = pod #endregion или = вырезать
PHP # регион #endregion
PowerShell # регион #endregion
Python # регион или # регион #endregion или # endregion
TypeScript / JavaScript // # регион // # endregion
Visual Basic # регион # Конечный регион

Чтобы складывать и развертывать только области, определенные маркерами, используйте:

  • Свернуть маркерные области (⌘K ⌘8 (Windows, Linux Ctrl + K Ctrl + 8)) сгибает все маркерные области.
  • Развернуть маркерные области (⌘K ⌘9 (Windows, Linux Ctrl + K Ctrl + 9)) разворачивает все маркерные области.

Вмятина

VS Code позволяет управлять отступом текста, а также использовать пробелы или табуляторы. По умолчанию VS Code вставляет пробелы и использует 4 пробела на клавишу Tab. Если вы хотите использовать другое значение по умолчанию, вы можете изменить настройки editor.insertSpaces и editor.tabSize .

  "editor.insertSpaces": true, "редактор.tabSize ": 4,  

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

VS Code анализирует ваш открытый файл и определяет отступ, используемый в документе. Автоматически обнаруженный отступ переопределяет настройки отступа по умолчанию. Обнаруженная настройка отображается в правой части строки состояния:

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

Примечание. Автоматическое обнаружение кода VS Code проверяет наличие отступов в 2, 4, 6 или 8 пробелов. Если в вашем файле используется другое количество пробелов, отступ может быть обнаружен неправильно. Например, если ваше соглашение предусматривает отступ с 3 пробелами, вы можете отключить editor.detectIndentation и явно установить размер табуляции на 3.

  "editor.detectIndentation": false, "editor.tabSize": 3,  

Поддержка кодировки файлов

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

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

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

Затем выберите кодировку.

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

Вы рассмотрели базовый пользовательский интерфейс - VS Code - это гораздо больше. Читайте дальше, чтобы узнать о:

Общие вопросы

Возможен ли глобальный поиск и замена?

Да, разверните текстовое поле представления поиска, чтобы включить текстовое поле замены.Вы можете искать и заменять все файлы в вашем рабочем пространстве. Обратите внимание: если вы не открывали VS Code в папке, поиск будет выполняться только в открытых в данный момент файлах.

Как включить перенос по словам?

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

.

15 лучших бесплатных редакторов кода для Windows и Mac [обновление 2020]

  • Home
  • Testing

      • Back
      • Agile Testing
      • BugZilla
      • Cucumber
      • Database Testing 9L000 Testing
      • JIRA
      • Назад
      • JUnit
      • LoadRunner
      • Ручное тестирование
      • Мобильное тестирование
      • Mantis
      • Почтальон
      • QTP
      • Центр контроля качества
      • RP
      • Selenium
      • SoapUI
      • Управление тестированием
      • TestLink
  • SAP

      • Назад
      • ABAP
      • APO
      • Начинающий
      • Basis
      • BODS
      • BI
      • BPC
      • CO
      • Назад
      • CRM
      • Crystal Reports
      • MMO
      • Crystal Reports
      • Заработная плата
      • Назад
      • PI / PO
      • PP
      • SD
      • SAPUI5
      • Безопасность
      • Менеджер решений
      • Successfactors
      • SAP Back Tutorials
      • 9007
          • Apache
          • AngularJS
          • ASP.Net
          • C
          • C #
          • C ++
          • CodeIgniter
          • СУБД
          • JavaScript
          • Назад
          • Java
          • JSP
          • Kotlin
          • Linux
          • Linux
          • Kotlin
          • Linux
          • js
          • Perl
          • Назад
          • PHP
          • PL / SQL
          • PostgreSQL
          • Python
          • ReactJS
          • Ruby & Rails
          • Scala
          • SQL
          • 000
          • SQL
          • 000
          • SQL
          • 000 0003 SQL 000
          • UML
          • VB.Net
          • VBScript
          • Веб-службы
      .Код Visual Studio

      - при открытии файлов с помощью внешнего приложения, как открыть их в том же экземпляре IDE?

      Переполнение стека
      1. Около
      2. Товары
      3. Для команд
      1. Переполнение стека Общественные вопросы и ответы
      .Навигация по коду

      в Visual Studio Code

      Visual Studio Code имеет высокопроизводительный редактор кода, который в сочетании со службами языков программирования дает вам возможности IDE и скорость текстового редактора. В этом разделе мы сначала опишем функции языкового интеллекта VS Code (предложения, подсказки по параметрам, интеллектуальная навигация по коду), а затем покажем возможности основного текстового редактора.

      Быстрая навигация по файлам

      Совет: Вы можете открыть любой файл по его имени, набрав ⌘P (Windows, Linux Ctrl + P) ( Quick Open ).

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

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

      Кроме того, вы можете использовать ⌃- (Windows Alt + Left, Linux Ctrl + Alt + -) и ⌃⇧- (Windows Alt + Right, Linux Ctrl + Shift + -) для перемещения между файлами и мест редактирования. Если вы прыгаете между разными строками одного и того же файла, эти ярлыки позволяют легко перемещаться между этими местами.

      Панировочные сухари

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

      «Панировочные сухари» всегда показывают путь к файлу и, с помощью языковых расширений, путь символа до позиции курсора. Показанные символы такие же, как в режиме Outline и Go to Symbol.

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

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

      Вы можете отключить панировочные сухари с помощью переключателя View > Show Breadcrumbs или с помощью настройки breadcrumbs.enabled .

      Настройка панировочных сухарей

      Внешний вид панировочных сухарей можно настроить. Если у вас очень длинные пути или вас интересуют только пути к файлам или пути к символам, вы можете использовать настройки breadcrumbs.filePath и breadcrumbs.symbolPath . Оба поддерживают на , на и на последний , и они определяют, какую часть пути вы видите.По умолчанию в хлебных крошках отображаются значки файлов и символов слева от хлебных крошек, но вы можете удалить значки, установив для breadcrumbs.icons значение false.

      Порядок символов в панировочных сухарях

      Вы можете управлять порядком расположения символов в раскрывающемся списке «Хлебные крошки» с помощью параметров breadcrumbs.symbolSortOrder .

      Допустимые значения:

      • позиция - позиция в файле (по умолчанию)
      • наименование - в алфавитном порядке
      • тип - обозначение типа порядка

      Навигация по клавиатуре Breadcrumb

      Для взаимодействия с хлебными крошками используйте команду Focus Breadcrumbs или нажмите ⇧⌘.(Windows, Linux Ctrl + Shift +.). Он выберет этот последний элемент и откроет раскрывающийся список, в котором вы сможете перейти к файлу или символу-аналогу. Используйте сочетания клавиш ← (Windows, Linux влево) и → (Windows, Linux справа) для перехода к элементам до или после текущего элемента. Когда появится раскрывающийся список, начните вводить текст - все совпадающие элементы будут выделены, и для быстрой навигации будет выбран наиболее подходящий.

      Вы также можете работать с панировочными сухарями без раскрывающегося списка. Нажмите ⇧⌘; (Windows, Linux Ctrl + Shift +;), чтобы сфокусироваться на последнем элементе, используйте ← (Windows, Linux слева) и → (Windows, Linux справа) для навигации и используйте пробел, чтобы открыть элемент в редакторе.

      Перейти к определению

      Если язык поддерживает это, вы можете перейти к определению символа, нажав F12.

      Если нажать Ctrl и навести курсор на символ, появится предварительный просмотр объявления:

      Совет: Вы можете перейти к определению с помощью Ctrl + Click или открыть определение сбоку с помощью Ctrl + Alt + Click.

      Перейти к определению типа

      Некоторые языки также поддерживают переход к определению типа символа путем выполнения команды Перейти к определению типа либо из контекстного меню редактора, либо из палитры команд .Это приведет вас к определению типа символа. Команда editor.action.goToTypeDefinition по умолчанию не привязана к сочетанию клавиш, но вы можете добавить свою собственную привязку клавиш.

      Перейти к реализации

      Languages ​​также могут поддерживать переход к реализации символа путем нажатия ⌘F12 (Windows, Linux Ctrl + F12). Для интерфейса здесь показаны все его реализаторы, а для абстрактных методов показаны все конкретные реализации этого метода.

      Перейти к символу

      Вы можете перемещаться по символам внутри файла с помощью ⇧⌘O (Windows, Linux Ctrl + Shift + O). Набрав: символы будут сгруппированы по категориям. Нажмите "Вверх" или "Вниз" и перейдите в нужное место.

      Открыть символ по имени

      Некоторые языки поддерживают переход к символу в файлах с помощью ⌘T (Windows, Linux Ctrl + T). Введите первую букву типа, к которому вы хотите перейти, независимо от того, в каком файле он содержится, и нажмите Enter.

      Peek

      Мы думаем, что нет ничего хуже большого переключения контекста, когда все, что вам нужно, - это быстро что-то проверить.Вот почему мы поддерживаем сторонних редакторов. Когда вы выполняете поиск Go to References (с помощью ⇧F12 (Windows, Linux Shift + F12)) или Peek Definition (с помощью ⌥F12 (Windows Alt + F12, Linux Ctrl + Shift + F10)), мы встроить результат в строку:

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

      Совет: Кроме того, окно просмотра закрывается, если вы нажимаете Escape или дважды щелкаете в области редактора просмотра. Вы можете отключить это поведение с помощью параметра editor.stablePeek .

      Кронштейн

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

      Совет: Вы можете перейти к соответствующей скобке с помощью ⇧⌘ \ (Windows, Linux Ctrl + Shift + \)

      Справочная информация

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

      Совет: Непосредственно вызовите действие Peek References , щелкнув эти аннотации.

      Совет: Справочная информация, отображаемая в CodeLens, может быть включена или отключена с помощью параметра editor.codeLens .

      Обозначение переименования

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

      Ошибки и предупреждения

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

      • В строке состояния отображается сводка всех ошибок и предупреждений.
      • Вы можете щелкнуть сводку или нажать ⇧⌘M (Windows, Linux Ctrl + Shift + M), чтобы отобразить панель ПРОБЛЕМЫ со списком всех текущих ошибок.
      • Если вы откроете файл с ошибками или предупреждениями, они будут отображаться вместе с текстом и на линейке обзора.

      Совет: Чтобы просмотреть ошибки или предупреждения в текущем файле, вы можете нажать F8 или ⇧F8 (Windows, Linux Shift + F8), что отобразит встроенную зону с подробным описанием проблемы и возможных действий кода (если они доступны):

      Код действий

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

      Защита исходящего канала

      Для вашей защиты VS Code отображает запрос перед открытием исходящей ссылки на веб-сайт из редактора.

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

      Параметр Manage Trusted Domains , также доступный в любое время из палитры команд, вызывает файл JSON Trusted Domains , где вы можете добавлять, удалять или изменять доверенные домены.

        // Вы можете использовать команду «Управление доверенными доменами», чтобы открыть этот файл. // Сохраняем этот файл, чтобы применить правила доверенных доменов. [ "* .twitter.com" ]  

      В файле Trusted Domains JSON также есть комментарии с примерами поддерживаемых форматов доменов и список доменов, которым доверяют по умолчанию, например https: // *.visualstudio.com и https: //*.microsoft.com .

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

      Теперь, когда вы знаете, как работает редактор, пора попробовать еще кое-что ...

      Общие вопросы

      Как я могу автоматически выбрать вторую запись в Quick Open вместо первой?

      С помощью команды workbench.action.quickOpenPreviousEditor вы можете автоматически выбрать вторую запись в Quick Open. Это может быть полезно, если вы хотите выбрать предыдущую запись из списка без необходимости вызывать другую привязку клавиш:

        { "ключ": "ctrl + p", "команда": "верстак.action.quickOpenPreviousEditor " }, { "ключ": "ctrl + p", "команда": "-workbench.action.quickOpen" }  

      Как настроить Ctrl + Tab для навигации по всем редакторам всех групп

      По умолчанию Ctrl + Tab позволяет перемещаться между редакторами одной и той же группы редакторов. Если вы хотите перемещаться по всем открытым редакторам во всех группах, вы можете создать сочетания клавиш для рабочих мест workbench.action.quickOpenPreviousRecentlyUsedEditor и .action.quickOpenLeastRecentlyUsedEditor команд:

        { "ключ": "ctrl + tab", "command": "workbench.action.quickOpenPreviousRecentlyUsedEditor", "когда": "! inEditorsPicker" }, { "ключ": "ctrl + shift + tab", "команда": "workbench.action.quickOpenLeastRecentlyUsedEditor", "когда": "! inEditorsPicker" }  

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

      Вот список команд, которые можно использовать для навигации в редакторах без открытия средства выбора:

      Ключ Команда ID команды
      Открыть следующий редактор недавно использованных верстак.action.openNextRecentlyUsedEditor
      Открыть ранее использованный редактор workbench.action.openPreviousRecentlyUsedEditor
      Открыть следующий недавно использованный редактор в группе workbench.action.openNextRecentlyUsedEditorInGroup
      Открыть ранее использованный редактор в группе верстак.action.openPreviousRecentlyUsedEditorInGroup

      06.11.2020

      .

      Смотрите также