Configure ESLint, Prettier, and Flow in VS Code for React Development

This short guide will provide you a consistent and reusable development workflow for all / 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 your editor to handle your code formatting, linting, and type checking. React React Native Test Driven Development and a preconfigured build configuration are recommended. I won’t go into much detail on either of these. I recommend for the web and using the for mobile development. Both require zero build configuration. is fantastic for testing . create-react-app React Native CLI Jest React Installation To get started download and install . You can launch from the terminal, . VS Code VS Code here’s how I use VS Code for my editor of choice. If you use Sublime Text or Atom this article still applies but you’ll need to use the relevant text editor extensions for your text editor. Let’s generate our app without any configuration! For this article we’ll use the , but you can follow along with as well. React Native CLI create-react-app $ react-native init SweetApp && cd SweetApp Open the SweetApp project with . VS Code $ code . Once you have open, click the Extensions button in the Activity Bar. Install the following extensions: VS Code ESLint Prettier-ESLint Flow Language Support Babel ES6/ES7 ESLint Setup We will install using Airbnb’s linter rules. Refer to for the installation instructions. ESLint Airbnb’s JavaScript Github Repo Then install $ npm install babel-eslint --save-dev babel-eslint You should now see an .eslintrc.json file in your project. Open the eslintrc file and configure it like so: Prettier Setup Since we are using there is very little setup required to get working. We’ve installed the extension, now we need to tell to format our code using a code formatter ( ) after saving a file. Prettier with ESLint Prettier Prettier-ESLint VS Code Prettier Press CMD + , if you’re on a Mac to open your and enable format on save. VS Code User Settings // Format a file on save. A formatter must be available, the file must not be auto-saved, and editor must not be shutting down. "editor.formatOnSave": true Flow Setup is a static type checker for JavaScript and is included in your project if you use the or build configurations. Flow React Native CLI create-react-app From your terminal install using . Flow Homebrew $ brew install flow “Flow works best when installed per-project with explicit versioning rather than globally.” https://flow.org/en/docs/install/ To run per project we will install from . Later we will configure to run from node_modules in lieu of the global installation. Flow flow-bin npm VS Code Flow Flow Before installing we need to figure out which version to install. Open the .flowconfig file and scroll to the very bottom where you’ll find the version number. This is the version of we want to install from NPM. As of the day this article was published, the version to use is 0.42.0. flow-bin flow-bin Flow We also need to install the . babel-preset for Flow What are babel-presets? https://babeljs.io/docs/plugins/#presets $ npm install flow-bin@0.42.0 babel-preset-flow --save-dev Open the .babelrc file and add then add the config [ ](http://Retain line numbers. This will lead to wacky code but is handy for scenarios where you can’t use source maps. (NOTE: This will not retain the columns)) Flow as a preset “retainLines”: true Your .babelrc file should look like this: { "presets": [ "react-native", "flow" ], "retainLines": true } Now we want to tell our editor to use from the projects node_modules directory. We also want to disable JavaScript validation for this project only to . Flow fix a known issue Open the settings.json file and add this: Workspace // Support using flow through your node_modules folder, WARNING: Checking this box is a security risk. When you open a project we will immediately run code contained within it. "flow.useNPMPackagedFlow": true, // Enable/disable JavaScript validation. (For Flow) "javascript.validate.enable": false // Enable/disable default JavaScript formatter (For Prettier) "javascript.format.enable": false Disabling the default JavaScript formatter allows to handle our code formatting. Prettier Let’s create some for . npm scripts Flow Open the package.json file and add the following scripts. // start the flow server "flow start": "flow start", // stop the flow server "flow stop": "flow stop", // check the flow status "flow status": "flow status", // check the flow coverage percentage "flow coverage": "flow coverage" Your scripts in package.json should now look like this: From the same directory as your package.json file run the following terminal command. $ npm run flow start The is running and will perform type checking on any file with a // @flow annotation at the top of the file. Flow server Testing your new development workflow Open the index.ios.js file in the SweetApp project. Don’t use the index.android.js file as the .flowconfig file ignores it. to use Flow with .android files. See this post on Stack Overflow ESLint Linter You should notice red squiggly lines in your code. You can hover your mouse cursor over the red squiggly line and will tell you the linter rule causing the warning. ESLint Delete the semicolon at the end of the return statement inside the class render method. Hover your mouse cursor over the red squiggly line and you’ll see warns you about the missing semicolon! ESLint If you are not receiving any linter warnings please review the ESLint Setup portion of this guide. Prettier Code Formatter will auto-format your code based on it’s rules whenever you save a file. Prettier Add an array of numbers and save the array to a variable called test. Format the array of numbers like so: Now save the file and watch the magic of take effect! Prettier The test array is now formatted correctly! Flow Type Checking To ensure is working run the flow start npm script to start the that runs in the background. Flow Flow server $ npm run flow start Create an add function that returns the sum of two numbers. Now let’s add the WRONG types (string) to the add function parameters and return type. Notice after saving the file red squiggly lines appear under the number parameters of the add function invocation. Hover your mouse cursor over the red squiggly lines and informs you: Flow [flow] this type is incompatible with the expected parameter type of string Let’s fix the add function to use the correct number types. The type errors are gone! Flow A cool feature of the is the always up-to-date coverage percentage in the Status Bar. Flow VS Code extension Flow 🎉 You’re all set**!** 🎉 Hopefully this guide saves you the headache I experienced and makes for a great reference guide now and in the future. Happy coding! 😀