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

零崎莲实
  • 683

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

回复
阅读 3k
1 个回答
eyesofkids
  • 3.7k

目前我是使用下面的配置,参考一下吧,但有可能有些套件不一定需要。
我有用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" 
  ]
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