在react开发中如何在atom中使用Airbnb风格的eslint来约束代码？

Question

请问在react开发中如何在atom中使用Airbnb风格的eslint来约束代码？
在网上查了一些资料，但是都不太全面，最终也没有配置成功。
目标：
1、使用Airbnb风格的代码
2、违反约束的代码在atom中有警告标示
3、在保存时自动格式化代码，起到一定成的的规范作用
4、合理的补充.eslintrc中的rules
请有经验的朋友帮忙指点一下！谢谢！！！

Answer 1

目前我是使用下面的配置，参考一下吧，但有可能有些套件不一定需要。
我有用flow、eslint(airbnb base+react)
一个额外规则: 不用分号作为语句结尾风格

至于保存时自动格式，我是用atom的这两套，平常时候我是手动排版的，用到的机会不多，有时候会排得不是很理想:

atom-beautify
prettier-atom

package.json

"devDependencies": {
    "babel-core": "^6.18.2",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.2.7",
    "babel-plugin-transform-flow-strip-types": "^6.18.0",
    "babel-polyfill": "^6.16.0",
    "babel-preset-latest": "^6.16.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-stage-0": "^6.16.0",
    "eslint": "^3.11.1",
    "eslint-config-airbnb-base": "^10.0.1",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-react": "^6.10.2",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.3",
    "redux": "^3.6.0"
  }

.babelrc

{
  "presets": [
    "latest",
    "stage-0",
    "react"
  ],
  "plugins": [
    "transform-flow-strip-types"
  ]
}

.eslintrc

{
  "parser": "babel-eslint",
  "extends": "airbnb-base",
  "rules": {
    "semi": ["error", "never"],
    "react/jsx-uses-vars": [2] 
  },
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true, 
      "experimentalObjectRestSpread": true
    }
  },
  "env": {
    "browser": true,
    "node": true
  },
  "plugins": [
    "import",
    "react" 
  ]
}