I have installed and configured so many tools in the last few days (vscode, jsdoc, eslint, prettier....) that I feel like I can now officially be called a pro-programmer, using all this stuff to increase my pro-productivity.
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.
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.
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.
I prefer eslent for formatting ts and js files, as I like doing things a certain way that prettier doesn't allow for. But I like prettier for jsx and tsx so it definitely has its place in my toolbox
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?
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.
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.
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.
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.
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 😅
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?
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.
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.
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.
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.
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
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!".
Bs"D Hi Kyle! I'm building a Spotify's clone with Spotify for developers and your RU-vid'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.
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.
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.
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.
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.
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
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?
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.