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

Более 10 лет для своей работы я использовал редактор кода Notepad ++, это действительно отличный простой редактор для начинающих, который, не смотря на свою простоту, имеет все необходимые базовые функции для написании кода и большой потенциал для расширяемости. Но, как говорится, все когда то заканчивается…

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

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

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

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++ я определенно привык к двум вещам:

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

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

// Перезапишите параметры, поместив их в файл параметров.
// Наиболее часто используемые настройки см. по адресу http://go.microsoft.com/fwlink/?LinkId=808995.
{

// Редактор

 // Определяет семейство шрифтов.
 "editor.fontFamily": "Consolas, 'Courier New', monospace",

 // Управляет насыщенностью шрифта.
 "editor.fontWeight": "normal",

 // Управляет размером шрифта в пикселях.
 "editor.fontSize": 14,

 // Управляет высотой строк. Укажите 0 для вычисления высоты строки по размеру шрифта.
 "editor.lineHeight": 0,

 // Управляет видимостью номеров строк.
 "editor.lineNumbers": "on",

 // Столбцы, в которых должны отображаться вертикальные линейки
 "editor.rulers": [],

 // Символы, которые будут использоваться как разделители слов при выполнении навигации или других операций, связанных со словами.
 "editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?",

 // Число пробелов в табуляции. Эта настройка переопределяется на основании содержимого файла, когда включен параметр "editor.detectIndentation".
 "editor.tabSize": 4,

 // Вставлять пробелы при нажатии клавиши TAB. Эта настройка переопределяется на основании содержимого файла, когда включен параметр "editor.detectIndentation".
 "editor.insertSpaces": true,

 // При открытии файла editor.tabSize и editor.insertSpaces будут определяться на основе содержимого файла.
 "editor.detectIndentation": true,

 // Определяет, будут ли выделения иметь скругленные углы.
 "editor.roundedSelection": true,

 // Определяет, будет ли содержимое редактора прокручиваться за последнюю строку.
 "editor.scrollBeyondLastLine": true,

 // Определяет число символов, после которых текст будет перенесен на следующую строку. Если этот параметр имеет значение 0, используется перенос по ширине окна просмотра (перенос по словам). Если задать значение –1, то в редакторе не будет выполняться перенос по словам.
 "editor.wrappingColumn": 300,

 // Определяет, должны ли строки переноситься. Строки будут переноситься по значению min(editor.wrappingColumn, viewportWidthInColumns).
 "editor.wordWrap": false,

 // Управляет отступом строк с переносом по словам. Допустимые значения: "none", "same" или "indent".
 "editor.wrappingIndent": "same",

 // Множитель, используемый для параметров deltaX и deltaY событий прокрутки колесика мыши.
 "editor.mouseWheelScrollSensitivity": 1,

 // Определяет, должны ли при вводе текста отображаться краткие предложения.
 "editor.quickSuggestions": true,

 // Управляет длительностью задержки (в мс), перед отображением кратких предложений.
 "editor.quickSuggestionsDelay": 10,

 // Включение подсказок для параметров
 "editor.parameterHints": true,

 // Определяет, должен ли редактор автоматически закрывать скобки после открытия.
 "editor.autoClosingBrackets": true,

 // Управляет параметром, определяющим, должен ли редактор автоматически форматировать строку после ввода.
 "editor.formatOnType": false,

 // Определяет, должны ли при вводе триггерных символов автоматически отображаться предложения.
 "editor.suggestOnTriggerCharacters": true,

 // Определяет, можно ли принимать предложения клавишей ВВОД в дополнение к клавише TAB. Это помогает избежать неоднозначности между вставкой новых строк или принятием предложений.
 "editor.acceptSuggestionOnEnter": true,

 // Управляет отображением фрагментов вместе с другими предложениями и их сортировкой.
 "editor.snippetSuggestions": "bottom",

 // Включите предложения на основе слов.
 "editor.wordBasedSuggestions": true,

 // Вставка фрагментов при совпадении их префиксов. Функция работает оптимально, если параметр "quickSuggestions" отключен.
 "editor.tabCompletion": false,

 // Определяет, будет ли редактор выделять фрагменты, совпадающие с выделенным текстом.
 "editor.selectionHighlight": true,

 // Определяет, сколько украшений могут отображаться на одном месте в обзорной линейке.
 "editor.overviewRulerLanes": 3,

 // Управляет стилем анимации курсора. Допустимые значения: "blink", "smooth", "phase", "expand" и "solid"
 "editor.cursorBlinking": "blink",

 // Изменение размера шрифта в редакторе при нажатой клавише CTRL и движении колесика мыши
 "editor.mouseWheelZoom": false,

 // Определяет стиль курсора. Допустимые значения: "block", "line" и "underline"
 "editor.cursorStyle": "line",

 // Включает лигатуры шрифта.
 "editor.fontLigatures": false,

 // Управляет скрытием курсора в обзорной линейке.
 "editor.hideCursorInOverviewRuler": false,

 // Определяет, должен ли редактор обрабатывать символы пробела; возможные значения: "none", "boundary" и "all". Параметр "boundary" не обрабатывает единичные пробелы между словами.
 "editor.renderWhitespace": "none",

 // Определяет, должны ли в редакторе отображаться управляющие символы.
 "editor.renderControlCharacters": false,

 // Определяет, должны ли в редакторе отображаться направляющие отступа.
 "editor.renderIndentGuides": false,

 // Определяет, должен ли редактор отображать текущее выделение строки
 "editor.renderLineHighlight": true,

 // Управляет показом групп связанных элементов кода в редакторе
 "editor.codeLens": true,

 // Определяет, включено ли сворачивание кода в редакторе.
 "editor.folding": true,

 // Вставка и удаление пробелов после позиции табуляции
 "editor.useTabStops": true,

 // Удалить автоматически вставляемый конечный пробел
 "editor.trimAutoWhitespace": true,

 // Оставлять просматривающие редакторы открытыми, даже если дважды щелкнуто их содержимое или нажата клавиша ESC.
 "editor.stablePeek": false,

 // Определяет, как редактор несовпадений отображает отличия: рядом или в тексте.
 "diffEditor.renderSideBySide": true,

 // Определяет, должен ли редактор несовпадений трактовать несовпадения символов-разделителей как различия.
 "diffEditor.ignoreTrimWhitespace": true,
}

Так же можно настроить рабочую область, окна, плагины, оформление кода, терминал и многое-многое другое.

Открываются настройки из меню или комбинацией CTRL+, ("," - русская Б)

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

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

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

Полезные ссылки:

Заинтересовались? :)

 

Программирование
26.10.2018
1 ответ
авторизуйтесь чтобы ответить