统一风格工具.editorConfig文件


1、问题:改一个别人的项目时发现自己配置的格式化规则被覆盖了,找了半天发现是editorConfig的锅

2、原因:一个名称为.editorconfig的自定义文件覆盖了VSCode。该文件用来定义项目的编码规范,编辑器的行为会与.editorconfig 文件中定义的一致,并且其优先级比编辑器自身的设置要高

3、深究:那editorConfig跟eslint有什么区别呢 于是查了一下

3-1、EditorConfig 概述

EditorConfig有助于维护跨多个编辑器和IDE从事同一项目的多个开发人员的一致编码风格。在使用不同的编辑器上编写的代码,会有一定的风格差异 ; 有的编辑器默认缩进使用 tab , 而有的编辑器使用 space ; 为了统一这些差异, 我们需要使用 editorconfig 来统一规范;EditorConfig项目包含一个用于定义编码样式的文件格式和一个文本编辑器插件集合,这些文本编辑器插件使编辑器可以读取文件格式并遵循定义的样式。EditorConfig文件易于阅读,并且可以与版本控制系统很好地协同工作。

3-2、Eslint 概述

Eslint 是 js 的代码检查工具, 在编写js代码的时候,有些错误很难被发现,需要在运行的时候不断的排错; 而且每个人的编写代码的风格不一致,这样造成了阅读对方代码的困难;因此我们需要eslint在编写的过程发现错误,并统一风格;

3-3、EditorConfig 和 Eslint 的关系

两者都可以对代码风格进行控制,侧重点稍有点不同,EditorConfig更偏向于代码风格,定义和维护一致的编码风格。
Eslint侧重于帮助我们检查Javascript编程的语法错误。
Eslint 和 .editorconfig 并不冲突,同时配合使用可以使代码风格更加优雅。

4、总结:

eslinr是偏向检查Javascript编程的语法错误。editorConfig就是编辑器规范,多套编辑器 可以是使用同一套 config的规则,偏向于规范不同编辑器开发时的代码风格,比如我喜欢用VSCode,而同事喜欢用Sublime Text,不同编辑器上规则风格有一定差异,这时就用到editorConfig去统一规范代码风格。

5、editorConfig的使用

在根目录下面创建一个名为.editorconfig的文件,然后在里面配置(这里只是一些简单的配置,更详细的去官网:https://editorconfig.org/)

 root = true                         # 根目录的配置文件,编辑器会由当前目录向上查找,如果找到 `roor = true` 的文件,则不再查找

  [*]                                 # 匹配所有的文件
  indent_style = space                # 缩进类型:space, tab
  indent_size = 4                     # 缩进数量:1.整数:一般设置 2 或 4; 2.tab
  end_of_line = lf                    # 文件换行符格式(Unix,DOS,Mac):lf(一般用这个),crlf,cr
  charset = utf-8                     # 文件字符编码:latin1,utf-8,utf-16be,utf-16le
  trim_trailing_whitespace = true     # 行末尾是否允许空格:true不允许
  insert_final_newline = true         # 是否在文件的最后插入一个空行:truefalse
  curly_bracket_next_line = false     # 大括号不另起一行
  spaces_around_operators = true      # 运算符两遍都有空格
  indent_brace_style = 1tbs           # 条件语句格式是 1tbs

  [*.md]
  [Makefile]
  indent_style = tab

  [*.js]                              # 对所有的 js 文件生效
  quote_type = single                 # 字符串使用单引号

  [lib/**.js]                         # 对lib目录下所有的 js 文件生效
  indent_style = space
  indent_size = 2

  [*.{html,less,css,json}]            # 对所有 html, less, css, json 文件生效
  quote_type = double                 # 字符串使用双引号

  [package.json]                      # 对 package.json 生效
  indent_size = 2                     # 使用2个空格缩进