Thank you for taking the time in your life to create these videos to help us all out. It's especially interesting that you're able to keep bringing out new and interesting content for beginning and experienced web developers
This just makes me realize that formatting should be interpreted when you open the file, not when you write or save it. i.e. there should be no need for a global corporate formatting system because you should be able to choose your formatting individually, and that formatting is set when you open/save the file
And how would that work when you're merging stuff that your coworker did (that is formatted totally wrong, according to your local formatting style guide lines)? Your coworker creates a block of code that you need to edit a bit, then it's entirely reformatted, and you have now touched every single line of code. Goodbye GIT blame.
A nice feature you can use with the command line is creating git hooks. Configure your formatter locally as you like but as soon as you commit changes, it will be formatted according to the guidelines.
I've moved away from prettier-eslint by combining eslint-plugin-prettier and eslint-config-prettier. This perfectly combines the two, letting prettier take over all formatting linting using your config, and doesn't require more plugins to use.
If you happen to work in a team make sure you either use the same auto-formatter with the same setting across the whole team, or nobody should use anything at all. if you try live in between then you will encounter a ton of conflicts on every merge. Using a lazy autoformatter that only changes the lines you actually touched might work as well.
Enforcing code quality tools as a CI step is a must in growing teams. First thing we do in all projects is setup eslint, prettier, and a basic testing config.
I don't like Prettier because it enforces certain code style rules like collapsing statements to one line in JavaScript.. Or not letting you break objects and arrays into multiple lines unless it exceeds the max-width you set on your lines. I really prefer having objects and arrays into multiple lines because it makes it so much easier to edit them. Additionally, it also has benefits in Git because Git picks up the changes in an array or object better that way because you only removed or added a few lines rather than editing the array/object on one line. Because of this I don't use Prettier anymore and prefer letting ESLint handle it all.
Thanks for providing your personal solution. I'm working on a project an I miss Prettier, but I remember the things you said about it handling JavaScript and PHP so I've been hesitant to grab and Install it.
For me, formatting code is one of the easiest things in programming. I always write perfect formatted code directly. I often see programmers who don't care about good formatting which is really awkward for me ^^
@@m3awna Then I don't understand your suggestion. I'm just typing for example: selector { width: 42px; } instead of selector{ width:1337px;} I'm using the JetBrains IDEs. Maybe it is easier and faster to write formatted code with these IDEs. I'm not using VSC so I don't know.
I found that box-shadow is annoying in Prettier, I like to have each on separate line, prettier clumps everything together ... that's not readable, anyone knows how to fix it?
Fantastic video! When I add up the time spent manually chasing correct formatting, Kevin you might have given me back literal days this year ❤️ not necessarily with regard to the technical detail, rather affirming that it’s *okay* to just let a formatter do it’s thing.
Me again. This is a huge help. I do agree that formatting code is a loss of time. Unfortunately this is not available for other languages. In Java this would be very complicated because of Javadoc, but Eclipse already has some automatic standard formatting, which helps a lot. By the way, it would be nice if Javadoc would be formatted as we see the code on the IDE (Eclipse), instead of needing to hover over with the mouse. Javadoc kind of obfuscates the code. It looks like that you have not only excellent communication skills but also a lot of practice in programming and teaching (I knew!!!). I don't know if it is also because your English is Canadian that it makes it sound better. But I believe one can barely notice any Canadian spelling of yours except for the pronunciation of "out" as in "about". Most Canadians are easily recognized in this spelling. 👍
How did you get them to cooperate. I have a colleague who is struggling with the two cos they don't play nice and Eslint is in the build process so the code just breaks on some of prettier formating randomly. Eslint throws a spoilt fit randomly
@@tinmancode Kevin mentions it briefly, there's a third library called eslint-config-prettier, which turns off the eslint rules that conflict with prettier's formatting rules. If you don't add that, then yeah they do tend to battle each other on certain things. Add that library and they work really well together. We have three package.json scripts in our setup. "format" is for developers to use locally before committing and it runs prettier with the --write flag. "format:check" is for the build pipeline, and runs the prettier validation without write. And then "lint" is for local and build pipeline, and runs the eslint check.
I have used Beautify formatter since almost 2 yr. Yesterday I was trying to switch into prettier formatter but I can't some reason of issues. As like can't format HTML file in my case. I tried more and more for staying prettier but I can't stayed Eventually, I switched back in Beautify formatter 😔
Hi Kevin, I am not a fan of CSS but, your videos inspire me to use it. My question is: Is material UI a good choice when styling in React-based frameworks
Is white a good paint for cars? Is range rover a good choice for asphalt based roads, Why. Pick it cos you want to learn it, or you like it or you are exploring. The time of your project is also a good point to consider. If you really have to pick one then you need something to compare them against. Like how long will it take to learn that framework vs the time to deliver if the work has a deadline. Do you need pre built components that are already built to speed up your development. Or do you have a custom interface created by a designer for you which means you have to write extra code to make the material ui look like the design you were giving. Do you have custom behaviors needs for your elements and are most supported by the library you pick. Tab indexing and other accessible web requirements. You don't want your org to fail ADA compliance
I dislike Prettier for CSS cause it's not configurable enough. printWidth: 80 is fine as a general rule but I don't want it line breaking in the middle of a selector. When I have 3 comma separated selectors I want 3 lines of code. Even if one selector is too wide I don't wanna see it broken up into 2 lines of code. Consider this: article section header h1, article section aside header h1, aside h1 { color:red; } The second selector contains a line break. Makes it hard to read because it's 3 selectors so you expect 3 lines. Not 4 lines. Sure I could increase the printWidth but then long background gradients I intentionally split up into multiple lines will be re formatted into a single line. And I don't wanna sprinkle my code with ignore comments. I wanna config by rule. lineBreakSelectors: false, lineBreakPropertyValues: true But you can't do that.
How come when you save your HTML file with Prettier, it auto formats your code where I/ see the image element does not have the forward slash in the self-closing tag? Every time I save with Prettier, it always adds an unnecessary slash. Is there a setting or something I'm overlooking?
thks mate for your video! I can suggest you to remember to unflag option in Prettier "Require Config", because in some case when you install Prettier first time this is flagged and Prettier doesn't work without a configuration file in the root of project. i hope this is helpful.
I hope you guys can help me! How can i write a line of Html Code that should be ignored by prettier. For example i have two paragraphs next to each other as CSS -Inline-Block lorem lorem and i want them to stay like this.....Prettier puts them one under the other. Please help.
Prettier is designed to eliminate bike shedding about style formatting. If you don't have this problem there are more configurable options out there. Opinions are often wrong, and while prettier is "standard" and "consistent" is is neither intelligent nor meaningful in many contexts. It can actually pollute code that would otherwise be easy to read, and can result in inconsistent patterns. I can think of a lot of contexts where prettier helps: React code being one of them. But there are other code patterns that are better suited to formatting by eslint extensions or similar configurable formatters. My experience is that prettier causes friction when not being used for its intended purpose: to eliminate debate. If your code team members are mature and can comport themselves effectively, there is often no need to introduce the "prettier layer" - and often a liberal exclusion in .prettierignore is more effective at keeping velocity than having prettier in your pipeline. Yes, this is also an opinion - but one you will see disallowed in any prettier moderated forum as such debate is excluded by definition. For this reason, prettier is a bike shedding about bike shedding, IMHO.
Prettier out of the box puts /> at the end of a lot of HEADER tags when you save the HTML file, which breaks WC3 validation. It's not obvious how to turn this "feature" off.
OK, went through to prettier and dug through this on a message board, it cannot be changed. There's a long discussion on pros and cons and such, but if you use prettier, you cannot get your HTML file validated on the W3C validator as it will choke on the self-closing meta header tags by default
I have a few strong opinions about formatting, and a few of those disagree with Prettier's, but the one that I REALLY hate is that it doesn't align variables and properties values, and even removes the alignment if you do it manually. IntelliJ's builtin formatter is much better IMO, but not everyone uses IntelliJ (not even myself anymore at this point) and Prettier kinda became the industry's standard so I live with it, but I still don't like it.
Nothing like taking code from your co-workers and completely changing the formatting to your own because screw you Greg for leaving me with the bar tab.
I find Prettier to be frustrating to work with on HTML files. Its great for CSS, JS and other code, but it can be a struggle with HTML. It tends to randomly not work and its not easy to figure out why. Simply putting a span inside a div can break the code and it won't format when saved.
You probably want to check if you have a syntax error. If you use vscode then look at the bottom right. When prettier stop formatting. It will have a warning triangle. Click it and it will point out what's missing. It's not much help when html elements are missing are more than is needed. But the presence of the triangle should prompt you that your hl has issue. In that case first indent all the lines using the indent shortcut then start folding blocks of html one chunk at a time. Just do that carefully and you'll find the problem tag
Debugging is an art and skill sometimes. And always look at the error messages in your editor. I've realized a ton of my bugs are syntax related when the code stops working completely. I check syntax before logic errors except if the code runs
Tried Prettier, but it misunderstood a bunch of my Typescript code and just messed it up. It's a bit *too* opinionated. Happier with just ESLint. The point should not really be to "take decisions away" - but to provide a reasonable baseline.
Might by hair splitting, but the title of the video is a little bit confusing. Formatting code is not a waste of time, it's just a waste of time doing it by HAND 😎 Like your videos very much!
I am unable to make Prettier work for html docs with a php extension - despite trying to install the Prettier php extension. Could you make a quick video showing how to do that?
prettier extension is configured as a formatter but cannot format the file 😥there was a problem in sass file after installing the prettier. Somebody know why?
I remember losing some marks on an assignment at uni because of my formatting. I have always been a 2 spaces person. Something that I don't like is tabbed code.
I like using prettier for css and js. But I disabled it because I don't like the way it format html file. I would use it if I can disable it from not formatting html. Thanks Kevin.
Considering all of my projects have been solo projects... my formatting is literally whatever the hell I feel like in the moment... so yeah. Never look at my code if you get angry hahaha. I use a prettifier plugin to help clean it up, but it also causes some problems.. so I can't use it often.
I have a colleague that has prettier and Eslint. Even Rússia and usa get along better than those two extensions. And the code breaks because Eslint is hooked into the build and there are some prettier formatting it hates. Working on that code base is miserable. I would rather code in binary with a pencil and paper
Prettier is the one Code add-on that I've NEVER been able to successfully been able to install and have work right. I was so hopeful when I saw this video. But no luck for me. After following your video step by step, I still have ugly code. So sad.
Hoping you will soon upload a video describing actual website webpage layout formatting as I'm having difficulty in arranging layouts how to put things in a right place so that it could make the actual webpage
You'd probably need start with a design on paper or figma or xd and then try identifying the parts of the design like anatomy of a organism and the try to write your code that way. Create code or html elements for the big organs first like where does the navbar go. The aside. Your headings and body. Little stuff and have fun
Hi, I have watched a lot of your CSS videos and found many ot them very useful. However prettier, and other code formatters I have looked at do not seem to be able to be configured to the very strict way I write my code and have done for many years If there is a config option for prettier that does this then I would be glad to learn it. I do essentially Allman style code formatting in all languages, where opening braces and parentheses appear on a line by themselves and align verically with the matchung closing brace/parenthesis. The exception is where all the enclosed code can fit comfortably on one line. Also the indented code is indented by 1 tab, and not a number of spaces. I know this is controversial but I would like to know if any formatter can be configured this way. I got VSC to nearly do it right once but have not tried recently
Don't think so, no. Specially since it's hard to say what tag is actually missing at times depending on how things are nested, and also, as a lot of elements have optional closing tags, like paragraphs, list items, and a few others... I could be wrong on that though, I haven't tested it out specifically.
Prettier is great but only one thing i dont like... In my react jsx code on formatting prettier adds {" "} on starting and end of word inside html element.
I honestly pretty much hate Prettier. I dont like opinionated formaters at all. :) And I think in many way Prettier is incompatible with coding standards. Even in this video: That HTML should be whole on new line and not wrapped by preset line width. Not mentioning missing tags. ... Prettier and HTML really doesn't go together. If someone wants to use it then only for JS, TS, etc, but not for templates.
Formatting is THE most important thing just to make code readable. However its done is not my business. people not formatting code is the equivalent of using code like while (*s++ = *t++); to copy one string to another in C. Its correct no doubt, but unreadable to any person
Okey, the point of "just use Prettier" means that you don't understand the point of formatting at all. What problem formatting solves? The answer is readability. The whole point of formatting is to increase readability. We always have many stylistic rules but even with many stylistic rules there are always multiple options to format your code while following the rules. The problem with automatic formatters is that they don't care about readability. They care about the rules and they just always pick one specific option to format the code. The biggest problem is usually with line wrapping. Oh, you decided to split this condition over three lines so that it's obvious what it does? Prettify just wraps it back into one line.
This is like saying grammar and punctuation doesn't matter. You can't know a good, opinionated prettier if you've never tried to format your code nicely. It is essential to leave behind code that others can read. It is a core skill of programmers that they care about how code is formatted. Does prettier remove bad variable names? Does prettier remove redundant code? Does prettier work in C# or C++ or Java or RUST or Python? Does prettier acknowledge a good coder's consistency? Does prettier help you think about what you're doing? I disagree with your premise - formatting your code properly is not a waste of time - it is an essential skill and well worth thinking about. Taking the time to do it is never wasted. The opinions of prettier were based on that time that was taken to care about code format and, as irrelevant as this is, in my opinion - since we're going with opinion - I can format code way better than it can - because I care to - because I practice doing it. It is far more important that we take the time to format our code consistently than it is to rely on tools to do it. Tools are fine, but, they are no more than polish on the gem of a well organized mind. The programmer, herself, needs to care about such things - two carpenters may build a functional chair, but one might build a more elegant one. This is care of craft.
