liujie2019/Blog

editorconfig和eslint配置

Opened this issue · 0 comments

liujie2019 commented

在使用不同的编辑器，或者在window 或 mac 等不同的系统上编写的代码，会有一定的风格差异，如在window 上默认换行 使用 crlf , 而在 mac 上的换行风格是 lf ; 有的编辑器默认缩进使用 tab , 而有的编辑器使用 space ; 为了统一这些差异， 我们需要使用 editorconfig 来统一规范。

在团队开发中，统一的代码格式是必要的。但是不同开发人员的代码风格不同，代码编辑工具的默认格式也不相同，这样就造成代码的differ。而editorConfig可以帮助开发人员在不同的编辑器和IDE中定义和维护一致的编码风格。本文将详细介绍统一代码风格工具editorConfig。

editorConfig不是什么软件，而是一个名称为.editorconfig的自定义文件。该文件用来定义项目的编码规范，编辑器的行为会与.editorconfig 文件中定义的一致，并且其优先级比编辑器自身的设置要高，这在多人合作开发项目时十分有用而且必要

有些编辑器默认支持editorConfig，如webstorm；而有些编辑器则需要安装editorConfig插件，如ATOM、Sublime、VS Code等

当打开一个文件时，EditorConfig插件会在打开文件的目录和其每一级父目录查找.editorconfig文件，直到有一个配置文件root=true

EditorConfig的配置文件是从上往下读取的并且最近的EditorConfig配置文件会被最先读取. 匹配EditorConfig配置文件中的配置项会按照读取顺序被应用, 所以最近的配置文件中的配置项拥有优先权。

如果.editorconfig文件没有进行某些配置，则使用编辑器默认的设置。

1. editorConfig配置

当多人团队进行一个项目开发时，每个人可能喜欢的编辑器不同，有人喜欢Webstrom、有人喜欢sublime、还有人喜欢Hbuilder。

这个时候，问题便迎面而来，如何使使用不同编辑器的开发者能够轻松惬意的遵守最基本的代码规范呢？

最后终于找到了editorConfig这个东东，发现在这里配置的代码规范规则优先级高于编辑器默认的代码格式化规则。比如我使用的是Webstrom编辑器，我每一次写完代码之后，都习惯性的按下Ctrl+Alt+L快捷键去整理代码格式。如果我没有配置editorconfig，执行的就是编辑器默认的代码格式化规则；如果我已经配置了editorConfig，则按照我设置的规则来，从而忽略浏览器的设置。

什么是EditorConfig？官方介绍：帮助开发人员定义和维护一致性开发风格(coding style)。它可以让代码在各种编辑器和IDE中保持风格一致，当然也可以让不同的队员写一致风格的代码

1.1 常用配置
  1. charset：代码编码方式；
  2. indent_style：缩进方式；
  3. indent_size：缩进大小；
  4. insert_final_newline：是否让文件以空行结束；
  5. trim_trailing_whitespace：自动删除文件末尾空白行；
  6. max_line_length：最大行宽。
1.2 使用方法
  1. 下载与安装编辑器对应的EditorConfig 插件；
  2. 在项目根目录下创建一个名为.editorconfig的文件。
  3. 在.editorconfig文件中配置相应的规范。

其工作原理是：当你在编码时，EditorConfig 插件会去查找当前编辑文件的所在文件夹或其上级文件夹中是否有.editorconfig 文件。如果有，则编辑器的行为会与.editorconfig文件中定义的一致，并且其优先级高于编辑器自身的设置。

1.3 文件语法

editorConfig配置文件需要是UTF-8字符集编码的, 以回车换行或换行作为一行的分隔符。

