Configure TypeScript, TSLint, and Prettier in VS Code for React Native Development
This short guide will provide you a consistent and reusable development workflow for new or existing React Native projects. The more effort you put into writing quality code, the less time you spend on debugging. You can increase your code quality and reduce the time spent on debugging with a consistent development workflow. In this guide I will show you how to configure VS Code to handle your code formatting, linting, and type checking.
Testing is outside the scope of this article but highly recommended.
How to use TypeScript is also outside the scope of this article.
Getting Started
For this post we are going to start from a newly created project. You can skip ahead to the TypeScript setup if you’re working on an existing project. Let’s initialize our React Native app! For this article we’ll use the React Native CLI.
Open the SweetApp project with VS Code.
Once you have VS Code open, click the Extensions button in the Activity Bar.
Install the following extensions:
TypeScript Setup
First let’s install and setup TypeScript for our React Native app by entering the following commands in the terminal. (I use the Yarn package manager)
Here’s what we just did:
- installed TypeScript to our project as a dev dependency
- installed React Native TypeScript Transformer to our project as a dev dependency to seamlessly use TypeScript with react-native
- initialize an empty TypeScript config file, which we’ll configure next
- create an empty React Native TypeScript Transformer config file, which we’ll configure shortly
- install typings for React and React Native allowing TypeScript to type check our React Native code
Configure TypeScript
Here are the settings I enabled/disabled and I recommend you do as well to get started. As you gain more experience and become comfortable with TypeScript you’ll tweak this file more to your preferences.
For the option you want to enable or disable, simply comment or uncomment the line of code.
In the Module Resolution Options section I enabled the following three options:
In the Strict Type-Checking Options and Addition Checks sections make the necessary configuration changes to match the code below.
Note: I also prefer to change the target property to “ES2015” to use async/await without a Promise declaration.
Configure the React Native TypeScript Transformer
Open the rn-cli.config.js file we created earlier and copy paste the following code, then save and close this file.
TypeScript Migration
Rename the generated App.js file in our project to App.tsx.
**NOTE** index.js needs to use the .js extension.
All new files containing JSX should use the .tsx extension and the .ts extension for plain JavaScript files.
Now is a great time to go through your existing .tsx and .ts files and fix any TypeScript errors.
TSLint Installation and Setup
First, let’s install TSLint and some TSLint extensions I personally prefer for React Native development.
- added tslint
- added tslint-config-prettier so tslint and prettier won’t fight over code formatting rules.
You should now see a tslint.json file in your project.
Open the .tslint.json file and configure it like so:
The rules section is my personal preferences. You’re free to roll your own rules.
Lint your Code
From the root of your project open the package.json file and add the following npm lint script to the scripts section
Now from your terminal you can run yarn lint. You know you enjoy fixing linter errors!
Prettier Setup
Prettier will auto-format your code based on it’s rules.
Prettier is amazing. If you’ve never used it, it’s like watching TV on an HDTV then trying to go back to watch TV on a non-HDTV. Once you use Prettier you’ll never go back to formatting your own code again.
Let’s install prettier.
Next, we want VS Code to format our code using the Prettier extension after saving a file.
Press CMD + , if you’re on a Mac to open your VS Code Workspace Settings then add the following:
Now let’s create a prettier config file that will contain your Prettier code formatting preferences.
From the root of your project create a file name .prettierrc
Use my prettier rules or roll your own based on your preferences. Here are my Prettier preferences. Yes, i’m on team no semi-colons!
Prettier Code Formatter
Prettier will auto-format your code based on it’s rules whenever you save a file.
Open the sample app.js file and add an array of numbers. Save the array to a variable called test. Format the array of numbers like so:
Now save the file and watch the magic of Prettier take effect!
The test array is now formatted correctly!
🎉 You’re all set! 🎉
Hopefully this guide saves you a lot of time and makes for a great reference guide now and in the future.
Happy coding! 😀
If you enjoyed this article check me out on Twitter @_SeanGroff
