React Native with Prettier, Typescript, ESLint and Expo

Edit on GitHub
Oct 11, 2019
ReactJS
3 minutes

UPDATE

React Native projects now come with @react-native-community setup by default. It includes support for Prettier, Typescript and React hooks by default

 1// config from @react-native-community
 2
 3  extends: [
 4    'plugin:prettier/recommended', // https://github.com/prettier/eslint-plugin-prettier#recommended-configuration
 5    'prettier/react',
 6  ],
 7
 8  plugins: [
 9    'eslint-comments',
10    'react',
11    'react-hooks',
12    'react-native',
13    '@react-native-community',
14    'jest',
15  ],

NOTE

After deciding on TSLint and implementing it, i find out that Palantir, the maintainers of TSLint actually plan to deprecate TSLint and move to ESLint, so i re-did the setup with ESLint

In order to avoid bifurcating the linting tool space for TypeScript, we therefore plan to deprecate TSLint and focus our efforts instead on improving ESLint’s TypeScript support.

So we’re going to use typescript-eslint instead, which both the Typescript team and Palantir team plan to support

Ultimately, ESLint (.eslintrc.yaml) is going to be one thing that is going to have config for TypeScript, React, and Prettier.

Install

 1# install Expo
 2npm i -g expo-cli
 3
 4# install Typescript and types from DefinitelyTyped
 5npm i -D typescript @types/react @types/react-native @types/expo
 6
 7# ESLint with TypeScript support
 8npm i -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
 9
10# ESLint with React support
11npm i -D eslint-plugin-react
12
13# ESLint with Prettier 
14npm i -D prettier eslint-config-prettier eslint-plugin-prettier
15
16# Additional ESLint plugins
17npm i -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-import-resolver-typescript
18
19
20tsc --init
21eslint --init

eslint The core ESLint linting library
@typescript-eslint/parser The parser that will allow ESLint to lint TypeScript code
@typescript-eslint/eslint-plugin A plugin that contains a bunch of ESLint rules that are TypeScript specific
eslint-plugin-react additional react rules that we need
eslint-plugin-import rules around import/export
eslint-import-resolver-typescript adds TypeScript support to eslint-plugin-import
eslint-plugin-jsx-a11y for accessibility
prettier for code formatting
eslint-config-prettier config to disable ESLint rules that conflict with Prettier
eslint-plugin-prettier Runs prettier as an ESLint rule, letting ESLint format content using Prettier.

Configuration

.eslintrc.yaml

 1# Configuration: https://eslint.org/docs/user-guide/configuring
 2# Using with Prettier: https://prettier.io/docs/en/integrating-with-linters.html#recommended-configuration
 3
 4extends:
 5  - 'plugin:import/errors'
 6  - 'plugin:jsx-a11y/recommended'
 7  - 'plugin:react/recommended' # Uses the recommended rules from @eslint-plugin-react
 8  - 'plugin:@typescript-eslint/recommended' # Uses the recommended rules from the @typescript-eslint/eslint-plugin
 9  - 'prettier/@typescript-eslint' # Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
10  - 'plugin:prettier/recommended' # Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
11
12parser: '@typescript-eslint/parser' # Specifies the ESLint parser. Use TypeScriptCompiler because it has a type-checker, babel-eslint does not
13
14plugins:
15  - react
16  - import
17  - jsx-a11y
18  - '@typescript-eslint'
19  - prettier
20
21rules:
22  # ESLint rules. Can be used to overwrite rules specified from the extended configs
23  'react/prop-types': 0 # aren't really useful in Typescript
24  no-console: 1 # 1 is Warning
25
26parserOptions:
27  ecmaVersion: 2018 # Allows for the parsing of modern ECMAScript features
28  sourceType: module # Allows for using ES6 Modules
29  ecmaFeatures:
30    jsx: true # Allows for the parsing of JSX
31
32env:
33  jest: true # support Jest global variables.
34  es6: true # not choke on things like async/await
35  browser: true # not choke on browser global variables (document, window ect.)
36  node: true # support Node.js global variables and Node.js scoping.
37
38settings:
39  react:
40    version: detect # tells eslint-plugin-react to detect React version to use from package.json

.prettierrc.yaml

 1# .prettierrc or .prettierrc.yaml
 2# Options: https://prettier.io/docs/en/options.html
 3
 4printWidth: 120
 5tabWidth: 2
 6useTabs: false
 7semi: false
 8singleQuote: true
 9quoteProps: as-needed
10jsxSingleQuote: false
11trailingComma: none
12bracketSpacing: truek;
13jsxBracketSameLine: false
14arrowParens: avoid
15htmlWhitespaceSensitivity: css
16endOfLine: lf

Notes