Create ESLint and Prettier Configs for a Design System

[00:00 - 00:15] So let's continue with ESLint and pre-tier configurations. In case you are not familiar with ESLint, ESLint is a tool that helps us to enforce a consistent styling with our code and can also quickly be the point problems that we may miss.

[00:16 - 00:35] So this is a really valuable tool in large teams when they need to cooperate together and enforce a common styling and move on. So to start, let's jump back to our code editor, close the tabs and create a new file called ESLint.js.

[00:36 - 01:02] ESLint RC.js to be correct and copy and paste the code you will find in the text version of this course. So here what we are doing is basically extended the recommended rules of ESLint, also the recommended rules for React, for TypeScript, for using React hooks, for accessibility, and then for pre-tier.

[01:03 - 01:36] So it will work in transactions with pre-tier and will not break in some specific rules. So now that we have everything, we can also create a pre-tier RC file and paste a minimal configuration, like the following one, which basically says to have a line of column, maximum of 80 columns, or 80 columns, and then a single code approach in our code.

[01:37 - 01:55] And then to actually use them, we need to install in-slint and pre-tier and all the packages we defined to plug in. This is a really big command, but you can find it in the text version of this course.

[01:56 - 02:07] We have a mistake, those would be our lowercase. And it's done.

[02:08 - 02:22] We can remove everything and go to our packages, react, and then the index. And let's now validate that it is actually working, to validate that it works.

[02:23 - 02:39] We can take some rules, here we can see the no-count, which means this allows sign-in operation in conditional expressions, and it has an example. Let's use this example and see if it will break or not.

[02:40 - 02:56] So in our case, we have this example, we have an issue with pre-tier, it cannot find module pre-tier. Maybe we need to restart our VS code.

[02:57 - 03:28] So we still have the problem, and the problem is that we are using the plug-and-play loader from yarn. So we can remove those files, go to the yarn RC, and paste the following line, which basically means instead of using plug-and-play from yarn, we will use node modules.

[03:29 - 03:43] We can go back to the terminal and just run a yarn to actually fit every single package. And hopefully if we restart the VS code now, it will work as expected.

[03:44 - 03:49] We can close this. We can close this.

[03:50 - 04:04] And here pre-tier is working, so if we format the file, it works. And we have also an issue with Islin as expected.

[04:05 - 04:14] As expected. That we cannot assign to a property of an object in an if condition, which is probably a mistake.

[04:15 - 04:38] But if we don't have Islin integrated to our IDE, we can also create a script to our root package, so we can check everything. So here we can create a script, let's call this lint, and paste the following command.

[04:39 - 05:01] So what we are doing here is that we are calling the Islin CLI, we ignore some paths, like the git ignore path. We want this to be quiet for warnings and do not match errors in some specific files.

[05:02 - 05:17] So we can run young lint. And we can see that we have an error and an error exit code here.

[05:18 - 05:34] So if we fix this part and remove this and run young lint again, everything passes the test. So that's how we installed pre-tier and Islin.

[05:35 - 05:42] Let's move to the next section of this course where we will talk about the foundation packets and how to deal with design tokens.