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

May 19, 2022

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	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"]
}

最后还得提醒，volar 的这种自动断行的行为是有风险的，比如：

            <td>{{ DateTime.fromSeconds(log.timestamp).toFormat('yyyy-MM-dd HH: MM: ss') }}</td>

当我 "html.format.wrapLineLength": 80 的时候，就会被 volar 断成这样：

            <td>{{ DateTime.fromSeconds(log.timestamp).toFormat('yyyy-MM-dd
            HH: MM: ss') }}</td>

显示换行(Word Wrap)​

格式化换行(Format line width)​

显示换行(Word Wrap)

格式化换行(Format line width)