为了充分体现代码的逼格,良好统一的代码风格是必不可少的。而lint工具更是团队规范开发的必备利器。这里我们直接使用最流行的airbnb的lint配置,使用已有的配置比自己一个个查文档去配也方便快捷许多。

airbnb/javascript

介绍:https://github.com/airbnb/javascript
eslint主页: http://eslint.org/

安装lint包

npm install --save-dev eslint-config-airbnb eslint@^2.9.0 eslint-plugin-jsx-a11y@^1.2.0 eslint-plugin-import@^1.7.0 eslint-plugin-react@^5.0.1

添加配置文件

然后直接在项目目录下添加.eslintrc文件就可以了

// Use this file as a starting point for your project's .eslintrc.
// Copy this file, and add rule overrides as needed.
{
  "extends": "airbnb"
}

或者将配置写入package.json里面, airbnb的代码风格居然需要写分号,对于无分号党果断不能忍,于是在rules字段中添加semi: ["error", "never"]覆盖掉了。更多eslint的配置可以参考http://eslint.org/docs/user-guide

{
  //...
  "eslintConfig": {
    "extends": "airbnb",
    "rules": {
      "semi": [
        "error",
        "never"
      ]
    }
  }
  //...
}

编辑器插件

我用的是atom,因为后面还要配flow,所有推荐nuclide facebook全家桶。

安装插件:

apm install linter linter-eslint

一些细节问题

关闭某段代码的eslint

关闭全部规则:

/* eslint-disable */
alert(1) // 一般alert是会提醒的
/* eslint-enable */  //如果整个文件都关闭则不需要最后的enable了

关闭部分规则:

/* eslint-disable no-alert, no-console */

alert('foo');
console.log('bar');

/* eslint-enable no-alert, no-console */

忽略某些目录或文件

使用.eslintignore文件,和.gitignore差不多

全局变量

http://eslint.org/docs/user-guide/configuring#specifying-environments

/* global var1, var2 */

// or

/* global var1:false, var2:false */

// or
{
    "env": {
        "browser": true,
        "node": true
    }
}

airbnb/css

airbnb的css/sass风格: https://github.com/airbnb/css
scss-lint.yml配置文件:https://github.com/airbnb/css/blob/master/.scss-lint.yml

EditorConfig

EditorConfig是一种通用编辑器配置文件,目前主流编辑器和IDE应该都对其有所支持,目的是保持项目的代码风格统一,诸如缩进,最后一行。。。这里直接抄了一个react-boilerplate

更多配置细节请看EditorConfig项目主页: http://editorconfig.org/

root = true

[*]
end_of_line = lf
insert_final_newline = false
indent_style = space
indent_size = 2