React Native ESLint配置

ESLint是一个JavaScript代码静态检查工具
官网

作用

• check syntax 语法检查
• find problems 发现问题
• enforce code style 强制代码风格

安装

npm install eslint --save-dev
–save直接依赖 -dev指开发环境进行依赖
会自动写入到package.json的devDependencies节点

RN项目

可以手动在package.json中进行配置，然后执行npm install

"babel-eslint": "^10.0.1",
"eslint": "^5.14.1",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",

使用/配置

规则设定

在根目录创建.eslintrc.js文件，其中rules节点调整规则

module.exports = {
  parser:'babel-eslint',
  env: {
    browser: true,
    es6: true,
  },
  extends: 'airbnb',
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  plugins: [
    'react',
  ],
  rules: {
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],//在JS文件中允许存在JSX语法
    "global-require":"off",//image指定source时要用require语句
    "indent":["error",4],//缩进规则为4个空格
    "react/jsx-indent":["error",4],//缩进规则为4个空格
    "react/jsx-indent-props":["error",4],//缩进规则为4个空格
    "react/prop-types":["error",{"ignore":["tintColor","navigation"]}],
    "react/no-multi-comp":["error",{"ignoreStateless":true}],
    "react/prefer-stateless-function":["error",{"ignorePureComponents":true}],
    "max-len" : ["error", {code : 100}]
  },
};

忽略检测的文件

在根目录创建 .eslintignore文件，配置不进行eslint检测的文件

__tests__/*.*
babel.config.js
/scripts/

还有一种动态忽略的方法
在文件头部声明/* eslint-disable */忽略某个文件的eslint检测
或者在某一行js代码上添加 // eslint-disable-next-line 忽略某一行代码的eslint检测

执行检查

• 检查某个文件：npx eslint [文件名，文件夹等]
  示例：
  检查单个文件：npx eslint ./src/app.js
  检查某个文件夹：npx eslint ./src

• 检查并修复
  npx eslint ./src/app.js --fix

–fix可以帮助我们修复一些缩进，空格，引号等提示的错误