Como deixar seu código igual ao meu (com ESLint + Prettier + Tailwind)
Como deixar seu código igual ao meu (com ESLint + Prettier + Tailwind)
→ CONHEÇA A NOVA ERA DA ROCKETSEAT https://rseat.in/r8ichTTMR
→ TESTE SEUS CONHECIMENTOS EM REACT (grátis) https://rseat.in/MIP1COoyt
A gente sabe que pra um código funcionar perfeitamente ele não precisa ser muito bonito.
Só que mesmo não fazendo diferença no funcionamento de uma aplicação, a estética pode transformar a maneira como você encara o seu trabalho e todo o seu desenvolvimento.
Dentro do setup Next.js + Tailwind, a dica de estilização atual é ESLint + Prettier (que tem extensão pro Tailwind!).
O vídeo de hoje é uma dica rápida que vai transformar o visual do seu código.
-----
Conecte-se a 500mil devs e avance para o próximo nível com a nossa plataforma: https://rocketseat.com.br/
Cadastre-se na nossa plataforma: https://app.rocketseat.com.br/signup
Junte-se a mais de 392mil devs em nossa comunidade no Discord: / discord
Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat
Content
0 -> Speak dev, beauty? Today I came to bring a quick tip for you who are using Next
3.6 -> and want to use Tailwind in the styling pattern as well. I'm
7.8 -> using ESLint, Prettier and also the ESLint plugin for Tailwind CSS.
12.06 -> Hold on, it's been a long time since I've uploaded a video, I don't show my face,
15.42 -> but I was traveling for a long time and I also spent a week in the hospital. So,
18.48 -> calm down, I still need to fix my look to get back here to YouTube. Let's go!
22.98 -> What I didn't want to leave out in a video is that I'm going to start by creating a
26.16 -> project in Next. Here, I'm going to call it "slink-next" and I'm going to use the command
30.78 -> "npx create-next-app" to make it use npm as the package manager
33 -> instead of pnpm or yarn, because I have these three tools installed.
36 -> And here, I'm going to select everything that Next already brings by default. And we can see that Next
45.84 -> already brings here ESLint and Stylelint Next, which is a Next configuration for ESLint. If
50.58 -> you don't know what I'm talking about, what ESLint is and what Prettier is,
53.46 -> basically ESLint and Prettier are tools for us to automate
56.88 -> a code pattern in our application. This will make everyone
60.78 -> on our team follow the same standard. So, if there is a semicolon or not at the end of the line,
64.92 -> if they are single quotes or double quotes, that is, they are tools that facilitate this.
68.28 -> Prettier, by its name, as it already says, it is a tool that makes our code
72.54 -> more beautiful, "prettier" in English. And Prettier, what he's going to do is standardize some things,
78.66 -> in addition to what ESLint already does, to make our code more visually pleasing. So, it will
84.36 -> limit the size of the lines, it will put some spaces, some "enters" between
88.5 -> lines of our code to make our code more visually elegant, so to speak.
94.32 -> And here, I'm going to start by opening this project, this "slink-next", inside my VS Code. And here,
99.6 -> as I said, it already comes with an ESLint configuration. But we can replace this
104.46 -> configuration, if you want to configure ESLint your way, let's say, from scratch,
109.5 -> for your team. What I recommend is that you come here and run the command "npx eslint --init".
115.14 -> As I already have a pattern that I follow in all Rocket projects,
119.88 -> what I did was I created a package. So, if I go here on Rocketseat's GitHub,
125.94 -> the "eslint-config-rocketseat", this here is a public project, a public repository
130.98 -> that I left here, and I basically created an ESLint configuration for React and one
136.2 -> for Node .js, which I use in all my projects. This here makes it a lot easier, because
140.22 -> I won't need to install all the ESLint dependencies within each project that
146.1 -> I'll need to use ESLint, because these dependencies will be installed automatically
149.88 -> from the moment I install this package, let's say, from "eslint-config-rocketseat".
153.9 -> But you can see all the settings I use here. She is very simple.
157.8 -> What this ESLint configuration is doing, at the end of the day,
160.8 -> is I use the official React plugin for ESLint, which brings the standard React rules there, from React
166.26 -> Hooks, the "standard", which is a style pattern from Google,
170.22 -> if I'm not mistaken, which is basically we don't use semicolons at the end of the lines,
174 -> we use single quotes. So there are some predetermined styles.
178.38 -> And Prettier, although ESLint and Prettier are different tools, we can use
189.48 -> Prettier as an ESLint plugin, that is, not use them as two different tools. This
195.06 -> also makes it easier when we integrate it with VS Code, for example. This is even a
199.62 -> tip that I see a lot of people getting lost. It's just that when I use ESLint with Prettier
203.7 -> I only need the ESLint extension installed in my VS Code. I don't need the Prettier extension
209.46 -> installed, because otherwise we end up generating conflict, because the two tools will
214.02 -> try to standardize the same code, and Prettier is being an ESLint plugin. So,
218.94 -> if I'm using the ESLint extension, I'm already using Prettier automatically.
222.84 -> Another interesting thing is inside our VS
228.42 -> Code "settings.json" file, I have this option here to automatically format the code.
231.54 -> Or rather, it's not this option here, this option here, "editor.codeActionsOnSave": "eslint
237 -> --fix". This option here is super important, because every time I save a file
244.56 -> inside my VS Code, it will make all the ESLint and Prettier adjustments, consequently,
249.6 -> because it is an ESLint plugin, right, in an automated way. And then it is very important that
253.98 -> you have this option, that you have this global option here in the VS Code settings, because
262.8 -> otherwise it will be trying to format your code at the same time that ESLint is also trying
268.02 -> to format your code. And then it will probably generate conflicts within your project.
273.48 -> That done, now, as I have this configuration here from Rocketseat, and I'm not going to create a
279.12 -> configuration from scratch, what I'm going to do is install this ESLint configuration inside
284.7 -> my project. With this excellent configuration installed here, I can also come back here
290.16 -> in my ESLint and here in "extends", I'm going to transform this here into an Array. And then,
296.46 -> I'll put it here with the second option, exactly it's written here, "rocketseat/next".
306 -> Now, just go back inside my "Layout.tsx". Probably, look,
310.08 -> it has already started to give some errors in here. So, the only error inside is
314.52 -> because I'm using this "React" variable, which is a global variable, and it asks that,
319.2 -> in fact, I import "React" from within 'react' itself. And we can see that
324.96 -> he has already adjusted it here in "Page.tsx", there is no error here for him to correct. But if
331.2 -> I put a semicolon here at the end, you can see that it already gives the error automatically,
334.56 -> right? Because of the ESLint extension. If I save it, it already removes the errors automatically.
339.96 -> And this configuration here, it brings several Tailwind configurations in an automated way,
347.46 -> right? So, he puts "printWidth: 80" here, that is, he doesn't let the lines here
352.32 -> exceed 80 characters, right? So, if this line here, for example, the name of the
356.82 -> component was not "Layout", here, you can see that it has 76 characters, right? If I put "root" and
363.48 -> "testLayout", see that, from the moment it passed 80 characters, Prettier starts to
368.94 -> complain about it. And if I save the file, it already adjusts so that line doesn't get too big.
373.56 -> So, Prettier's idea is really to make the code more visually pleasing,
378.12 -> while ESLint focuses on solving code pattern problems.
382.8 -> Now, what we're going to do is that, as I'm using Tailwind inside
387.48 -> my application, a nice thing for us to do is install the Tailwind plugin for Prettier.
395.88 -> What this plugin here does, at the end of the day, it orders our classes here or even removes
403.44 -> classes that they are overlapping. So, imagine, for example, that here in my div,
407.7 -> I put, for example, "p-24" and then I put "p-8". This makes no sense here, because "p-24"
415.32 -> and "p-8", they generate the same result, in the end, it's a padding. But this here, you can
424.38 -> see that when I save it, it doesn't adjust anything, it doesn't change the order of the properties inside.
429.84 -> So, what we're going to do is, I'm going to install it here,
433.98 -> I'm going to install just the Prettier CSS plugin, because I already have Prettier.
439.32 -> And now, I'm going to create a file here at the root of our project called "prettier.config.js". From here
449.28 -> , I'm going to type "module.exports" and here, I just pass the name, which is
456.66 -> "prettier-plugin-tailwind". Except for that here, now, I come and reload Windows here
463.32 -> in my application, so that it can reload the Prettier plugins. I wait a little and
467.58 -> here... let me remember exactly... yeah... because plugin... let me see here... because Prettier...
484.56 -> the plugins... the, I have to use the require here look, in this case, when I use the
489.12 -> JS file pattern, I use require, it could be JSON, then I wouldn't need to do it that way.
493.8 -> So, look, you have to use "require" here, around. Saved, I go back to the page,
498.54 -> I'm going to reload because VS Code doesn't reload Prettier's configs automatically. Is here,
504.9 -> I think maybe... Oh, exactly, he just didn't have any errors,
511.62 -> that's why it wasn't showing anything. But look, when I put "flex" here as a
516.06 -> position after "flex-col", see that it automatically gives a replace error,
520.86 -> right? He changes the order, he saves and "flex" comes here to start. That is, it tries
525.54 -> to semantically place the ordering of the classes here in Tailwind to do the styling.
530.16 -> That one keeps giving an error, right, but it won't remove it automatically because
534.18 -> it doesn't know which one is right, right? If it's the 24 or if it's the 8. So,
537.78 -> I have to remove this one by hand. So, it will just do the ordering here in an
542.04 -> automated way. This here is basically the way I configure all my projects
547.74 -> in the ESLint part. And also Prettier configured together with Tailwind CSS.
554.16 -> I just wanted to leave this tip for you, because I know that there are a lot of people who
557.46 -> are creating new projects using Next. Now that Next is one of the
562.5 -> standard ways to create React projects, and Tailwind is coming as a
567.42 -> standard styling library right there inside Next. This here is the setup I do in all my
571.5 -> projects to configure ESLint, Prettier and also the Prettier plugin of Tailwind CSS.
576.12 -> Leave it in the comments if you'd like me to bring more quick tips videos on
579.96 -> other things you're having trouble with. Put it in the comments
583.02 -> that I want to marathon videos coming out in the coming weeks with several
586.92 -> project creation tips, both in React and Node.js. So, leave it below,
590.94 -> don't forget to leave a comment of what you would like me to bring to the channel.
593.76 -> Big hug, we'll stop here. It cost!
Source: https://www.youtube.com/watch?v=cbSHUVSUFgY