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

Eslint and Prettier

git clone -b debug_vscode
cd react-native-starter-kit
Prettier + Eslint
default configurations
yarn add --dev eslint-config-airbnb
npm info “eslint-config-airbnb@latest” peerDependencies
{ 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' }
"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",
extends: '@react-native-community',
extends: ['@react-native-community', 'airbnb', 'airbnb/hooks'],
yarn add --dev eslint-config-prettier eslint-plugin-prettier
extends: ['@react-native-community', 'airbnb', 'airbnb/hooks'],
extends: ['@react-native-community', 'airbnb', 'airbnb/hooks', 'prettier'],
yarn add --dev eslint-plugin-no-null
updated files
"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",

Typescript default compiler

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


import {App} from '../src/app';
import {App} from '../../../../src/app';
yarn add --dev babel-plugin-module-resolver
"paths": {  "@app/*": ["src/*"]},
import {App} from ‘@app/app’;


docker run -d --name sonarqube -p 9000:9000 sonarqube
# must be unique in a given SonarQube instancesonar.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 file. Defaults to .sonar.sources=./src# Encoding of the source code. Default is default system encodingsonar.sourceEncoding=UTF-8
"scan": "sonar-scanner"

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.

git clone -b setup_linting_tools



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store