关于ReactNative如何配置ESLint，Prettier，Pre-commit Hook

ESLint

ESLint 是一个按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码风格，这对公司团队开发非常实用。

安装

1.全局安装

如果你想使用ESLint适用于你所有的项目，建议全局安装ESLint

npm i -g eslint

初始化配置文件

./node_modules/.bin/eslint --init

2.局部安装

单个项目使用

npm i -D eslint

初始化配置文件

eslint --inint

3.安装步骤

至此，安装完成。

配置

指定执行环境

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

指定全局变量

• 使用注释来配置

/* global __DEV__, fetch */
/* global __DEV__:true, fetch:true */

• 使用配置文件来配置

"globals": {
    "__DEV__": true,
    "fetch": true
  },

规则

规则等级有三种：

• "off"或者0： 关闭规则
• "warn"或者1： 打开规则，作为警告。
• "error"或者2： 打开规则，作为错误。

例如：

• 使用注释来配置

/* eslint no-console: "off", no-undef: "error" */
/* eslint no-console: 0, no-undef: 2 */

• 使用配置文件来配置

"rules": {
    "no-console": "off",
    "no-undef": "off",
    "no-useless-constructor": "off",
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": true,
        "optionalDependencies": false,
        "peerDependencies": false
      }
    ],
    "react/jsx-filename-extension": "off"
  }

当然，也可以在注释中关闭规则

/* eslint-disable */
/* eslint-enable */

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

使用方法

在package.json文件中加入以下代码

"scripts": {
    "lint": "eslint --ext .js ./src --fix",
}

命令行工具下执行yarn run lint, 即会检测代码。

Prettier

Prettier是代码格式化工具，能够统一个人或者团队的代码风格。

安装

npm i -D prettier

配置

在工程根目录下创建.prettierrc.js文件，

module.exports = {
  printWidth: 120, // 换行字符串阈值
  semi: true, // 句末加分号
  singleQuote: true, // 用单引号
  trailingComma: 'none', // 最后一个对象元素加逗号
  bracketSpacing: true, // 对象，数组加空格
  jsxBracketSameLine: false, // jsx > 是否另起一行
  arrowParens: 'avoid', // (x) => {} 是否要有小括号
  requirePragma: false, // 是否要注释来决定是否格式化代码
  proseWrap: 'preserve' // 是否要换行
};

插件

npm i -D eslint eslint-config-prettier eslint-plugin-prettier

配置.eslintrc.json

"extends": ["airbnb", "prettier", "plugin:prettier/recommended"],
"plugins": ["react", "prettier"],

使用方法

在package.json文件中加入以下代码

"scripts": {
  "prettier": "prettier --write src/**/*.js"
}

在命令行工具下执行 prettier --write src/**/*.js, src对应的是你文件夹

Pre-commit Hook

Pre-commit Hook是在Git提交之前用来检查待提交代码是否有错误的工具。

安装

npm i -D husky lint-staged pretty-quick

配置

在package.json文件中加入以下代码

 "scripts": {
    "precommit": "pretty-quick --staged",
  },
  "lint-staged": {
    "*.{js,json,md}": [
      "prettier --write",
      "git add"
    ],
    "*.js": [
      "yarn lint --fix",
      "git add"
    ]
  },

使用

使用Git提交代码的时候，会自动检测代码并进行格式化，如何有错误会终止push

VSCode

• 安装ESLint Prettier插件
• 在设置中添加

"editor.formatOnSave": true,
"javascript.format.enable": false,
"prettier.eslintIntegration": true

当你保存时会自动修复一些空格缩进、单双引号及句末是否加;的错误，但是你变量未声明等错误需要手动去修复。

效果图

写在最后

刚开始使用ESLint的时候，你可能会遇到各种各样的红色波浪线错误。不要觉得莫名其妙，这说明你的代码规范有很多值得去补充修正的地方，好好去弄明白eslint中的规则，形成良好的代码风格，这不管是对个人还是团队而言都是值得使用的。