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 https://github.com/thinhtran3588/react-native-starter-kit.git
cd react-native-starter-kit
yarn
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
.eslintrc.js
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",

babel-plugin-module-resolver

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

SonarQube

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 sonar-project.properties 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 https://github.com/thinhtran3588/react-native-starter-kit.git

--

--

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