React Native Quality Config

This project contains basic linter rulesets for React Native 0.70.+ projects created with react-native-cli and react-native-template-typescript.

Important note

These linter rulesets will work if you will have a src directory under your project directory, and all of your typescript source files will be hosted there.

Versioning

Versioning follows React Native versioning, meaning the major versions should match. E.g.: @team-supercharge/[email protected] is compatible with [email protected]

Initial setup

Install this package as a dev dependency:

npm install --save-dev @team-supercharge/react-native-quality-config

Eslint setup

We use Eslint to lint the source code in our projects.

Replace the .eslintrc.js configuration file with the following:

module.exports = {
  extends: './node_modules/@team-supercharge/react-native-quality-config/.eslintrc.js',
};

Usage in package.json:

"scripts": {
  "lint:code": "eslint src --ext .ts,.tsx",
  "lint:code:fix": "eslint src --ext .ts,.tsx --fix"
}

Prettier setup

We use Prettier to format the source code in our projects.

Replace the .prettierrc.js configuration file with the following:

module.exports = {
  ...require('./node_modules/@team-supercharge/react-native-quality-config/.prettierrc.js'),
};

Usage in package.json:

"scripts": {
  "lint:style": "prettier --config .prettierrc.js --check './src/**/*.{ts,tsx,json}'",
  "lint:style:fix": "prettier --config .prettierrc.js --write './src/**/*.{ts,tsx,json}'"
},

VSCode setup

We prefer Visual Studio Code as our code editor for React Native projects.

To be able to have auto-formatting when saving a source file, the following change need to be made.

Run cp -R node_modules/@team-supercharge/react-native-quality-config/vscode .vscode to create the VSCode workspace settings file in your project root. This will also create the recommended extensions settings file.

Alternatively you can manually create the .vscode/settings.json file with the following content:

{
    "editor.tabSize": 2,
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
      "source.fixAll": true,
    },
    "[javascript]": {
      "editor.formatOnSave": true
    },
    "[typescript]": {
      "editor.formatOnSave": true
    },
    "[javascriptreact]": {
      "editor.formatOnSave": true
    },
    "[typescriptreact]": {
      "editor.formatOnSave": true
    },
    "[json]": {
      "editor.formatOnSave": true
    },
    "typescript.tsdk": "node_modules/typescript/lib",
  }

To suggest developers to install the recommended plugins, the following change need to be made.

Create the .vscode/extensions.json file with the following content:

{
    "recommendations": [
      "esbenp.prettier-vscode",
      "dbaeumer.vscode-eslint",
    ],
    "unwantedRecommendations": ["ms-vscode.vscode-typescript-tslint-plugin"]
}

Linting scripts

Usage in package.json:

"scripts": {
  "lint:style": "prettier --config .prettierrc.js --check './src/**/*.{ts,tsx,json}'",
  "lint:style:fix": "prettier --config .prettierrc.js --write './src/**/*.{ts,tsx,json}'",
  "lint:code": "eslint src --ext .ts,.tsx",
  "lint:code:fix": "eslint src --ext .ts,.tsx --fix",
  "lint:type": "tsc --project tsconfig.json --noEmit",
  "lint": "npm run lint:style && npm run lint:code && npm run lint:type",
  "lint:fix": "npm run lint:style:fix && npm run lint:code:fix && npm run lint:type"
},

Git hooks

We use Husky to manage git hooks.

Lint commit messages

We use Commitlint to lint commit messages.

Create a commitlint.config.js configuration file with the following content:

module.exports = {
  extends: ['@team-supercharge/react-native-quality-config/commitlint.config'],
};

Setup the Husky commit hook in package.json

"husky": {
  "hooks": {
    "commit-msg": "commitlint -e $GIT_PARAMS"
  }
}

Lint staged staged files before commit

With help of the lint-staged library we can optimize the running time of linters by linting the staged files only.

Usage in package.json:

"lint-staged": {
  "*.{ts,tsx,json}": [
    "prettier --config .prettierrc.js --check",
  ],
  "*.{ts,tsx}": [
    "eslint"
  ]
},

Setup the Husky commit hook in package.json

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},