Tooth

多人协作时时常会出现你爱 Tab 他爱空格,你缩进 2 个字符,他爱 4 个字符的问题,还有换行符乱码、文章末尾空行……

不同编辑器的对缩进处理方法迥异,如何解决?前辈们已经找到了解决方案 EditorConfig,如何用好这个方案,就是今天想聊的话题。

一、代码风格指的的哪些内容
0. 编码
如今 UTF-8 已成互联网的事实标准,建议采用 UTF-8。推荐一篇非常好有关字符编码文章 理解字符编码

  1. 代码缩进
    有些语言是强制缩进,例如 Python 强制 4 个空格缩进。

  2. 换行符
    不同操作系统的换行符采用不同的编码风格,这可能导致隐形 bug,Linux上创建的文件在Windows上打开时,结果所有内容会挤成一行。而Windows上创建的文件在Linux上打开时,每一行的结尾又多了一个奇怪字符 ^M。想深入了解,可以阅读 知无涯之回车换行的故事

    1
    2
    3
    4
    # 不同操作系统换行符采用的编码
    LF:在Unix或Unix相容系統(GNU/Linux,AIX,Xenix,Mac OS X,...)、BeOS、Amiga、RISC OS
    CR+LF:MS-DOS、微軟視窗作業系統(Microsoft Windows)、大部分非Unix的系統
    CR:Apple II家族,Mac OS至版本9
  3. 结尾空行

    一些早期的工具(编辑器/解释器/终端……等)会错误地认为:如果一个文件的结尾不是新行(没有回车或换行符)那么它读取到的内容不是正常结束,而是使用 ^Z(即 EOF Mark)结束的。这会导致这些工具不能正常工作。

    结尾空行可以避免合并文件时,没有换行导致的错误,所以建议末尾保留空行。

二、如何保证代码风格一致
能够影响代码风格的配置:

  1. 每个人书写代码习惯的影响
  2. 项目中 EditorConfig 配置
  3. 编辑器相关设置
  4. 格式化代码工具如:beautify
  5. 代码风格检查工具,如:JSLint

人是不可靠的,最好还是通过软件的控制来避免代码格式混乱的问题,那么我们首先考虑下我们需要的格式规范。以下罗列我期望的格式:

1
2
3
4
编码:UTF-8
换行符:LF
代码缩进:space
结尾空行:保留空行

为什么优先采用空格缩进?
其实,写了个项目缩进采用 Tab 感觉还不错,会发现有时对齐困难,需要借助 Space 对齐。
当写 Coffee JS 时,从别处粘贴的代码由于采用的是空格,会发现运行错误。网上查了很多资料,还是统一采用 Space 更简单粗暴,几乎所有编辑器都有 softTab 功能,及将 Tab 自动转换为空格使用。

三、落实代码风格方案

  1. 配置 .editorconfig
    每个项目,从开始建立,就需要配置 .editorconfig 文件。
    EditorConfig配置文件从上往下读取,并且路径最近的文件最后被读取。匹配的配置属性按照属性应用在代码上,所以最接近代码文件的属性优先级最高。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    root = true
    [*]
    charset = utf-8
    end_of_line = lf
    insert_final_newline = true
    trim_trailing_whitespace = true
    [*]
    indent_style = space
    indent_size = 2
    [*.md]
    trim_trailing_whitespace = false
    [*.py]
    indent_style = space
    indent_size = 4
  2. 配置编辑器
    例如,目前所用编辑器 VSCode

    1
    2
    3
    4
    5
    6
    7
    {
    "files.encoding": "utf8",
    "files.eol": "\n",
    "files.insertFinalNewline": true,
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    }
  3. 配置代码格式化工具 beautify

    1
    2
    3
    4
    "beautify.config": {
    "indent_size": 2,
    "indent_char": " "
    }
  4. 代码检查工具
    暂时,我没有设置,如有需要只需看文档自行配置。

四、最后
我在编辑器是打开 "editor.renderWhitespace": "all" 选项的,这样可以方便查看文件的缩进风格。

所有的工具只是提供方便,关键其实在第一条,只要「人」能对自己要求严格点,与团队保持统一,那么代码风格问题就能迎刃而解。

参考资料