Code formatting and linting configuration

Part ɪ: Creating new React-Native app│Story 06: Code formatting and linting using ESLint and Prettier

In previous few post of this Part-I of the series, we initialized a new React-native app, renamed its BundleID/Package name, got a Gitlab project created for the app’s code repository, added app icons for the app to iOS and Android folders and configured Typescript for development

In this part, we’ll set up ESlint and Prettier for Code formatting and linting.

Code formatting and linting configuration

In 2019, Typescript team announced their plan to deprecate TSLint and support ESLint as a common linter for both javascript and typescript. typescript-eslint project from ESLint provides packages to support for linting typescript.

Install dependencies

The detailed installation and configuration guide for typescript-eslint can be found here, or follow along as below:

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-jest -D

As described on its Github page:

• @typescript-eslint/parser - is an ESLint-specific parser to lint typescript code.
• @typescript-eslint/eslint-plugin - an ESLint-specific plugin which, when used in conjunction with @typescript-eslint/parser, allows for TypeScript-specific linting rules to run.
• eslint-plugin-jest ESLint plugin for Jest

If not already there, add .eslintrc.js config file in the root of project folder with below configuration:

Github Gist

👆 line#6:.prettierrc.js is for Prettier config file that we install next.

Prettier for code formatting

Install Prettier and required packages for it to work with eslint

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

Add .prettierrc.js config file in the root of project folder with the code formatting rules you prefer:

module.exports = {
   bracketSpacing: true,
   singleQuote: true,
   trailingComma: "all",
   printWidth: 100,
   tabWidth: 4
};

and .prettierignore

Github Gist

Update .eslintrc.js to add prettier 👇

Github Gist

If you are using VSCode, its ESlint and Prettier extensions can help to auto-fix lint and formatting errors on file save. Install/update latest version of these extension if you don’t have it already, and add below to your VSCode settings.

{
  ...
  ...
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
  ...
}

(Note if you are using a language other than javascript in VSCode editor, you may have to add or change the "editor.defaultFormatter" to that language-specific code formatter extension.)

In package.json, add the lint script command to have linting run from CI/CD script or Git Hooks.

{
  ...
  ...
  "scripts": {
     ...
     ...
     "lint": "eslint 'src/**/*.{js,ts,jsx,tsx}' --quiet --fix"
     ...
     ...
   }
   ...
   ...
}

lint-staged and husky

To make sure files committed to git don’t have any linting or formatting errors, we can use lint-staged along with husky.

lint-staged would allow us to run a linting command on a given set of files and stage any auto-formatted/linted files for commit. Then, using husky, we can define a pre-commit hook to run lint-stage before commit to git.

npm install husky lint-staged -D

Finally, update package.json to add husky and lint-staged configuration.

Github Gist

👆line#9–19 : lint-stage and husky settings

✔️ That completes our configuration for code formatting and linting.

This concludes the Part I of this series of 𝘚𝘵𝘦𝘱-𝘣𝘺-𝘴𝘵𝘦𝘱 𝘨𝘶𝘪𝘥𝘦 𝘵𝘰 𝘤𝘳𝘦𝘢𝘵e 𝘢 𝘯𝘦𝘸 𝘙𝘦𝘢𝘤𝘵-𝘕𝘢𝘵𝘪𝘷𝘦 𝘢𝘱𝘱 𝘧𝘳𝘰𝘮 𝘴𝘤𝘳𝘢𝘵𝘤𝘩, 𝘢𝘥𝘥𝘪𝘯𝘨 𝘛𝘺𝘱𝘦𝘴𝘤𝘳𝘪𝘱𝘵 𝘢𝘯𝘥 𝘴𝘦𝘵𝘵𝘪𝘯𝘨 𝘶𝘱 𝘎𝘪𝘵𝘭𝘢𝘣 𝘊𝘐-𝘊𝘋 𝘱𝘪𝘱𝘦𝘭𝘪𝘯𝘦 to automate publishing the app to Andriod Play store.

In Part II, we will start with manual set up of the app’s first release to Google Play console(GPC). Google requires the first APK or App Bundle(AAB) of the app should be configured and published manually via the Google Play Console.

And in Part-III, we will automate the app release using Gitlab’s CI/CD and Gradle Play Publisher (GPP).

←Prev: Adding Typescript┈ 🏠 ┈ Next: Register app on GPC→