Вертикальные линейки в коде Visual Studio?

Как можно настроить вертикальные линейки (обратите внимание на множественное число) в коде Visual Studio?

В Sublime Text 2 я делаю

"rulers": [72, 80, 100, 120]

ни

"editor.rulers": [72, 80]

ни

"editor.ruler": 80

похоже на работу.

14 ответов

Решение

Код VS 0.10.10 представил эту функцию. Чтобы настроить это:

  1. Перейдите в " Файл" > " Настройки" > " Настройки", и на правой панели вы можете отредактировать настройки пользователя или настройки рабочего пространства.
  2. Добавьте, например, эту строку в свои пользовательские настройки справа: "editor.rulers": [80,120]

В дополнение к глобальным "editor.rulers" настройки, также возможно установить это на уровне языка.

Например, в руководствах по стилю для проектов на Python часто указывается 79 или 120 символов.

Так в вашем settings.jsonВы бы положили:

"[python]": {
    "editor.rulers": [
        79,
        120
    ]
}

В Visual Studio Code 1.27.2, когда я иду в " Файл"> "Установки"> "Настройки", я получаю следующую вкладку.

Скриншот

Я ввожу линейки в настройках поиска и получаю следующий список настроек.

Скриншот

Нажав на первый Edit в settings.json, я могу редактировать настройки пользователя.

Скриншот

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

В v1.43 есть возможность отдельно раскрашивать вертикальные линейки.

См. Проблему Поддержка нескольких линеек с разными цветами - (в settings.json):

"editor.rulers": [
  {
    "column": 80,
    "color": "#ff00FF"
  },
  100,  // <- a ruler in the default color or as customized at column 0
  {
    "column": 120,
    "color": "#ff0000"
  },
], 

Код VS: Версия 1.14.2 (1.14.2)

  1. Введите Shift+Command+p, чтобы открыть панель.
  2. Введите "settings.json", чтобы открыть файлы настроек.
  3. При настройке по умолчанию вы можете увидеть это:

    // Columns at which to show vertical rulers
    "editor.rulers": [],
    

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

  4. В правом окне "Настройки пользователя" добавьте следующее:

    "editor.rulers": [140]

Сохраните файл, и вы увидите линейки.

 

Настройка линейки Char-len в VS Code:


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

Для вашего удобства я добавил изображения внизу каждого примера конфигурации. Изображения позволяют вам просмотреть конфигурацию, а затем увидеть результат, который она имеет. Это важно, потому что без изображений вам пришлось бы прыгать туда-сюда между этим и вашим редактором, чтобы увидеть, как выглядит каждая конфигурация.





Конфигурация №1 | Очевидная конфигурация единой линейки


Очевидная настройка — это настройка, которая предлагалась много раз. Я упомяну об этом здесь, просто потому, что это правильное место для начала.

  • Добавьте следующее свойство JSON в свой settings.jsonфайл.
      
{
    "editor.rulers": [80]
}

ПОЖАЛУЙСТА, ОБРАТИ ВНИМАНИЕ! Может потребоваться, чтобы вы перезагрузили экземпляр VS Code (семантически говоря: некоторые называют это перезагрузкой окна ), настроенный, чтобы новая добавленная конфигурация отображалась должным образом. ( чтобы узнать, как быстро перезагрузить окно, прокрутите этот ответ до конца).

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




Конфиг №2 | Несколько правителей


Очевидно, что линейка принимает массив в качестве присваиваемого значения. Массив позволяет пользователям VSC добавлять несколько линеек.

  • Просто добавив одно значение в конфигурацию в последнем примере ( как показано во фрагменте ниже ), мы можем добавить еще одну линейку.
      {
    "editor.rulers": [80, 125]
}

Снимок экрана, который я сделал, немного короткий, но он достаточно хорошо передает суть. Вы можете видеть, что теперь есть две вертикальные линии, а не одна линия. Многие разработчики интерфейсов выбирают эту конфигурацию, потому что 125 часто используется в качестве предпочтительной длины строки для HTML, а 80 — предпочтительная длина строки для JavaScript, встроенного в HTML-документы.





Конфиг №3 | Раскрашивание линейки


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

      {
    "workbench.colorCustomizations": {
        "editor-ruler.foreground": "#0099AA"
    },

    "editor.rulers": [80, 125]
}
Ниже вы можете увидеть великолепие тихоокеанского синего цвета!





Конфиг №4 | Раскрашиваем линейку, чтобы она работала с кодом


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

