缩进与换行

用空格好还是 TAB 好?4个空格还是2个空格好?这是永远的圣战,累觉不爱,本文档不做详细说明。

但是无论如何,项目中应该保持统一的缩进风格,以利于代码的阅读,同时可以避免在 git 等版本管理工具中造
成冗余的 diff 信息,而且千万不要空格和制表符(TAB)混用。

本文档规定:

  • 使用2个空格缩进。
  • 使用 Unix 风格换行符(LF)
    保证跨平台的一致性,更多

  • 删除行尾多余的空格
    因为这些空格通常是不必要的(JSHint 中会通过 trailing 来检测是否存在多余的空格)。

  • 文件末尾增加一个空行
    没有空行在合并多个文件时可能会把上一个文件的最后一行与下一个文件的第一行合并为一行,特别是,JS 中如果没有这个空行而恰巧末尾没有写分号,整个文件可能就会报错了。

    扩展阅读:

1. 如何保证统一的缩进风格?

Sublime Text 在新建工程的时候会生成 xxx.sumlime-project 文件,可以配置一些基本缩进和排除目录等,但遗憾的是无法与其他编辑器通用。

cube.css 中的示例:

  1. {
  2. "folders": [{
  3. "path": ".",
  4. "folder_exclude_patterns": ["node_modules", "_site"] // 排除目录
  5. }],
  6. "settings": {
  7. "tab_size": 4,
  8. "translate_tabs_to_spaces": true, // tab 转换为空格
  9. "ensure_newline_at_eof_on_save": true, // 保存时文件末尾自动增加一个空行
  10. "trim_trailing_white_space_on_save": true // 删除行尾多余的空格
  11. }
  12. }

EditorConfig 是一个帮助开发者在不同的编辑器中保持统一编码
风格的插件,支持了大部分流行的编辑器。它包括两部分:代码风格规则定义(.editorconfig 文件)和支持此规则的编辑器插件。

2. 快速开始

  1. 在项目根目录新建一个 .editorconfig 文件,保存为 utf-8 格式。Windows 用户由于无法直接新建一个只有扩展名的文件,新建的时候在末尾多加一个点 即可(.editorconfig. ),也可以在命令行(CMD)中使用 echo.>.editorconfig 来创建。
    Windows 中创建 .editorconfig 文件示例

  2. 编辑 .editorconfig 文件

    1. # css-creating coding style
    2. root = true
    3. # 为所有文件设置风格
    4. [*]
    5. charset = utf-8
    6. indent_style = space
    7. indent_size = 2
    8. end_of_line = lf
    9. trim_trailing_whitespace = true
    10. insert_final_newline = true
    11. # 为 Markdown 文件保留行尾空格
    12. [*.md]
    13. trim_trailing_whitespace = false
    14. 匹配多种类型的文件(逗号前后不能有空格)
    15. [*.{css,scss,sass}]
    16. indent_size = 2
    17. # 匹配多个指定的文件(逗号前后不能有空格)
    18. [{package.json,.travis.yml}]
    19. indent_style = space
    20. indent_size = 2
  3. 安装编辑器插件





































缩进与换行 - 图2
AppCode




缩进与换行 - 图3
Atom




缩进与换行 - 图4
Brackets




缩进与换行 - 图5
Code::Block




缩进与换行 - 图6
Emacs




缩进与换行 - 图7
Geany




缩进与换行 - 图8
Gedit




缩进与换行 - 图9
GitHub




缩进与换行 - 图10
inteltdJ




缩进与换行 - 图11
jEdit




缩进与换行 - 图12
Notepad++




缩进与换行 - 图13
PHPStorm




缩进与换行 - 图14
PyCharm




缩进与换行 - 图15
RubyMine




缩进与换行 - 图16
Subtdme Text




缩进与换行 - 图17
TextMate




缩进与换行 - 图18
Vim




缩进与换行 - 图19
Visual Studio




缩进与换行 - 图20
WebStorm


3. EditorConfig 文档

  1. 通配符规则:

    * 匹配任意字符串,但不包括 /

    ** 匹配任何字符串

    ? 匹配任何单字符

    [name] 匹配任何括号中的单字符

    [!name] 匹配任何非括号中的单字符

    {s1,s2,s3} 匹配任何给出的多个字符串

    说明:

    • [] 匹配规则是从当前目录算起。
    • ? 只能匹配且必须有类似 f1.js、f2.js、f12.js 的文件,通过f??.js只能匹配到 f12.js,而f**.js可以匹配到所有。
    • {s1,s2,s3} 之间不能有空格。{f1.js, f2.js, f3.js} 无法匹配f2.jsf3.js
    • *** 可以匹配空字符串,例如 f*.js 可以匹配到 f.js
    • 多个匹配之间的规则如果不冲突是可以合并的。
    • 优先级问题,如果两个匹配所定义的规则冲突,则会以最靠近打开文件的`.editorconfig文件为准。
      如果同一个文件中匹配定义冲突,则会以最后定义的为准。所以在定义规则的时候,须先定义通用规则,后定义特殊规则。
  2. 属性规则(所有属性不区分大小写)

属性 说明
root true, false 设置是否是当前项目的根目录
indent_style tab, space 设置缩进格式
indent_size number 设置缩进大小
tab_width number 设置 tab 表示的空格数,默认等于indent_size,无需设定
end_of_line lf(Unix \n), cr(Mac OS \r), crlf(Windows \r\n) 设置行尾换行符格式
charset atin1, utf-8, utf-8-bom, utf-16be, utf-16le 等 设置字符编码
trim_trailing_whitespace true, false 设置是否自动删除行尾多余空格
insert_final_newline true, false 设置是否在保存文件时自动在行尾插入空行