一招让你成为前端大牛

本文要介绍开发人员两大利器，一招让你成为大牛

EditorConfig

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

使用EditorConfig

使用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格式。支持的属性如下：

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

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

root = true

[*]
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 4

内容很简单，就是所有文件缩进是4个空格，文件末插入一个换行，换行符是lf。我们再来介绍ESLint。

ESLint

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

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

使用ESLint

进入项目目录后，执行

npm install eslint --save

使用npm安装，很简单，当然也可以把eslint装在全局环境中，因为我们的项目中使用了class property等特性，所以需要配合babel-eslint来使用

npm install babel-eslint --save

然后在目录下执行

./node_modules/eslint/bin/eslint.js --init

会提示你选择把ESLint当作代码风格检查，还是用于代码审查。选择前者会提示你采用哪种代码风格，你可以选用airbnb (你不会不知道airbnb吧？)。选择后，它会安装eslint-config-airbnb, eslint-plugin-import, eslint-plugin-jsx-a11y, eslint-plugin-react这几个包。命令执行完成后，会在根目录生成.eslintrc.*文件，这个文件可能是json或yml格式，看你选择了。

至此ESLint要准备的工作已OK，实际在项目中还要配置一下.eslintrc.*文件。下面是我们公司的一个示例：

{
    "parser": "babel-eslint",
    "extends": "airbnb",
    "installedESLint": true,
    "plugins": [
        "react",
        "jsx-a11y",
        "import"
    ],
    "rules": {
        "indent": ["error", 4],
        "max-len": ["error", 150],
        "react/jsx-indent": ["error", 4],
        "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }],
        "react/jsx-indent-props": ["error", 4]
    }
}

里面定义了很多rules，各个plugin或者extends也都定义了一堆规则来做代码约束。写在项目.eslintrc.*文件里的规则会覆盖继承下来的。

上面的规则意思就是js缩进规则是4个空格，一行长度最多是150个字符，jsx的缩进规则是4个空格，jsx文件可以是.js或.jsx后缀等，我这里主要覆盖了缩进规则，我喜欢4个空格。

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

配置好这些后，打开js文件，你会发现一片红色提醒……说明我们写的代码不符合airbnb规范啊……不过这之后，你就可以根据提示做代码修改了，我相信你坚持按这些原则来写，你的代码质量会越来越高。

总结

有人可能会怀疑用这两个东西，难道就是大牛了么，实话我只能说你离大牛更近一步了。成为大牛的一个标准就是写可读性强的代码，所以，你还不快点用起来？早日成为大牛！

欢迎大家加我微信：Shannonisme，和我沟通

一招让你成为前端大牛

EditorConfig

使用EditorConfig

ESLint

使用ESLint

总结

你可能感兴趣的:(一招让你成为前端大牛)