[...] This here can be used in any type of application,
that uses Javascript, that uses ESLint [...]
[♫]
Hey Dev! Today I'm here to tell you about a very cool tip that can be used
on ESLint, on any Javascript project, being it on React,
on Node, on React Native, or any other
Javascript library, even pure Javascript, on total Vanilla, you can use it,
which is the ESLint Plugin Import Helpers, alright?
For now this lib has only one helper, right, probably on the future, judging by its name,
there will be more, but, the most important one is the one I want to talk about it here,
which is Order Imports.
One of the things I really like to standardize on my applications,
and before I used to standardize totally manually,
I made sure each import was on the right place, so I always like that the imports
that are module imports, for example
of Redux, of React, React Native, they come first,
then I have the imports
of the next documents, right, components,
uhm... of other pages, stylesheets,
and at the end, for example, there can be some utils imports, something like that.
So, I like to organize
my imports inside each component,
also inside the controllers, inside node, and so on.
And this plugin here,
it makes this... this import organization process automatic.
So for example here, I have an example here, right,
I'll create here in my Rules from ESLint,
I'll say for example that I want a blank lines,
between each import group,
and these here are my groups, right,
so first, the first group, are the module imports, for example,
React, React Native, Redux, React Redux,
uhm... Lodash, ex-- Axios, all this will go together, and then come the imports that start with "@shared"
alright? Here i can put anything else, whatever. This is an example, right?
and then, imports that are
imports from the parent folder,
or imports, right, next imports, imports from the sibling folders, let's say it like that,
and an import from index itself, so this comes as a third group.
And I also want it to sort by alphabetic order, so if,
uhm... inside the module group, for example, I have many imports,
I want them to be sorted by
alphabetic order, ascending and descending order, to ignore
the case, right, case-sensitive, case-insensitive, whatever,
so we can control that too.
What I am going to do to test this
on the best way is, I'll start by creating a project,
I think the best way is if we create a project--
uhm... a blank project, so, "test" uhm... "import"
'helpers",
I'll create this "testimporthelpers",
I'll start a project here
really simple, like it was a React, but I won't install anything too complex,
I'll install here React, idk,
uhm... Axios,
Redux, idk... just so we can... idk, React Redux,
really just to... have an example.
it installed really quickly,
and I'll install ESLint as a development dependency, inside my project,
and I'll initialize ESLint in this project, so,
let's open the project on VSCode,
perfect,
I'll run here a "yarn eslint --init",
I'll select the third option,
uhm... I'll be using Javascript Modules, right, import/export, I'll be using React,
I wont be using Typescript,
this code will be running on the browser,
uhm... I'll use a po-- a popular styleguide,
I'll choose here Aribnb's, this will do,
and here I'll select the format of...
of the ".eslint", right, of the config file of the ESLint in "json", that will do.
So now it will install a few dependencies for me,
by default it will use "npm" to install this,
so let's wait for it to install,
alright, now that it finished installing, since it installed it through npm,
I'll delete this packagelock.json that it generates,
and I'll run a yarn here on the folder just so it can map the dependencies that were installed,
but now it won't install anything else for now.
We wait a little bit,
alright, yarn finished it already.
Now, my ".eslintrc" here, it already comes with a few...
uhm... configs that are preset, right, because I'm using the
default styles from Airbnb.
I'll create an src folder here,
and I'll start by creating a simple structure, so let's suppose that I have a page,
and inside it I have a "main.js",
or better, a folder named "main", and inside it the "index.js", let's suppose it goes that way,
and here I also have my styles, right, I'll create the styles.js here,
uhm... here, beyond the pages, I have the components,
so let's create a component named header,
that will have an "index.js" inside,
uhm... wow, I created a folder here, so let's create a file, "index.js"
here, this component "header" will be a simple React component,
right, so I'll create it here as "header", let's save this,
alright, I created a component "header", here it is only asking for "jss--
[Reading] "JSX is not allowed in files with extension '.js' "
so basically we need to tell it
here, to allow
uhm... here we can... "react jsx allow file extension eslint",
this here is just to apply a little rule, I'm searching in a... really fast way,
just so we can apply this rule for it to allow it
to have
"jsx" inside the ".js" files too.
It is already enabled. This here has nothing to do with the Import Helpers thing at all.
Now, here inside my "main", I'll also create a component,
uhm... React, and on the styles, I'll install here
the styled components,
of course this project, I won't run it, I... I didn't even create a structure of a React project,
it is just for us to understand how this
import thing works. So here, I'll add, idk, a... a background,
"#333", just so have an example,
and here we create another export, idk, title,
which is an "h1",
that will be "color"
"#fff", "font-size:30px", idk, just so we can
have a... two co-- two exports from here.
Nice, now, we already have our structure kinda ready right?
So, if there on our main now, we needed
to import something from React Redux, so we would import here, for example, the "useSelector",
from
React Redux.
Perfect, so far so good.
And now we can import too our component
"header", so I'll import the header from "../../components/header"
and then, at some point we might want to import
Axios too, right, then I'll import "api from axios".
And we will import also our styles, so I'll import here,
from styles,
our container and also our title, right, remember that I created here on the styles, our container,
and inside the container,
we wi-- whoops.
We'll put our title
"Hello world" alright. So far so good,
I'll save, here it... organized the... the imports on a
very fast way, actually it just put this last import at the end,
but we will talk about this in a while, because it is still
kind of a mess.
So, what we are gonna do now,
I'll start, I'll create too, a component that will exist only on at the "main" folder,
at... at the main page, but I'll separate it in another folder here,
that it will be, idk, the... the "User" component.
Really simple.
Inside this use here, that I one more time created as a folder,
and I'll have an rfc,
"User", simple asa that, there will be no styling.
And I'll import this user here too, so "import User from ./User", alright?
And then I'll add this component here, just so we can have a simple,
uhm... a simple way of... of showing here
all the kinds of imports basically, so we have module imports,
we have imports of a file that is located a few folders back,
imports of files that are "siblings", let's say it like that.
Uhm... and now, we can also have another type of imports that I won't create here
the would be using, uhm...
either the paths from typescript,
or the own... uhm...
the... the... using the-- the... Babel Plugin Root Import,
this for inside React, right,
which is basically when we... ~there's even the blog-- the post from Rocketseat's blog~
which is basically us being able to set,
uhm... instead of
typing "../../" every time, I could just use a "~" at the front, or an "@"
which is the example also that ESLint Plugin Import Helpers gave us, here, look, the "
but, I won't set this up for now, because it's not the purpose now.
but, now we will install then
the ESLint Plugin Import Helpers
so it can organize these imports for us.
So, basically, let's see, I'll install,
then, ESLint Plugin Import Helpers,
let's install it as a development dependency here inside the project,
Nice, now we'll put our rules there, so, I'll copy these rules here,
and let's put them inside "eslintrc.json".
here it is in json, so I copied
in Javascript, so we'll have to switch these single quotes here,
for double quotes, so let's switch them all, right, I could have used another hot key to make it easier,
and let's also put double quotes around all of the--
all texts,
around here and take off
the commas that are left here at the end,
because they are not welcome inside json.
Uhm... alright, we save this now, everything went fine,
and here it only has the indent of two-- of four spaces, so let's switch it here for two spaces,
and reindent it, alright, It's reindented now,
uhm... and now we'll leave what it
offers by default, so first the module imports,
then, the imports that begin with "@shared",
I don't have this yet, so
I'll take this off for now.
Alright? We can test this later.
And, it will
arrange in alphabetic order, ascending, and it will ignore
the case, right, so if there's a capital case letter, low case letter, it won't worry about that.
Let's save this now, let's go back to the index,
let's add a blank space, just so it can...
actually I'll open the file again, let's see if it recalculates here,
uhm... it showed an error here, [Reading] "Definition for rule 'import-helpers/order-imports' was not found."
Hmmm... we didn't add the plugin
of the import helpers, so there should be an "import-helpers" here, which is the plugin of,
uhm... of the Import Helpers.
Now we go back on the map, and now yeah,
we can see that Axios already has a little error here,
below, because it says that the import from Axios needs to come before React's. Why?
Because in alphabetic order,
Axios comes before React.
So, I can save this right now,
I'll do a few ".saves",
and we can see that it already organized our imports.
so it put Axios first,
then React, then React Redux, this by following the alphabetic order.
so here are our module imports, alright? Sorted by Alphabetic order.
then, it left a blank line,
because I added this newLinesBetween: "always"
so it left this blank line, this was automatic, look, if I take it off, it puts it back on automatically,
then it put the imports in order.
Imports that are on parent folders, right, for example, our "components/header" import,
then we have the sibling files imports,
right, which is for example the styles file,
or user itself,
and we can go even further on this, for example,
I want the imports that are specific from React, they come above Axios, so,
and I'll put it here,
for all the imports that start
with "react", if I'm not wrong, I just have to put it like this that it will work, ohh, I need to put it as...
as a regex,
the imports that start with "react", I want them to come above everything, I don't want...
Axios to come before React. So, look,
I saved it, and from that moment on,
the import from react here, it comes
above everything, so Axios stays on the second place.
I even prefer it like this, right, the imports that are related to React, React Redux, and so, they come before,
then the imports of other modules,
and here we'll do many and many and many settings.
Let's suppose that on our app too,
we had done the settings for that Root Import I told you guys about.
After setting this Root Import, if we weren't using the Typescript,
we would create a jsconfig.json,
and here we would put a compilerOptions,
we would declare the paths,
and if I'm not wrong, I say that
every time it begins with "~", for example,
everything that comes after,
let me put a "baseurl" as being the src folder,
every thing that comes after, I want it
to find,
or even better, here I can put "base url": "."
inside the src folder. So,
we'll see what is this code that I just made.
When I go now, instead of importing the header from "../../components",
I can write it in this format here, look, "import header
from" and now, when I put the "~",
oops, the "~", hehe,
see that I just press "/" and it finds the components and also our
pages, so it is like,
when I put the "~" it refers to the src folder, independent of where I'm in the project.
Of course this won't work by simply creating this jsconfig, I would have to create,
use either Babel Plugin Root Import, or Typescript, or even the... the Babel Plugin Alias, and so on.
But, now, I have a different import, that it starts with "~" right?
So,
this import here doesn't have many places to go, you can see that the screen is little buggy here,it doesn't know,
uhm... if the "~" in ascending order comes before Axios or after.
So what are we going to do, we'll create a new group here,
under the module group,
saying that these imports start with "~"
we'll put
them after the module, so let's save this right now,
let's save this, and now, we'll have our imports
working, alright?
Of course that we still have a few errors from ESLint
saying that there are some imports that we are not using,
and in this case, since we don't have Babel Plugin Root Import set up,
anything like that, it also won't understand the import, that's why there's an error there.
Alright then, now we learned how to use
this ESLint plugin that is called "ESLint Plugin Import Helpers" that has this Order Import rule,
that for me helps a lot on the development,
because it makes it easier right, this automatic way, organizing these imports of our apps,
and as I mentioned, independent if it is an application made with
React, an React Native application, a Node application,
this here can be used in any type of application
that uses Javascript, that uses ESLint, including the applications
that use Typescript, you can use
the Typescript ESLint Parser, right, to make ESLint understand Typescript,
and also using this imports organization, and actually we are using this
in most of the applications here at Rocket,
I think only the older ones we haven't updated,
the ones we're not using, but on the most part of the applications we are using now,
we're using it.
Alright? I'm pretty sure that this right here
was useful for you, if it was useful, leave a comment down below,
and also what you would like to leave as a suggestion
for who knows, for the next Code/Drop, we can talk more about this organization part, of the ESLint,
If you want me to show you something about project organization with Typescript, with ESLint,
something like that,
leave it down below on the comments that I would really like to know.
I'll be staying around here, huge hug, and, thanks!
[♫]