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"
git clone -b setup_linting_tools https://github.com/thinhtran3588/react-native-starter-kit.git

--

--

--

Software developer. Interested in web/mobile application development with React, React Native, Typescript, Nodejs and AWS.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The 8 JavaScript Comparison Operators You Need To Know

(Not so) Regular Expressions

Stacks vs Queues with JavaScript

JavaScript — 8 Array Methods You Must Know

Styled Components in React — All you need to know

Deploy an AngularJS Ecommerce App in 4 Steps

A one week stand with React Native — Or, how deep do we plunge?

Types of React Hooks & Best Practices

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
Thinh Tran

Thinh Tran

Software developer. Interested in web/mobile application development with React, React Native, Typescript, Nodejs and AWS.

More from Medium

useEffect vs. useLayoutEffect in plain language

FlatList | React Native Component Explained

Higher Order Component for listing data using FlatList in React Native

How to create a reusable input component with custom mask in react native