Освоение кода Visual Studio: добавление вертикальной линии для ограничения столбца

Visual Studio Code (VSCode) – популярный среди разработчиков редактор кода благодаря своей универсальности и широким возможностям настройки. Одним из распространенных требований при написании кода является соблюдение определенного ограничения по столбцам, что помогает улучшить читаемость и удобство обслуживания кода. В этой статье мы рассмотрим различные методы добавления вертикальной линии в VSCode для обозначения ограничения столбца, что упрощает сохранение желаемой ширины. Так что хватайте свой любимый напиток и давайте окунемся в мир ограничений по столбцам!

Метод 1: использование EditorConfig
EditorConfig — это формат файла, который помогает поддерживать согласованные стили кодирования в разных редакторах. Чтобы добавить вертикальную линию для ограничения столбца с помощью EditorConfig, выполните следующие действия:

  1. Установите расширение EditorConfig в VSCode.
  2. Создайте файл .editorconfigв корневом каталоге вашего проекта или в нужном каталоге.
  3. Добавьте следующий код в файл .editorconfig: 
    [*.{js,jsx,ts,tsx,html,css,scss}]
max_line_length = 80
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

    Измените значение max_line_lengthна желаемое ограничение столбца.

Метод 2: использование расширения «Editor Rulers»
Расширение «Editor Rulers» обеспечивает простой способ добавления вертикальных линий в VSCode. Вот как его использовать:

  1. Установите расширение «Editor Rulers» из VSCode Marketplace.
  2. Откройте настройки VSCode, нажав Ctrl + ,(запятая) или выбрав «Файл» ->«Настройки» ->«Настройки».
  3. Найдите «Линейки редактора» в строке поиска и нажмите «Изменить в settings.json».
  4. Добавьте следующий код в файл settings.json: 
    "editor.rulers": [
   80
]

    Отрегулируйте значение до желаемого ограничения столбца.

Метод 3: использование расширения «Indent Rainbow».
Расширение «Indent Rainbow» в основном используется для выделения уровней отступов, но его также можно использовать для добавления вертикальной линии для ограничения столбца. Выполните следующие действия:

  1. Установите расширение «Indent Rainbow» из VSCode Marketplace.
  2. Откройте настройки VSCode, нажав Ctrl + ,(запятая) или выбрав «Файл» ->«Настройки» ->«Настройки».
  3. Найдите «Радужный отступ» в строке поиска и нажмите «Изменить в settings.json».
  4. Добавьте следующий код в файл settings.json: 
    "indentRainbow.colors": [
   "rgba(0, 0, 0, 0.06)"
],
"indentRainbow.colorAlpha": 0.4,
"indentRainbow.errorColor": "rgba(255, 0, 0, 0.8)",
"indentRainbow.errorBarStyle": "solid",
"indentRainbow.errorBarThickness": "1px"

    Отрегулируйте значения по своему усмотрению.

Добавление вертикальной линии для ограничения столбца в Visual Studio Code повышает читаемость кода и помогает разработчикам соблюдать стандарты кодирования. В этой статье мы рассмотрели три различных метода: использование EditorConfig, расширения «Editor Rulers» и расширения «Indent Rainbow». Выберите метод, который лучше всего соответствует вашему рабочему процессу и стилю программирования, и начните писать чистый и хорошо отформатированный код уже сегодня!