Make professional mobile apps with React Native and Typescript — Improve your code quality with linting tools (Chapter 2 — Part 3)

Use Eslint, Prettier, typescript default compiler, Sonarqube & babel-plugin-module-resolver to improve your code quality.

Eslint and Prettier

Let's continue from the previous part. Or you can clone the sample code, open the root folder in VSCode then run yarn to restore packages.

git clone -b debug_vscode https://github.com/thinhtran3588/react-native-starter-kit.git
cd react-native-starter-kit
yarn

Let's start with Eslint & Prettier first. ESLint “is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs”. Prettier, on another hand, “is an opinionated code formatter”. They are both commonly used as tools to enforce coding conventions into your codebase. If you're not familiar with them yet, you should go to their homepages and read the tutorials.

Prettier + Eslint

Luckily, they're both installed in the default template when we first create a new React Native app. Take a look at their default configuration files.

default configurations

Now, we'll add eslint-config-airbnb, a very famous Eslint extension to enrich our current Eslint configuration. Run

yarn add --dev eslint-config-airbnb

Then run

npm info “eslint-config-airbnb@latest” peerDependencies

You'll get the latest version of its dependencies:

{ eslint: '^5.16.0 || ^6.8.0',
  'eslint-plugin-import': '^2.20.1',
  'eslint-plugin-jsx-a11y': '^6.2.3',
  'eslint-plugin-react': '^7.19.0',
  'eslint-plugin-react-hooks': '^2.5.0 || ^1.7.0' }

At the time you read this tutorial, there may be a newer version. Now add them into devDependencies in package.json and replace the older eslint if needed.

"eslint": "^6.8.0",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^1.7.0",

Then run yarn to install those packages. Then open .eslintrc.js and change

extends: '@react-native-community',

to

extends: ['@react-native-community', 'airbnb', 'airbnb/hooks'],

Eslint and Prettier sometimes also can conflict with each other. To resolve that problem, install eslint-config-prettier. Run

yarn add --dev eslint-config-prettier eslint-plugin-prettier

Then open .eslintrc.js and change

extends: ['@react-native-community', 'airbnb', 'airbnb/hooks'],

to

extends: ['@react-native-community', 'airbnb', 'airbnb/hooks', 'prettier'],

Another extension I suggest you add is the no-null extension. You may read this article to see why. Let's run

yarn add --dev eslint-plugin-no-null

Then change .eslintrc.js to

.eslintrc.js

The last part will be adding our custom rules. Normally those settings above are enough for us as standard coding conventions. However, sometimes, we may find some rules don't match our requirements. Let's make a new file .prettierignore and modify .prettierrc.js and .eslintrc.js :

updated files

Delete the lint script in package.json and add 2 new ones:

"lint": "prettier --check . --ext .js,.jsx,.ts,.tsx && eslint . --ext .js,.jsx,.ts,.ts",
"lint_fix": "prettier --write . --ext .js,.jsx,.ts,.tsx && eslint . --ext .js,.jsx,.ts,.tsx --fix",

Now, run yarn lint to check your code and yarn lint_fix to fix fixable issues. There are still some issues in the codebase, you should inspect and try to solve them by yourself.

Typescript default compiler

The default compiler of Typescript is also a nice tool to improve your quality code. Update the lint script as below

"lint": "prettier --check . --ext .js,.jsx,.ts,.tsx && eslint . --ext .js,.jsx,.ts,.ts && tsc",

babel-plugin-module-resolver

Let's take a look at __tests__/app.test.tsx. The App component is imported with the below statement.

import {App} from '../src/app';

If the test component is laid in deep folders, it could be

import {App} from '../../../../src/app';

Pretty ugly, right? Let's resolve it with babel-plugin-module-resolver. Run

yarn add --dev babel-plugin-module-resolver

Update babel.config.js

babel.config.js

Update path in tsconfig.json

"paths": {
  "@app/*": ["src/*"]
},

Then update your code in __tests__/app.test.tsx

import {App} from ‘@app/app’;

It helps your code look much cleaner in the long run.

SonarQube

According to the company, SonarQube® is an automatic code review tool to detect bugs, vulnerabilities and code smells in your code. It can integrate with your existing workflow to enable continuous code inspection across your project branches and pull requests. It is a very powerful tool to ensure your code quality and can be integrated into your CI pipeline as ESLint and Prettier.

We've already install SonarLint in the previous part but now we'll install the tool so we can run it with scripts. You should download the Community Edition or simply install it with Docker.

docker run -d --name sonarqube -p 9000:9000 sonarqube

You may find a newer version at the time you read this tutorial. Log in to http://localhost:9000 with System Administrator credentials (login=admin, password=admin). Click Create a new project. Input your project key (for example, react-native-starter-kit) then click Set up. Enter a name and generate your token. Choose your project’s main language as Other (JS, TS, Go, Python, PHP, …) and OS as macOS.

Install SonarScanner client for macOS and follow the installation instruction. Remember to add bin directory to your path.

Create a new sonar-project.properties file in the root folder

# must be unique in a given SonarQube instance
sonar.projectKey=react-native-starter-kit
# --- optional properties ---
# defaults to project key
#sonar.projectName=My project
# defaults to 'not provided'
#sonar.projectVersion=1.0
# Path is relative to the sonar-project.properties file. Defaults to .
sonar.sources=./src
# Encoding of the source code. Default is default system encoding
sonar.sourceEncoding=UTF-8

Add a new script to package.json

"scan": "sonar-scanner"

Then run yarn scan . SonarQube will analyze your source code. After it finishes, navigate tohttp://localhost:9000/dashboard?id=react-native-starter-kit to see the result.

Look great now!

Pro tip: The community edition only supports master branch analysis. To view other branches' analyses report, you have to purchase Developer Edition. If your source code is on GitHub and public, you can use SonarCloud for free.

Congratulations! You’ve already known how to use all those powerful tools to improve your code quality.

You can also clone the sample here:

git clone -b setup_linting_tools https://github.com/thinhtran3588/react-native-starter-kit.git

Next: Structure your codebase in the right way.

Prev: Debug your application with VSCode & Flipper.

Back to Introduction.