React Native with Typescript Prettier ESLint Babel Plugin Module Resolver ( Optional ) (JAN 2022)

January 04, 2022

React Native with Typescript Prettier ESLint Babel Plugin Module Resolver ( Optional ) (JAN 2022)

1.- Creating a new react native project with typescript

— You can check:https://reactnative.dev/docs/typescript

Type:

npx react-native init MyApp --template react-native-template-typescript

Many times the dependencies are outdated, I recommend you also use:

yarn add -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer

Now you can build the project to verify that everything is ok using:

cd ios && yarn && pod install && react-native run-ios (or android)

2.- Install and configure Prettier and ESLint

When the typed template was run, prettier and ESLint are already installed, but you can update them using:

— Check in:https://prettier.io/docs/en/install.html

yarn add -D prettier
yarn add -D eslint

But that is not all. If you want prettier and ESLint to be good friends you have to install:

yarn add -D eslint-config-prettier

Also, if we wantour good friend ESLint to help you see your mistakes while you are developing, you will need:

yarn add -D @typescript-eslint/parser

And that is! now we only need to configure some files:

.eslintrc.js

module.esports = {
    root: true,
    parser: '@typescript-eslint/parser',
    extends: ['@react-native-community', 'eslint-config-prettier'],
    plugins: ['prettier', 'react-native'],
    ignorePatterns: ['.eslintrc.js'],
    parserOptions: {
        ecmaVersion: 2018,
        sourceType: 'module',
        jsx: true,
        tsconfigRootDir: __dirname,
        project: './tsconfig.json'
    },
    rules: {
    }
}

— You can configure your rules your way

.prettierrc

module.exports = {
  arrowParens: 'always',
  printWidth: 120,
  tabWidth: 4,
  semi: true,
  singleQuote: true,
  trailingComma: 'none'
};

— You can configure your rules your way

With @typescript-eslint/parser you can see things like this in your code:

or like:

Finally we can add a couple of Scripts!

"format": "./node_modules/.bin/prettier --write \"**/*.{ts,tsx}\"",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"

Now you can use:

yarn format && yarn lint

EXTRA: Install and configure babel-plugin-module-resolver (for cleaner code)

If you want to skip this:

to this:

you just have to add

yarn add -D metro-react-native-babel-preset
yarn add -D babel-plugin-module-resolver

.babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          '*': '.',
          '@root': './',
          '@src': './src',
          '@components': './src/components',
        }
      }
    ]
  ]
};

.tsconfig.json

"compilerOptions": {
   /*more config/*
    
  "paths": {
    "*": ["./*"],
    "@root/*": ["./*"],
    "@src/*": ["src/*"],
    "@components/*": ["src/components/*"]
  }
},

and thats it, yo can do import with @components

DONE

I hope to help you with this article! This is Irving from

https://medium.com/@guerravargasirving/react-native-typescript-prettier-eslint-babel-plugin-module-resolver-optional-sep-852bbb587531