VS Code - 垂直标尺让代码更美观？

VS Code 中的垂直标尺是什么？

在 VS Code 中，垂直标尺是一个静态的、可自定义的设计元素，它为代码提供一个非强制的右侧边界，这意味着它不会自动换行。

与 Word、Illustrator 或其他设计/编辑软件不同，此垂直标尺并非用于测量。

如上例所示，文本不受标尺影响。

为什么？

使用垂直标尺可以轻松地使代码更易读，避免代码过宽。

某些语言（例如 Python 或 Drupal）对每行字符数有限制（Python 为 79 个字符）。

而其他一些语言，例如 Javascript，虽然有一套非常宽松的规则，但并没有规定每行字符数的最大限制。

如何

从2020 年 2 月版开始，VS Code 中提供了颜色和多个垂直标尺。

步骤 1 - 打开settings.json

• Mac：按Shift Command P
• 非 macOS 系统：按Ctrl P

这将打开文件搜索功能。

输入settings.json并选择要编辑的文件。

步骤 2 - 将以下内容添加到 json 对象的最后一行：

"editor.rulers": [
   {
     "column": 80,    // spacing of 1st column from left
     "color": "#ff9900"   // orange, Go Vols!
   },
     100,  // 2nd ruler with no color option
   {
    "column": 120,      // third ruler
    "color": "#9f0af5"  // purple, go Pirates! 
   },
],

上述实现与语言无关，并成为默认的“始终开启”标尺。可以同时使用默认标尺和特定语言的标尺。

如果要使用特定语言，请将方括号“[ ]”中的语言名称更改为您首选的语言：

  "[ruby]": {
        "editor.rulers": [
            {
                "column": 100,
                "color": "#00ff22"
            }
        ]
    }

每种语言添加一个。

步骤 3 - 享受易读的代码

请务必保存更改并尽情享用。

反馈？

对于上述实现或其他有用的 VS Code 设置，您有什么想法或建议吗？

如果可以的话，请留言。我很想听听你的例子、解释和其他细节，以便弄清楚如何/为什么/何时发生这种情况。

资源

2020 年 2 月 VS Code 功能。MDN
JavaScript 指南
Python 风格指南 - PEP8