React-native ESLint & Airbnb 配置

1.jpg

新建项目的时候必然要进入代码编写格式,特别是团队开发,每个人的编码习惯不同,一旦发生读别人代码这种"美好"的事情时,避免不了的尴尬.那么代码规范就尤其重要.
在开发react-native加入Eslint来规范代码是比较不错的事情

2.png

Step 1:

新建项目
react-native init newProject

安装eslint
npm install --save-dev eslint

Step 2:

执行
eslint --init

之后会出现让选项界面,通过上下按键去选择.
笔者建议:
ESLint 风格选 Use a popular style guide
遵循哪个标准选 Airbnb
配置文件格式选 JSON 或 JavaScript
是否支持 React 选 y

Step 3:

会在项目根目录生成一个名为 .eslintrc.js 的配置文件.更改如下:

{
  "extends": "airbnb",
  "plugins": [
    "react",
    "react-native"
  ],
  "globals": {
    "__DEV__": true,
    "fetch": true
  },
  "parser": "babel-eslint",
  "rules": {
    "max-len": ["error", 120],
    "no-console": 0,
    "react/forbid-prop-types": [0, { "forbid": ["any", "array", "object"] }],
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
  }
}

Step 4:

在根目录的 package.json文件下修改如下:

"scripts": {
  "start": "node node_modules/react-native/local-cli/cli.js start",
+  "lint": "eslint --ext .js ./src --fix"
}

Step 5:

根目录下运行:
npm run lint