React-Native配置ESLint，Prettier，Pre-commit Hook。

[syanbo]

ESLint 可以对你代码进行检查
Prettier 代码格式化工具，能够统一你或者团队的代码风格（酷爱）
Pre-commit Hook 在代码进行Git提交的时候进行格式化，如果有错误并终止push

准备开始安装各种包

yarn add -D babel-eslint eslint eslint-config-prettier eslint-config-react-app eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-flowtype eslint-plugin-prettier eslint-plugin-react husky lint-staged pretty-quick prettier

添加.eslintrc文件

{
  "extends": ["react-app", "plugin:prettier/recommended"],
  "rules": {
    "no-undef": 0,
    "no-useless-constructor": 0
  }
}

具体的rules规则可以根据各自喜好添加

添加scripts配置命令

"scripts": {
  "precommit": "pretty-quick --staged"
}

在package.json中添加Prettier配置根据自己喜好

  "prettier": {
    "singleQuote": true
  }

如果你是后面加入的Prettier需要对整个项目.js 文件进行格式化

你可以执行命令 prettier --write src/**/*.js src对应你的文件夹

WebStorm

• 开启ESLint
• WebStorm 2018.1 版本预先集成了Prettier快捷键Alt-Shift-Ctrl-P具体在设置搜索Prettier可以找到
• 低版本可以添加 Tools Preferences | Tools | File Watchers and click + to add a new watcher. 然后进行快捷键绑定 传送到官网

VSCode

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

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