Romych: /* Настройки */

2025-08-26T11:58:09Z

Настройки

← Попередня версія		Версія за 11:58, 26 серпня 2025
Рядок 92:		Рядок 92:
	<source lang="json">		<source lang="json">
	"editor.linkedEditing": true,		"editor.linkedEditing": true,
			</source>

			=== Показывать pinned tabs отдельной строкой ===

			<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> — '''Preferences: open settings (JSON)''' — в <code>settings.json</code> добавить строку:

			<source lang="json">
			"workbench.editor.pinnedTabsOnSeparateRow": true,
	</source>		</source>

>Zina: /* Collapse Explorer Folders */

2024-07-15T14:11:19Z

Collapse Explorer Folders

Нова сторінка

Visual Studio Code

== Быстрые клавши ==

См. также:
* [[Sublime_Text#Быстрые_клавиши|быстрые клавиши Sublime Text]]
* [https://gist.github.com/samselikoff/381689dc8fb5ae466a6c8833e84bd612#file-keybindingsmac-json Sam Selikoff]
* [https://marketplace.visualstudio.com/items?itemName=Bognaum.emmet-commands-and-keybindings Emmet commands and keybindings] - VS Code extension

{| cellpadding="10" border="1" style="border-collapse:collapse"
|-
|colspan="2"|<h3>Интерфейс</h3>
|-
| Показать/спрятать SideBar || <kbd>Ctrl</kbd>+<kbd>B</kbd>
|-
| Переключиться на SideBar и обратно || <kbd>Ctrl</kbd>+<kbd>0</kbd> ([[#Key Bindings]])
|-
| Переключиться на SideBar с фокусом на активном файле || <kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>L</kbd> ([[#Key Bindings]])
|-
| Свернуть папки в SideBar || <kbd>[</kbd> ([[#Key Bindings]])
|-
| Показать/спрятать Terminal || <kbd>Ctrl</kbd>+<kbd>`</kbd>
|-
| Открыть внешний Terminal || <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>C</kbd>
|-
|colspan="2"|<h3>Переходы</h3>
|-
| Перейти к переменной || <kbd>F12</kbd>
|-
| Перейти к парной скобке || <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>\</kbd>
|-
| Перейти к парному тегу || <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>5</kbd> ([[#Key Bindings]])
|-
| Previous edit point || <kbd>Alt</kbd>+<kbd><</kbd> ([https://marketplace.visualstudio.com/items?itemName=Bognaum.emmet-commands-and-keybindings Emmet commands and keybindings])
|-
| Next edit point || <kbd>Alt</kbd>+<kbd>></kbd> ([https://marketplace.visualstudio.com/items?itemName=Bognaum.emmet-commands-and-keybindings Emmet commands and keybindings])
|-
|colspan="2"|<h3>Выделение текста</h3>
|-
| Smart Select || <kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>→</kbd>
|-
| Previous item || <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd><</kbd> ([https://marketplace.visualstudio.com/items?itemName=Bognaum.emmet-commands-and-keybindings Emmet commands and keybindings])
|-
| Next item || <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>></kbd> ([https://marketplace.visualstudio.com/items?itemName=Bognaum.emmet-commands-and-keybindings Emmet commands and keybindings])
|-
| Выделить тег (или текст внутри тега) || <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>A</kbd> ([https://marketplace.visualstudio.com/items?itemName=Bognaum.emmet-commands-and-keybindings Emmet commands and keybindings])
|-
|colspan="2"|<h3>HTML</h3>
|-
| Обернуть тэгом || <kbd>Alt</kbd>+<kbd>E</kbd> <kbd>W</kbd> ([https://marketplace.visualstudio.com/items?itemName=Bognaum.emmet-commands-and-keybindings Emmet commands and keybindings])<br><kbd>Alt</kbd>+<kbd>W</kbd> ([[#Key Bindings]])
|-
| Переименовать тег || <kbd>Alt</kbd>+<kbd>E</kbd> <kbd>R</kbd> ([https://marketplace.visualstudio.com/items?itemName=Bognaum.emmet-commands-and-keybindings Emmet commands and keybindings])
|-
| Удалить тег || <kbd>Alt</kbd>+<kbd>E</kbd> <kbd>D</kbd> ([https://marketplace.visualstudio.com/items?itemName=Bognaum.emmet-commands-and-keybindings Emmet commands and keybindings])
|-
| Обернуть в <code><nowiki><strong></nowiki></code> || <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>S</kbd> ([[#Key Bindings]])
|-
| Вставить <code><nowiki><br></nowiki></code> || <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Enter</kbd> ([[#Key Bindings]])
|-
| Вставить <code><nowiki>&nbsp;</nowiki></code> || <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Space</kbd> ([[#Key Bindings]])
|-
| Выстроить тег в одну строку (Merge) || <kbd>Alt</kbd>+<kbd>E</kbd> <kbd>M</kbd> ([https://marketplace.visualstudio.com/items?itemName=Bognaum.emmet-commands-and-keybindings Emmet commands and keybindings])
|-
| Закомментировать || <kbd>Ctrl</kbd>+<kbd>/</kbd>
|-
| Toggle comment (HTML only) || <kbd>Alt</kbd>+<kbd>E</kbd> <kbd>Alt</kbd>+<kbd>/</kbd>([https://marketplace.visualstudio.com/items?itemName=Bognaum.emmet-commands-and-keybindings Emmet commands and keybindings])
|-
|colspan="2"|<h3>Прочее</h3>
|-
| Переключение слов: <code>true</code>/<code>false</code>, <code>yes</code>/<code>no</code>, <code>on</code>/<code>off</code>, <code>0</code>/<code>1</code>,<br><code>left</code>/<code>right</code>, <code>top</code>/<code>bottom</code>, <code>up</code>/<code>down</code>, <code>width</code>/<code>height</code> || <kbd>Alt</kbd>+<kbd>R</kbd> ([https://marketplace.visualstudio.com/items?itemName=hideoo.toggler Toggler])
|-
| Дублировать строку || <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Shift</kbd>+<kbd>↑</kbd>, <kbd>↓</kbd> на NumPad
|-
| Переименовать переменную || <kbd>F2</kbd>
|-
| Посчитать математическое<br>выражение ([https://docs.emmet.io/actions/evaluate-math/ demo]) || <kbd>Alt</kbd>+<kbd>E</kbd> <kbd>=</kbd> ([https://marketplace.visualstudio.com/items?itemName=Bognaum.emmet-commands-and-keybindings Emmet commands and keybindings])
|}

== Настройки ==

=== Twig ===

Чтобы работало автодополнение HTML тэгов в файлах <code>.twig</code>: '''Settings''' → поиск '''Emmet'''. Найти секцию '''Emmet: Include languages''' и добавить:

* Item : twig
* Value : html

=== Auto Rename Tag ===

<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> — '''Preferences: open settings (JSON)''' — в <code>settings.json</code> добавить строку:

<source lang="json">
"editor.linkedEditing": true,
</source>

== Key Bindings ==

<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> — найти команду '''Preferences: Open Keyboard Shortcuts (JSON)''' (это файл <code>keybindings.json</code>)

=== Focus toggle between editor and sidebar ===

<kbd>Ctrl</kbd>+<kbd>0</kbd><br><kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>L</kbd>

<source lang="json">
// Unbind unconditional default
{ "key": "ctrl+0", "command": "-workbench.action.focusSideBar" },
// to ←
{ "key": "ctrl+0", "command": "workbench.action.focusSideBar", "when": "!sideBarFocus" },
// from →
{ "key": "ctrl+0", "command": "workbench.action.focusActiveEditorGroup", "when": "sideBarFocus" },
// Show current file in sidebar explorer with focus
{ "key": "shift+alt+l", "command": "workbench.files.action.focusFilesExplorer", "when": "editorTextFocus" },
</source>

=== Collapse Explorer Folders ===

<kbd>[</kbd>

<source lang="json">
{
"key": "[",
"command": "workbench.files.action.collapseExplorerFolders",
"when": "explorerViewletFocus && !inputFocus"
}
</source>

=== Перейти к парному тегу ===

<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>5</kbd>

<source lang="json">
// Перейти к парному тегу
{
"key": "ctrl+shift+5",
"command": "editor.emmet.action.matchTag",
"when": "editorTextFocus && !inDebugRepl"
},
</source>

=== Wrap selected text within a HTML tag ===

<kbd>Alt</kbd>+<kbd>W</kbd>

<source lang="json">
// Wrap selected text within a HTML tag by Alt+W
{
"key": "alt+w",
"command": "editor.emmet.action.wrapWithAbbreviation",
"when": "editorHasSelection && editorTextFocus"
},
</source>

=== Wrap strong ===

<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>S</kbd>

<source lang="json">
// Wrap <strong> by Ctrl+Alt+S
{
"key": "ctrl+alt+s",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"langId": "html",
"name": "<strong>"
}
},
</source>

=== Insert <nowiki><br></nowiki> ===

<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Enter</kbd>

<source lang="json">
// Insert <br> by Ctrl+Shift+Enter
{
"key": "ctrl+shift+enter",
"command": "type",
"args": {
"text": "<br>"
},
"when": "editorTextFocus"
},
</source>

=== Insert nbsp; ===

<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Space</kbd>

<source lang="json">
// Insert   by Ctrl+Shift+Space
{ "key": "ctrl+shift+space", "command": "type", "args": { "text": " " }, "when": "editorTextFocus" },
</source>

== Сниппеты ==

<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> — <code>snippet</code> — '''Preferences: Configure User Snippets''' — выбрать подходящий расширению файл и добавить в него код из генератора сниппетов:

* https://snippet-generator.app/

В поле '''Tab trigger...''' вписать буквосочетание-префикс, по набору которого и нажатию <kbd>Tab</kbd> будет вставляться сниппет.

Чтобы префикс срабатывал при ошибочном наборе на кириллице, нужно вписать его в виде массива:

<source lang="json">
"prefix": ["date", "вфеу"],
</source>

=== Тэг <code><а href...></code> по букве <kbd>ф</kbd> ===

<source lang="json">
"a href кириллицей": {
"prefix": ["ф"],
"body": [
"<a href=\"${1}\">${1}</a>"
],
"description": "a href"
},
</source>

=== Тэг <code><nowiki><strong></nowiki></code> по клавише <kbd>ы</kbd> ===

Сначала в <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> — <code>snippet</code> — '''Preferences: Configure User Snippets''' вставить снипепет для вставки тэга по нажатию клавиши <kbd>ы</kbd>:

<source lang="json">
"<strong>": {
"prefix": "ы",
"body": [
"<strong>${TM_SELECTED_TEXT}${1}</strong>"
],
"description": "Wrap <strong>"
}</source>

Затем в User > keybinding.json добавить вызов этого сниппета по хоткею <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>s</kbd>:

<source lang="json">
{
"key": "ctrl+alt+s",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"langId": "html",
"name": "<strong>"
}
}
</source>

== Replace Rules ==

Экстеншен [https://marketplace.visualstudio.com/items?itemName=bhughes339.replacerules Replace Rules] позволяет задать несколько правил поиска и замены и выполнить их за один раз.

=== Форматирование литературного текста, удаление Sizzy Online Custom Elements ===

<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> — '''Preferences: open settings (JSON)''' — в <code>settings.json</code> добавляем:

<source lang="json">
"replacerules.rules": {
"Строки текста обернуть в тег <p>": {
"find": "^(?![\\s\\n<])(.*)$",
"replace": "<p>$1</p>"
},
"Абзацы, заголовки, списки - с новой строки": {
"find": "([^\r\n])(<p>|<h[1-5]>|<br>|<li>|<div)",
"replace": "$1\n$2"
},
"Убрать переводы строк перед заголовками": {
"find": "(<p>\\s*|<br>\\s*)(<h\\d>)",
"replace": "$2"
},
"Remove trailing spaces": {
"find": "[ \t]+$",
"replace": ""
},
"Close p tags": {
"find": "<p>(.+[^(</p>\\s*)])\\n",
"replace": "<p>$1</p>\n"
},
"Дефис в длинное тире": {
"find": "([ >,.;…\n\r\t])[-–]([ …\n\t])",
"replace": "$1—$2"
},
"Кавычки": {
//"find": "(\\s|\\n|\\t)"((.|\n)+?)"",
"find": "(\\s|\\n|\\t|>| |\\()("|«)((.|\\n)+?[^\\s\\n\\t]*)("|»)",
"replace": "$1«$3»"
},
"Троеточия": {
"find": "\\.\\.\\.",
"replace": "…"
},
"H3 to H2": {
"find": "<h3>((.|\n)+?)</h3>",
"replace": "<h2>$1</h2>"
},
"H4 to H3": {
"find": "<h4>((.|\n)+?)</h4>",
"replace": "<h3>$1</h3>"
},
"Sizzy - remove Online Custom Elements": {
"find": "sizzy-\\w+-\\d *",
"replace": ""
}
},
"replacerules.rulesets": {
"Форматирование литературного текста": {
"rules": [
"Remove trailing spaces",
"Дефис в длинное тире",
"Кавычки",
"Троеточия"
]
}
},
</source>

<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> — '''Preferences: Open Keyboard Shortcuts (JSON)''' — в <code>keybiddings.json</code> добавляем:

<source lang="json">
{ // Replace Rules — Форматирование литературного текста
"key": "ctrl+shift+]",
"command": "replacerules.runRuleset",
"when": "editorTextFocus && !editorReadonly",
"args": {
"rulesetName": "Форматирование литературного текста"
}
}
</source>

Вызывать команду или комбинацией <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>R</kbd> и выбором отдельных правил, или настроенной комбинацией <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>]</kbd>

== Другие плагины ==

* [https://marketplace.visualstudio.com/items?itemName=liamhammett.inline-parameters Inline Parameters]
* [https://marketplace.visualstudio.com/items?itemName=anteprimorac.html-end-tag-labels HTML End Tag Labels]
* [https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree Todo Tree]

== См. также ==

* [https://webreaper.dev/posts/best-vscode-extensions-front-end-developers/ 15 Best VSCode Extensions for Front-End Developers in 2023]
* [https://www.roboleary.net/vscode/2020/08/05/dont-need-extensions.html VS Code: You don't need that extension]
* [[Sublime Text]]

VS Code - Історія редагувань

Romych: /* Настройки */

>Zina: /* Collapse Explorer Folders */