Вы видите тонкое изменение?
      {
    "workbench.colorCustomizations": {
        "editor-ruler.foreground": "#0099AA33"
    },

    "editor.rulers": [80, 125]
}

Ниже показано, где было сделано изменение:

  • Цвет, используемый в 3-й конфигурации:
    • "editor-ruler.foreground": "#0099AA"
  • Цвет, используемый в 4-й конфигурации:
    • "editor-ruler.foreground": "#0099AA33"

Скорректированное хроматическое значение новой конфигурации (цвет/оттенок) отображается прозрачным (или не со 100% непрозрачностью), другими словами; линейки визуализируются частично прозрачными (примерно 25% прозрачности).

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

Видите прозрачные линейки ниже? Возможно, вы захотите нажать на изображение, чтобы увидеть увеличенное изображение.





Конфиг №5 | Конечная персонализированная линейка


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

Ниже приведена сумасшедшая конфигурация...
      {
    "workbench.colorCustomizations": {
        "editorRuler.foreground": "#00999922"
    },

    "editor.rulers": [
        20, 40, 40, 60, 60, 60, 60, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80
    ]
}

Я ПОНИМАЮ БЕЗУМИЕ ПРАВИЛЬНО?!


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


Вот результат :


Обратите внимание, что происходит?

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




Как я уже сказал выше, я покажу вам, как использую этот эффект для настройки своей среды:


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







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

ПЕРЕЗАГРУЗКА ВАШЕГО ОКНА В VS CODE

Чтобы перезагрузить окно, нажмите , F1чтобы открыть меню быстрого ввода . Вы должны увидеть раскрывающееся меню, введите , затем выберите Developer: Reload Windowвариант из выпадающего меню.

Чтобы расширить вышеизложенное, вы можете установить несколько линеек и цветов для каждой линейки. Цвет по умолчанию выглядит как «#5a5a5a», и если вы добавите две дополнительные цифры в конец, вы можете настроить его прозрачность, чтобы сделать некоторые линейки более бледными, чем другие.

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

      "editor.rulers": [
    {"column":   0, "color": "#5a5a5a80"}, // left boundary is 50% opaque
    {"column":   2, "color": "#5a5a5a20"}, // tab stops are 12.5% opaque
    {"column":   4, "color": "#5a5a5a20"},
    {"column":   6, "color": "#5a5a5a20"},
    {"column":   8, "color": "#5a5a5a20"},
    {"column":  10, "color": "#5a5a5a20"},
    {"column":  40, "color": "#5a5a5a20"}, // center line
    {"column":  79, "color": "#5a5a5a20"}, // right rule minus one
    {"column":  80, "color": "#5a5a5a80"}, // right rule
    {"column": 120, "color": "#5a5a5a40"}  // extra right rule
],   
  1. Файл -> Настройки -> Настройки или cntrl+,
  2. введите «линейки» и нажмите « Изменить настройки.json».

3. Добавьте значение размера с помощью ',' Как хотите

Вот так (гиф)

Объединение ответов киамлалуно и Марка вместе с formatOnSave в код автоинтента для Python:

{
    "editor.formatOnSave": true,
    "editor.autoIndent": "advanced",
    "editor.detectIndentation": true,
    "files.insertFinalNewline": true,
    "files.trimTrailingWhitespace": true,
    "editor.formatOnPaste": true,
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.snippetSuggestions": "top",
    "editor.rulers": [
        {
            "column": 79,
            "color": "#424142"
        },
        100, // <- a ruler in the default color or as customized at column 0
        {
            "column": 120,
            "color": "#ff0000"
        },
    ],

}

Мне нравится это объяснение . В нем также рассказывается, как установить разные цвета для нескольких линеек.

Перейдите в меню « Файл» -> «Настройки» -> «Настройки» и добавьте

      "editor.rulers": [preferred-value, preferred-value]

Цвет можно настроить в

      workbench.colorCustomizations

если вы используете Flutter, вам нужно отредактировать линейку для дротика, вы перейдете к файлу из команды RUN:%APPDATA%\code\User\settings.json

и установите линейку на 0

как на картинке. настройки.json

Я получил последнюю на сегодня версию VS с кодом "1.83".

Это то, что у меня работает w3schools.

или вы можете сделать это следующим образом:

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

"editor.rulers": [],

Настройте параметры для переопределения для языка [git-commit].

  "[git-commit]": {
    "editor.rulers": [72],
    "workbench.editor.restoreViewState": false
  },
Другие вопросы по тегам