Несколько вертикальных линейек в VS Code: Полное руководство

VS Code поддерживает несколько вертикальных линий через настройку editor.rulers (обратите внимание на множественное число). Вы можете настроить несколько линий, используя либо простой формат массива, либо формат объекта, который включает пользовательские цвета для каждой линии.

Содержание

• Базовая настройка
• Расширенная настройка с цветами
• Языкоспецифичные линии
• Устранение неполадок
• Лучшие практики

Базовая настройка

Самый простой способ настроить несколько вертикальных линий — использовать массив чисел в настройках VS Code (settings.json):

"editor.rulers": [80, 100, 120]

Эта конфигурация создает три вертикальные линии на позициях столбцов 80, 100 и 120 от левого края редактора. Согласно официальной документации VS Code, линии отображаются как вертикальные линии, которые помогают поддерживать единообразное форматирование кода и его читаемость.

Формат массива прост:

• Каждое число представляет позицию столбца, где появится линия
• Числа измеряются в позициях символов от левого края редактора
• Несколько чисел в массиве создают несколько линий

Примечание: Имя настройки — editor.rulers (множественное число), а не editor.ruler (единственное число). Форма единственного числа использовалась в более старых версиях VS Code.

Расширенная настройка с цветами

Начиная с версии VS Code 1.43, вы можете настроить цвет каждой линии индивидуально, используя формат объекта. Это дает вам больше контроля над визуальным видом ваших линий:

"editor.rulers": [
  { "column": 80, "color": "#ff00ff" },  // Фиолетовая линия на столбце 80
  100,                                   // Линия с цветом по умолчанию на столбце 100
  { "column": 120, "color": "#ff0000" }  // Красная линия на столбце 120
]

Варианты настройки цвета

Вы можете указывать цвета в нескольких форматах:

• Hex-коды: "#ff00ff", "#00ff00", "#ff0000"
• Значения RGB: Полная настройка цвета
• Именованные цвета: Ограниченная поддержка стандартных веб-цветов

Для более широкой настройки цвета вы также можете установить цвет линии по умолчанию с помощью настройки workbench.colorCustomizations:

"workbench.colorCustomizations": {
  "editorRuler.foreground": "#4093ff"
},
"editor.rulers": [80, 120]

Это устанавливает все линии без конкретных назначений цвета в синий цвет (#4093ff).

Языкоспецифичные линии

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

"[javascript]": {
  "editor.rulers": [80, 120]
},
"[python]": {
  "editor.rulers": [79, 99]
},
"[java]": {
  "editor.rulers": [100, 120]
}

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

Устранение неполадок

Если ваши линии не отображаются, вот несколько распространенных решений:

1. Проверьте имя настройки

Убедитесь, что вы используете editor.rulers (множественное число), а не editor.ruler (единственное число).

2. Проверьте синтаксис JSON

Убедитесь, что синтаксис JSON правильный. Распространенные ошибки включают:

• Отсутствующие запятые между элементами массива
• Неправильные кавычки
• Несогласованные скобки

3. Перезагрузите VS Code

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

• Быстрая перезагрузка: Нажмите Ctrl+Shift+P (или Cmd+Shift+P на Mac), затем введите “Developer: Reload Window”
• Полный перезапуск: Закройте и откройте VS Code заново

4. Проверьте конфликтующие настройки

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

5. Проверьте позиции столбцов

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

Лучшие практики

Рекомендуемые позиции столбцов

• 80 символов: Обычно используется для Python и общей читаемости
• 100 символов: Часто используется для JavaScript/TypeScript
• 120 символов: Максимальная длина строки для некоторых языков

Стратегия цветового кодирования

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

• Синий: Общие рекомендации по длине строки
• Красный: Максимальные пределы длины строки
• Зеленый: Рекомендации по стилю
• Фиолетовый: Конвенции, специфичные для языка

Соображения производительности

• Избегайте избыточного количества линий (более 5-6 могут отвлекать)
• Используйте языкоспецифичные линии только при необходимости
• Рассмотрите возможность отключения линий при работе с очень широкими файлами

Интеграция с другими инструментами

Вертикальные линии хорошо работают с другими функциями форматирования VS Code:

• Перенос слов: Комбинируйте с линиями для лучшей читаемости
• Направляющие отступов: Используйте линии для контроля длины строки
• Форматирование при сохранении: Позвольте линиям направлять ваши предпочтения форматирования

Источники

1. Stack Overflow - Как создать несколько вертикальных линий в VS Code?
2. Bobbyhadz - Настройка вертикальных линий в VS Code
3. W3Schools - Учебник по вертикальным линиям в VS Code
4. KindaCode - Как настроить вертикальные линии в VS Code
5. DEV Community - Вертикальные линии в VS Code для более красивого кода
6. Gang of Coders - Вертикальные линии в VS Code

Заключение

Visual Studio Code полностью поддерживает несколько вертикальных линий через настройку editor.rulers. Вы можете настраивать линии, используя либо простой формат массива [80, 120], либо формат объекта с пользовательскими цветами [ { "column": 80, "color": "#ff00ff" } ]. Эта функция доступна начиная с версии VS Code 1.31 и была дополнена поддержкой цветов в версии 1.43. Для наилучшего опыта рассмотрите использование языкоспецифичных конфигураций и стратегического цветового кодирования для улучшения рабочего процесса кодирования и поддержания единообразных стандартов форматирования across разных языков программирования.