How To Setup Prettier
ฝัง
- เผยแพร่เมื่อ 2 ส.ค. 2024
- Prettier is one of my favorites tools for writing clean and easy to read code since it does all the formatting for you. In this video I will show you how to setup Prettier, how to use it in your IDE, how to configure it with ESLint, and a few other small Prettier tips.
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:38 - Installation
01:35 - Command Line Usage
02:51 - Integrating Into VSCode
06:18 - Ignoring Files
08:00 - Configuration Options
09:55 - Using With Eslint
#Prettier #WDS #JavaScript
![[LIVE] : ONE ลุมพินี 73 วันนี้!! คู่เอก "วรพล vs พันฤทธิ์"](http://i.ytimg.com/vi/rrOljlqse3A/mqdefault.jpg)
Gosh, I’ve been curious about the ACTUAL correct way of setting Prettier up. Thanks again for such an eloquent yet concise tutorial!
Great comprehensive yet short and sweet intro to Prettier. I knew 2/3rds of this stuff, but it's good to have all this in one place. A great video to start or to link to someone starting.
Excellent video. The last part was really helpful. Whenever I start a new project, one of the hardest things to get right is to configure ESLint and Prettier to work well with each other. Great job explaining that bit.
This is sorcery. I was kind of struggling with prettier and eslint for the past two days now. Nice one kyle
You read my mind! I was just having trouble setting this up last week. And now I know why. Thanks.
Excellent video that covers all the essential information a developer should be aware of.
Very appreciating your last part 09:55 about "Using With Eslint"!!!
Thank you a lot
Was trying this for so long... finally you are here❤️
I've already finished a node.js back-end course and my teacher magically made the .prettierrc file work when he saved the changes of a file, but i didn't get why. With this tutorial I understood why it is. Thanks a lot, you rock.
Loved your videos Web dev and all your courses specially JS Simplified
Awesome video Kyle. Would be awesome to see a similar video made for ESLint also.
This tutorial on how to set up Prettier was incredibly helpful! The presenter did a great job of explaining the benefits of using Prettier and demonstrated each step clearly and concisely. The visual presentation of the video made it easy to follow along and understand each concept, and the tips and insights provided throughout the tutorial were very helpful. Thanks to this video, I was able to set up Prettier in my JavaScript project quickly and easily. I highly recommend this tutorial to anyone looking to improve their code formatting and simplify their workflow.
gpt ass comment
I always wanted to start using it but never know right way to actually it set up. Thanks!
this couldnt have been come out at a better time
for some reason my prettier stopped working and this will be so helpfull
thank you so much
Very nice tutorial! Thanks Kyle!
You are fking very smart. A real time saver for dummies like myself. Thumbs up man.
Keep it up and thanks.
Thank you Kyle nice teaching...
On point! Thanks Kyle.
Thank you that was super useful ❤
Very useful! Thnx a lot!
clear and concise 🙌
nice video ! thank you
11:25 Interesting. I tend to go 1 step further and instead of running npx eslint-config-prettier and manually turning off conflicting rules, I just make eslint use prettier as a formatter. So in my eslint config I just do "extends": ["some-config-you-extend", "plugin:prettier/recommended"]. It's not necessary but this way eslint is using prettier as its plugin and there is zero chance for any conflicts.
Great video
Awesome video :)
The good thing in this channel is you don't waste our time
good stuff ✌
Great tutorial as usual. Triggered my OCD in the title though using the word 'setup' as a verb, grrr!
thanks buddy
Great video! can you do one with eslint? and maybe the configure it with prettier?
Thanks
love WebStorm
you're good boy Kyle
You should change the intro music to a death metal riff
Would really like for you to do an updated how YOU have setup VS Code and live browser updating. I know you did this some years ago, but things have changed.
bro yr amaizing
Nice ❤
That thumbnail like how you'd even manage to get the before bit 💀💀💀
When trying prettier for Tailwindcss in VS Code it always complains about my using closing semanitc HTML tags - Not sure why so I always end up disabling Prettier - anyone have any ideas?
i dont have text editor option to select prettier
Hi Kyle, ESLint 9.0.0 is out (breaking changes). If you have time/will, please make a video on ESLint and Prettier in a node.js typescript project (e.g. Nest.js).
It would be really appreciated. Thanks in advance.
thaksn
Using the actual version is a personal choice. But if prettier isnt using semver and break things in minor versions, than this would be an advice, or use something better that use semver.
If you want to use the exact version or use the ^ should just be a personal preference.
please make a tutorial video about how to connect PHP to REACT and how we use them together ...
There is also an awesome trick you can use. Write a comment with “prettier-ignore” and it will ignore the next code block (i.e. function, loop..). It’s useful when you have a long line and you don’t want it to wrap.
What's the difference between just clicking Alt+Shift+F?
I've been using eslint and prettier for years and I still spend a day or two trying to configure them every time I start a new project, and it never works out as I like anyway and I just settle for whatever doesn't break in the end 😅
This sounds awful tbh
Kyle, you could use -D instead of --save-dev. It uses less effort.
I just use eslint for both. I don't see why we need a separate dependency and editor plugin to perform the 5 or so tasks that eslint can handle just fine.
Will prettier works with all framework files ? For eg, *.feature files. I have prettier that works with react/typescript/css files except this automation files.
Can you do a random video playing the guitar behind you?
Is it possible to set up Prettier to use the Airbnb Javascript style guide?
How can we do production ready webpack configuration in react app..?
This is actually the development area that gets me p.ssed off. There is too many of those formatting tools around, and none of them is either complete or cross-platform/cross-IDE. Prettier, editorconfig, eslint fixers, and then ide plugins or internal settings. I wish I could only use liny fixers with the vast gamut of options webstorm offers.
Hello can you make a live streaming app like twitch tv using mern stack and key stream for every streamer to connect with obs ? Thanks
WHy after runnig prettier your object have all prop on different lines where mine is oneliner?
I like and use prettier just because. I picked it up a few years back and never turned it off...
note: you need only `npm i prettier` to install prettier since --save-dev is the default behaviour of npm
Prettier is nice for JS/TS code, but a catastrophe for any kind of markup (e.g. HTML), at least if you have lots of attributes (let's say because of accessibility)
It prints every single attribute of an html element (for example) on a new line. This makes the arguments readable, but drops the readability of the overall structure of the document (which when reading HTML you are most likely MORE interested in) into oblivion.
Prettier just forces you into one code-style, without even thinking for a second that there may be different requirements for styling of code (e.g. JS/TS) and markup (e.g. HTML).
If you have to (heterogenous team with members all around the world using different IDEs) you can use it. But if you are in homogenous environment with direct contact to your colleagues you will 100% find a better solution for you
If my project has prettier in devDependencies but my team has prettier local to their mac's, will it override their local settings? If not,, how do they turn it off?
how to get array values to show up on the new line
The issue with front end is that there are a billion packages to install lol. Good vid tho.
Why do we need the extension if we install the dev prettier pkg?
I still can't believe prettier by default gives HTML void elements a closing slash. It also just can't handle long strings in a sane enough way.
Is there an add-on for VS 2022 proper?
Log(a * b < 7 ? 'Ugly' : 'pretty')
Ternaries all the way baby
Please make ritch text editor or wysiwyg tutorial using Javascript 🙏
My issue is not the topic here. but this is what comes to my mind seeing Prettier and Co.'s default results of code 'prettifying', sorry for the off-topic rant: (btw. a clue to a more appropriate, more effective forum for my topic is welcome)
Why does everyone, including the most popular tools, insist on a formatting habit coming from the 1980's, the days of 25 to 80 characters per line screens, when all source code was printed out on matrix printers to fanfold paper, as the only way of being well-documented and kept safe. When 'structured, clean programming' meant one variable/statement/nesting depth per line. It has even evolved to a stage when each function declaration had to start on a new page when printed.
It is now 2023. Of my three monitors, the middle one alone is 4096 pixels, almost a meter wide (it's a 48" 4k OLED 👍), perhaps even more significant is that my two eyes are arranged horizontally 👀 (maybe this is the reason why I hate vertical videos too). In a word: I have plenty of horizontal screen space. Vertical space is however a precious treasure for me and all programmers I know. Then why is this code writing style that wastes the most valuable, vertical space is so widespread?
Believe me, understanding two or three basic object properties profanely written into one line, or even an if-then-else structure where not a whole line for each curly brace is wasted (I regularly see two additional empty lines added around to further ease the indigestible mystery of the curly braces of a simple if-then-else), is not beyond the intellectual capacity of even a novice programmer. But having to scroll back and forth several meters to understand a simple program is a challenge for us all. Even if you don't recognize it as a problem: understanding several related logical units in the same field of vision is way more easy than assemble one in mind from several screens. Just give it a try!
Please limit the spread of vertically diluted source code, it is as pointless as how the vertical videos are stupid. The only difference is that those videos are perpetrated by incompetents, but this vertical coding style is unfortunately spread by professionals.
Professionals who think that a simple 'if (s==='nope') return null else return s' instruction, although it is written in plain English, is only interpretable for all other programmers and their future selves when spread to 8 lines of code (or 12-15 lines if the even more pretty 'clarifying' empty lines are added), covering a significant part of any computer screen. What do they think is then needed to understand a complex parallel thread-safe multilevel abstraction? Seven empty lines between statements?
PS: I would appreciate seeing a config/setting for doing the opposite of the 'prettifying' vertical code dilution: a vertical code condenser, an 'uglyfier' Like removing empty lines when more then one, one-line conditional/loop statements when only one statement is in the block, one-line object initializers (when properties are unnested and fit within a line), etc. This is not to confuse with code minifying, my 'uglyfier', let's name it vertical condenser, would make the code more concise, more readable.
👍
Can’t find anything to run prettier on save with IntelliJ 😢
yeaehhhh!!!!!
i actually like the standard formatter more
Do u still need to install package if using vs code extension
Annnndd as i kept watching u answered this lol nvd
Bs"D
Hi Kyle! I'm building a Spotify's clone with Spotify for developers and your TH-cam's video. There's a login button, when I touch it, it goes to the page that I am building now, and few seconds turns back to the page in the button's login.
My issue with prettier is that it's so opinionated and hard to configure. How about an ESLint tutorial? Including for TS
it says the npm command is not found
Standardjs has the better formatting rules and zero configuration. And the main thing that it is a standard which is mean that you can not change the standard of the rules it uses to format your code. In this way every developer you work with on some project has the same set of rules that formatter applies to make a cleanup in the project code. Thus you use the same solid standard of the code style which is setuped by default always.
"Standardjs has the better formatting rules" - that is subjective, but nice try stating it as a fact.
For example, standardjs removes dangling commas. And some devs might prefer dangling commas because when you rearrange items in arrays or objects using shortcuts, you don't have to worry about missing comma.
And this is just one of the examples...
So in this case, when team prefers this rule, Standartjs is instantly not an option.
Eslint + prettier gives more freedom (even tho prettier is opinionated and might have some edge case problems itself with very specific projects).
And what do i do if prettier is doing garbage formatting like my second input line here :
{errors && {errors}}
.
For some stupid reason it thinks that the second input line here is easier to read and formats it different than the rest. Been driving me crazy.
Oh, Jetbrains' tools have it as default.
You can perform the code reformat associated to a bind like the saving file or a key binding, configuring how it works for each type of file etc..
Prettier js can be good when using concurrency before building to production tho
Bro Will this work in trading BRO?
I don't like the way prettier formats my boostrap lines, i just use build in formater
Doesn't the package-lock.json remove the need to save the exact version of the library?
_presses alt+shift+f in vscode_
_random stuff breaks_
Guys, can someone tell me, prettier in css does not work
I tried the prettier extension in VS Code, but had to uninstall it. It was *too* opinionated for me, and there was no way to ease up on certain things in the settings. Prettier said "Take me as I am, or leave me!", and I said "Bye, Felicia!".
ESLint is a way better formatter, because it's flexible enough that you can customize it's formatting rules really easily. Please do yourself a favour when you start a new job: Make sure you don't install Prettier until you know if there are no other code formatting tools that your team has standardized on. Prettier can reformat a whole code base and mess up the git blame on each line of code changed due to automatic re-formatting. You will just aggravate all the other devs on the team.
Is that an American Jackson in the background?
how to unistall
Ideally each person could have their own prettier settings and see the code formatting the way they want to see it. Why don't we have that option yet?
umm then what will happen with version control? after i edit a file the whole file will be highlighted by git as changed i guess
@@nivethan_me the file should be committed without the spaces and line breaks, i guess??
no, ideally .prettierrc are pushed to repo and prettier configuration are consensus of the repo maintainer,
so every PR will not display unecessary formatting changes
Absolutely not. Formatting should be consistent across the repo.
What a dumb idea
Explain why you do not like semicolons and what that means in the feature
just use standard
Why don't you simply right click & press the format document option rather than making this so complicated or use the formatfiles extension.
Yes, I use that feature all the time. Why would I install prettier??
First 😁
Not a fan of opinionated formatters. Their "opinions" just don't work for me. Maybe because I have a graphics design background I try and write my code as readable as I can in the first place. If only to do myself a favor when I have to change it at a later moment. My tip: do not indent to much: 2 spaces work very well.
To setup it you should only delete it and never use again. Hate it!
my problem with prettier is using the tags getting closed like this, ive tried editing the prettier.json but it didnt work
anyone know how to setup multiline assignment alignment with vscode like
this.screenVariables = layerAttributes.screenVariables
this.events = layerAttributes.events
this.editorAttributes = layerAttributes.editorAttributes || {}
this.connectedFaceplateScriptId = layerAttributes.connectedFaceplateScriptId
I disliked this video bc I'm extremally demanding and extremally impatient, I've asked google for "how to config prettier" and it gave me a video about installing it. Web Dev Simplified it may not be your fault, but it is your loss anyway.