斜线(/)被用作为一个路径分隔符，井号(#)或分号(;)被用作于注释. 注释需要与注释符号写在同一行。

1.4 通配符
  1. *：匹配除/之外的任意字符串；
  2. **：匹配任意字符串；
  3. ?：匹配任意单个字符；
  4. [name]：匹配name中的任意一个单一字符；
  5. [!name]：匹配不存在name中的任意一个单一字符；
  6. {s1,s2,s3}：匹配给定的字符串中的任意一个(用逗号分隔)；
  7. {num1..num2}：匹配num1到num2之间的任意一个整数, 这里的num1和num2可以为正整数也可以为负整数。
1.5 属性
  • indent_style：设置缩进风格(tab是硬缩进，space为软缩进)；
  • indent_size：用一个整数定义的列数来设置缩进的宽度，如果indent_style为tab，则此属性默认为tab_width；可选值：
    • 整数。一般设置 2 或 4；
    • tab
  • tab_width：用一个整数来设置tab缩进的列数。默认是indent_size；
  • end_of_line：设置换行符格式，值为lf、cr和crlf；一般使用lf。
  • charset：设置文件编码，值为latin1、utf-8、utf-8-bom、utf-16be和utf-16le，一般使用utf-8；
  • trim_trailing_whitespace：是否删除行尾的空格。
  • insert_final_newline：是否在文件的最后插入一个空行；
  • root：表示是最顶层的配置文件，发现设为true时，才会停止查找.editorconfig文件。
1.6 使用EditorConfig

下面的实例中使用4个空格来缩进，并不是说按一下空格会自动打出4个空格来，也不是说要连按4下空格；而是按tab键时，编辑器会自动输出4个空格的宽度，而不是之前默认的制表符(\t)。

使用EditorConfig很简单，在项目根目录放置一个.editorconfig文件，官方的一个示例：

# top-most EditorConfig file
root = true

# 使用Unix-style 换行符，并且每个文件以换行结束
[*]
end_of_line = lf
insert_final_newline = true

# 可以使用通配符匹配多个文件
# 设置默认编码为utf-8
[*.{js,py}]
charset = utf-8

# py文件 4 个空格缩进
[*.py]
indent_style = space
indent_size = 4

#  使用Tab缩进
[Makefile]
indent_style = tab

# lib目录下的js使用2个空格缩进
[lib/**.js]
indent_style = space
indent_size = 2

# 配置 package.json 或 .travis.yml文件 设置其为2个空格缩进
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

上面这个例子，是对js和py代码风格作了定义，看注释应该很容易理解。EditorConfig文件使用INI格式。支持的属性如下：

  1. indent_style：tab为hard-tabs，space为soft-tabs；
  2. indent_size：设置整数表示规定每级缩进的列数和soft-tabs的宽度（译注：空格数）。如果设定为tab，则会使用tab_width的值（如果已指定）；
  3. tab_width：设置整数用于指定替代tab的列数。默认值就是indent_size的值，一般无需指定；
  4. end_of_line：定义换行符，支持lf、cr和crlf；
  5. charset：编码格式，支持latin1、utf-8、utf-8-bom、utf-16be和utf-16le，不建议使用uft-8-bom；
  6. trim_trailing_whitespace：设为true表示会除去换行行首的任意空白字符，false反之；
  7. insert_final_newline：设为true表明使文件以一个空白行结尾，false反之；
  8. root：表明是最顶层的配置文件，发现设为true时，才会停止查找.editorconfig文件。

按照上面配置即可，在IDE中需要开启相应EditorConfig插件，比如`VScode中启用后，即可完成配置。下面是我的配置：

root = true

# 匹配所有文件类型
[*]
# 设置字符编码
charset = utf-8
# 设置缩进格式
indent_style = space
# 使用4个空格缩进
indent_size = 4
# 设置换行格式
end_of_line = lf
# 在文件最后添加一个空行
insert_final_newline = true
# 删除行末尾多余的空格
trim_trailing_whitespace = true

[*.json]
indent_size = 4

# 对后缀名为md的文件生效
[*.md]
trim_trailing_whitespace = false

2. eslint

ESLint是代码约束工具，也可以理解成代码质量工具，JS开发人员可以定义规则，ESLint根据这些规则来检查代码是否符合规范。之前有个工具叫JSLint，我没怎么用过。据说ESLint比JSLint更好用，它适配最新的ES6, ES7等语法。

不管写前端还是写后台代码都有所谓的代码规范，从约束层面上来说，以前只是大家约定了这样的规范，可能还配合使用IDE的自动化格式等工具，但实际上写好还是写坏，是没有检查的。通过ESLint可以让整个团队写出高度一致性，极具美观的代码。

2.1 安装相应的npm包
npm install eslint babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react -D
1.3 在项目中使用eslint
{
    "parser": "babel-eslint",
    "extends": "airbnb",
    "installedESLint": true,
    "plugins": [
        "react",
        "jsx-a11y",
        "import"
    ],
    "rules": {
        // js缩进规则是4个空格
        "indent": ["error", 4],
        // 一行长度最多是150个字符
        "max-len": ["error", 150],
        // jsx的缩进规则是4个空格
        "react/jsx-indent": ["error", 4],
        // jsx文件可以是.js或.jsx后缀
        "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }],
        "react/jsx-indent-props": ["error", 4]
    }

特别注意：这里的4个空格，其实我实际是用tab来完成缩进，而不是按4下空格，所以上面的EditorConfig就可以帮上大忙了。如果不用EditorConfig，那么ESLint会警告你使用了Tab，破坏了规则。

参考博文

  1. 统一代码风格工具——editorConfig
  2. EditorConfig
  3. EditorConfig 介绍
  4. eslint + editorconfig
  5. 我是如何在公司项目中使用ESLint来提升代码质量的
  6. js代码规范之Eslint安装与配置