Name: Setup Nuclide to use Flow and Eslint (Mac)
Uploaded: 2016-07-12T16:59:55-05:00
Description: Nuclide is the IDE Facebook employees use to write React code. But setting it up to use Flow type checking and Eslint to lint files on the fly is tricky. This video shows you how.

Nuclide is the IDE Facebook employees use to write React code. But setting it up to use Flow type checking and Eslint to lint files on the fly is tricky. This video shows you how. 

https://app.egghead.io/api/v1/lessons/react-setup-nuclide-to-use-flow-and-eslint-mac/subtitles

Setup Nuclide to use Flow and Eslint (Mac)

[00:01] If you're like me, you may have installed Atom before, along with every plug-in under the sun. Atom became slow and you're not sure how to bring it back to its initial state. The first thing I'm going to do is wipe out my existing Atom install.

[00:18] Next, let's download Atom. We'll unzip it. Then copy it across into our applications folder. Now let's open up Atom. Opening up Atom installs APM, which is Atom's Package Manager. Let's quit. Now we can APM install a new client.

[00:42] When we open up Atom again we see Nuclide's welcome screen. Let's install Nuclide's recommended packages. We click on settings, and then go to the install recommended packages on start-up. Now we're going to need to restart Nuclide. That's going to install these packages. Let's quit again.

[01:15] Next we're going to install some command line utilities that Nuclide uses. One of them is called Watchman that watches our files. To install that the easiest way is to use Brew. If you haven't got Brew then I suggest you google and follow the instructions to install Brew. Then use Brew to install Watchman. I've already got that in my system, so I'm not going to install it.

[01:35] The next thing we need is Flow. We can install that using Brew. Brew install Flow, or you can look in the releases section on GitHub and you can find binaries in the zip file. First of all, you need to unzip it. Then you can copy it into the following path. You want to put the binary here and not the directory.

[02:05] We'll create a project that uses Flow by following the instructions on the Flow getting started page. First, I'm going to create a directory called get started. Then [inaudible] into it. Now I'll create a package.json file, and an empty .flow config file. Now I'm going to NPM install the whole lot along with the Flow binary, which allows me to run scripts that use Flow from my package.json.

[02:37] I've gone into Nuclide. I'm setting the get started directory to be my project directory. Now I'm going to create an index.js file for my JavaScript. Copy and paste the script from the getting started guide into my index.js.

[02:58] Now, as soon as I hit save I start to get Flow errors. You can see them indicated on the left and down here. That's because this variable has a type number, when it should be type string. I change this to string, save, and my Flow errors disappear.

[03:17] The nice thing about Flow is that it does type inference, as well. I didn't always have to type out these types. I'm going to create another function called minus. It looks like this wants to have numbers as input, but I've left it blank. I'm going to use minus 1, 2. I hit save. That's fine. That type checks correctly.

[03:42] I'm going to copy that and see what happens if I put a string for the second argument and hit save. I get a type error. You can see that it's showing that function has an error in it.

[04:04] If I want to see how much of my code is covered by Flow types I can click this percentage number in the bottom. You can see it's highlighted console.log with an orange arrow, showing that Flow can't infer types there. If I delete the core to minus then you can see that Flow can't infer types about the minus function either.

[04:23] That's great. We've got Flow working in our editor, but what about ESLint? I can't live without it. Let's try using ESLint with Airbnb's super popular config. I'm going to copy the install instructions. Then bring up a shell. Paste them in there. I'm going to edit this so it's ESLint version two. It was just moved up to version three, and I was getting some conflicts. Also install ESLint plug-in Babel.

[04:51] Next I'm going to install, using APM, the Linter ESLint plug-in for Atom. Restart Atom, which is going to cause this to install. The problem here is actually installing Linter, too. This gives me a conflict with Nuclide's diagnostic tools. That implements the Linter interface. The two plug-ins fight between each other.

[05:18] I'm going to have a go at disabling the Linter plug-in. APM. Disable Linter. You may want to restart Nuclide. Now let's create a .eslint RCFile. I'm just going to copy and paste it in a basic config here.

[05:37] Now go back to index.js. Hit save. Now I get linting errors. I'm not getting linting errors as I type. As soon as I create this unused variable, there's no linting errors. In order to make it lint as I type, I need to go into Nuclide's config and search for the legacy linter. Legacy linter is on the fly. Enable that. When I type a character, I start getting linting errors as I type.

[06:24] Now I've got linting working, let's investigate what some of the errors are. I can hover over these indicators. It shows me the warnings. I can actually fix them from this pop-up. I've got semicolons that I don't want. I can just click fix and it removes them. The other thing I can do is click on the diagnostics table here and toggle it on and off. That shows me all the errors, either in my whole application or in the file I'm looking at.

[06:51] If I want to see the file that I'm looking at, I can click on this. This just shows me the errors in this file. That's how to set up Atom with Nuclide, so that you can use ESLint and Flow as you're working.

[07:07] One other thing. When it comes to actually run your project, you're going to have to strip out these types. To do that you can use, "babel-plugin-transform-flow-strip-types". Just put it in your Babel RCFile in the plug-in section.

Setup Nuclide to use Flow and Eslint (Mac)

Share this video with your friends