添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
Skip to main content

VSCode 中的显示换行和格式化换行

wKevin

VSCode 中换行分 2 个方面来说:

  • 显示换行:用户的文档中并不真的有 \r\n 这些换行字符,而只是看到被换行了。
  • 格式化换行:用户执行格式化命令( Ctrl-Shift-F 右鍵-formate... F1-formate... )时 VSCode 或扩展在文档中指定位置插入 \r\n 之类的字符。
  • 来看看 VSCode 中是如何配置这两种换行的。

    显示换行(Word Wrap)

    Settings 中搜索关键字 wrodwrap

    Editor:Word Wrap 有 4 个选项

  • off: 不换行显示
  • on: 在窗口边缘换行显示
  • wordWrapColumn: 用 Editor: Word Wrap Column 配置项中指定的数字处换行显示
  • bounded: 取 2、3 的最小值处换行显示
  • 另外,编辑过程中可以使用快捷键 Alt-z 随时在 1 与 2/3/4 之间切换,算是个总的切换开关。

    希望针对某类型文件做特定设置,需要在关键字中输入: @lang:... wordwrap ,比如 markdown

    Word Wrap Word Wrap Column 都可以单独配置。

    最终写入 settings.json 中的内容形如:

      "editor.wordWrap": "wordWrapColumn",
    "editor.wordWrapColumn": 88
    "[markdown]": {
    "editor.wordWrap": "on",
    },
    "[typescript]": {
    "editor.wordWrap": "bounded"
    },

    我比较顺手的配置是

      "editor.wordWrap": "off",

    哈哈,因为 Alt-z 我感觉已经完全够用了。

    格式化换行(Format line width)

    这个主要就是各家扩展对某个特定语言的特定功能了,除了 Prettier 之外,我还很少见到其他扩展敢生成完美的格式化多种编程语言。

    各个扩展格式化的规则也经常在变,这里只能列举当前的一部分情况,大概率过不久就失效了。

    扩展安装后会注册为某种或某些文件(语言)的 formatter,此时 F1 -- Format Document 就可以使用,如果某个语言(文件后缀)被发现注册了多个 formatter,则会出现 Format Document with...

    用户就可以选 择一个,还可以设置默认的 formatter,下次 Save 的时候默认执行。

    但格式化换行是个危险操作,或者说至少很多人会认为是个扰民操作:凭啥替我加换行?

    所以很多语言 formatter 是不做主动添加换行操作的,只会在用户换行后做对齐操作。

    比如下面一段 go 代码:

    	return append(tes,
    TestEntity{1, "Entity1", "PC"},
    TestEntity{2, "Entity2", "MBP"},
    TestEntity{3, "Entity3", "OPPO"},
    )

    如果使用微软官方的 go 扩展, 无论怎么设置都不会自动变成一行的,除非用户自己操作,然后扩展才会接手做一些对齐操作:

    	return append(tes, TestEntity{1, "Entity1", "PC"}, TestEntity{2, "Entity2", "MBP"}, TestEntity{3, "Entity3", "OPPO"})

    又或者下面一段 ts:

      router.getRoutes().forEach((val) => {
    if (val.name === _dr) {
    activeMenuIcon.value = val.meta.icon as string
    }
    })

    微软官方的 typescript 或 VUE 官方的 volar 等扩展都不会自动帮你换行,除非你自己添加了换行,然后它们就帮你对齐,如:

      router
    .getRoutes()
    .forEach((val) => {
    if (val.name === _dr) {
    activeMenuIcon.value = val.meta.icon as string
    }
    })

    但某些确定有歧义的地方,扩展也能帮你在换行方面纠正过来,比如:

    const onclickMinimise = () => 
    {
    WindowMinimise()
    }

    volar 就可以自动帮你删去换行,变成:

    const onclickMinimise = () => {
    WindowMinimise()
    }

    总之,格式化换行是扩展都会很谨慎操作的,列个 Formatter 的表格,积累一下:

    Formatter md C/C++ python go ts vue(html+js/ts+css)
    Prettier
    MS-C 不断行
    MS-python 靠扩展
    MS-go 不断行
    MS-ts/js 不断行
    volar <template> 部分 "html.format.wrapLineLength"
    其他部分不断行

    不断行:意思就是不主动帮用户做插入 \r\n 操作。

    所以其实除了会对 html、xml 等标签类文本的 formatter 会主动断行外,好像都会保持缄默。以前记得有些 formatter 会对函数入参比较多的时候进行断行,忘了是哪个扩展了。

    靠扩展:意思是自己不做断行,交给另外的扩展

    MS-python 可以使用的扩展有:Settings -- python formatting provider:

  • autopep8:默认的
  • yapf:非常权威的
  • black:后起之秀,需要自己安装 pip install black —— 我个人将其设置为默认了。
  • 3 个 formatter 的 provider,各自断行的参数也不同:

    // settings.json
    {
    "python.formatting.provider": "black",
    "python.formatting.blackArgs": ["--line-length=180"],
    "python.formatting.autopep8Args": ["--max-line-length=180"]
    }