ESLint + Prettier + VS Code - The Perfect Setup

Package and docs available on github here: github.com/wesbos/eslint-conf...
Entire course available at es6.io

[@WesBos]

Y'all should smash that subscribe button, eh?

[@joostschuur]

Why would I break it? Doesn't that keep me from being notified about new videos?

[@davidhahn7391]

Keep making content, Wes! You make great videos!

[@JonesDTaylor]

Just did. Your plugin gave me superpowers man. Thank you so much.

[@khalidskiod]

just did it

[@shafu_xyz]

how do you format html css etc?

[@addyprogger7414]

I always get so confused with all these setups, thank you Wes. Excellent videol.

[@SchoolforHackers]

Nice production and explanation style, WesBos!

[@devaccount4078]

Thanks Wes for the updates about this very point.

[@CerealTuesday]

Top video Wes, superb tips for a great setup, thanks very much for sharing 👍

[@mahathirmohammad8635]

after 4 years this video is still useful. his library is still updated. it is very rare as a open source library by an individual.

[@6Santini]

Man this is so helpful. Thank you Wes Bos

[@christianjurt]

This help a lot. Thanks for the great video.

[@SebastianPerezG]

You are BACK !!!

[@macokaba1964]

Thanks a lot Wes! Great video

[@ThomasFaller]

Great video thanks Wes!

[@aks9842]

Life saving video, thanks alot bro ❤

[@yeayeaof87]

My favorite guru!

[@nano3546]

Great job again Wesbos. Do you plan to make any video about React Hooks, loves your teaching and explaining styles.

[@rounakjain5774]

So valuable, thanks!

[@lcswillems]

Thanks a lot for sharing this!!!

[@joestrkr]

Good stuff! I was fighting last night to get eslint to work with typescript. There are some additional plugins that need to be installed and configured but what ended up missing was the vscode setting "eslint.validate": ["javascript", "typescript"]. It's weird that this setting is not necessary for plain JS.

[@themassagechair6785]

Question: Having followed the instructions in the video, I've noticed that eslint.autoFixOnSave doesn't work with typescript. This confuses me, as it works just fine for javascript-files and npm run lint:fix can format the typescript-files just fine. I have tried turning editor.formatOnSave off for typescript, but eslint.autoFixOnSave still doesn't work. Any tips?

[@fgary]

Thank you 🙌

[@jonatanramhoj]

Great video thanks a lot. So much hokus pokus going on behind the scenes tho with all that extends stuff... Is that "bloat" needed?

[@TheAditya64]

The packages installed are outdated in October 2019. Should I update it or leave it the way they are in their current version ?

[@alexeymind]

Just awesome!

[@prashantrawal3765]

Awesome Wes...i made a repo for myself too

[@es_pythondevelop7981]

thanks man you save my live

[@personal1935]

Many thanks for your awesome explanation and eslint configuration, I am wondering how is possible to add eslint.ignore and some more setting for Prettier and Prettier.ignore and finally some more setting for stylelint into your eslint-config-wesbos?

[@TejoAgus]

How do you do to make Prettier not change your quotes? I want it to respect double or single as I write them, but it seem to be all single or all double from config

[@peterborinski]

Thank you for the video, but you are not going into how to use this with create-react-app (and I think a lot of people would like es-lint with create-react-app). CRA ships with an eslint config; how would you get that to work? And would you use it in conjunction with your package here?

[@cis84muz]

That is valid question. I love this Wes config, but is it worth ejecting CRA? 🤔

[@dazecm]

When using CRA I find it's best to avoid having any eslint versions explicitly specified in the project package.json. It's best to simply focus on getting Prettier and the Prettier eslint configs and plugin packages installed and working with whatever eslint version is baked into the CRA and used by its scripts.

[@egorshumanskii8026]

are you serious? You said "we are going to build it from scratch" and then "Oh guys, I have prepared npm package..." What? Dis!

[@julianklumpers]

i haven't watch it yet, but still wanna say your videos/courses are awesome!

[@WesBos]

Thanks! Glad you enjoy them! Stay tuned for more!

[@mikeonthebox]

Prettier would suggest to change a let to a const? I'm more confused now, I though that was a task for eslint.

[@selftaughtfullstackjourney3460]

smashed to subscribe button faster than npm package download speed

[@UnboxTek]

Thanks for sharing.

[@MarkEdwardTan]

Hi Wes, I'm having a hard time trying to make this work in React that uses typescript. Can you create also ESLint + Prettier + VS Code + Create React App with Typescript + SASS ? Thanks :)

[@adrianpopescu8956]

Hey, did you manage to set up your project? I just set up mine pretty much the same way.

[@Viruhemanth]

Thank You So Much!!

[@guilhermegirardi]

Thanks, God, I mean, thanks, man! Holy shit... it really helped me!

[@ebrelus7687]

Does it block prettier plugin's autofix on save? Does quokka work normally with this setup? Gonna try it after getting more advanced.

[@GastonGarciaO]

Thank you!

[@denniszenanywhere]

What do I do if I don't see a curly bracket in 10:42? Perhaps I have a newer VS Code? Where then do I put it if I don't see a curly bracket? If it's supposed to be on settings.json, where can i find this?

[@Fideliiiis]

Is there a way for it to work with create-react-app without ejecting?

[@manjunath-vadigeri]

I like the font of the comments in the video. How to get it in VS Code ?

[@_Amilio_]

Legendary 👌

[@tubun09]

you should release a video about this on SFC Vue component

[@emilemilsson72]

Wes, Is there a way of doing this with svelte files aswell?

[@rikkrome]

🙏Thank you!!!

[@shusenacademy]

Hi, what's the theme of your shell? I guess it's zsh ?

[@MarfTaylor]

In the following configuration is there a way to make it work only with the code I write, instead of editing the entire file (I am working on big project, and I want to leave the reset of the code untouched)

[@iRafaelkr]

When I do the first step (npx install-peerdeps --dev eslint-config-wesbos), my package.json doesn't change (the list of devDependencies)..

[@samuelkiroko8393]

hi hope well do you mind sharing your settings.json file for the vs code i really love it

[@antoniocarlosroque5039]

Riiiight on!!!!! Just one thing: how to set tab width to be 4?

[@abdulghaniofficial]

Thanks ❤️

[@dave2938]

Hi; What Terminal App are you using?

[@hadikhalili6675]

I think it is hyper - hyper.is

[@rolandmesaros6941]

When I run the npx install-peerdeps command I get the error "ENO such option --dev" ? and when I do it with --global instead I get o such file or directory 'global'

[@boeggy6639]

Hey Bos, on VS code terminal, we have 9 problem, is it normal?

[@zbera97]

That is what I am looking for.

[@vincecaruso6465]

This was a year ago, so I'm wondering if we still need to go through all this? I just download VSC, and prettier and it worked well for formatting, However when I added ESLint and the Prettier/ESL mode, it stopped formatting. Can you point me in the right direction (preferably starting from scratch on the whole thing)? - TIA

[@andyo.4039]

I'm also wondering if this is still relevant...

[@Vapornator]

Could you please tell me how to go about and add the blue bar and color to the terminal window as you have on yours? I can see that as being helpful. Thank you! Great vid by the way.

[@dazecm]

That's a combination of color theme and fonts. Search for Powerline fonts and you should find guides to customising your terminal prompt.

[@tomaszsare8521]

Thank you for persuading me to uninstall ESlint 👍

[@expeng5861]

pretty fine.

[@vizunaldth]

thanks!

[@ShreyasSegu]

Tslint+prettier setup too please!

[@lysy071990]

Can you make an update of this video? Some of these settings aren't already supported.

[@7huannp]

Could you create a new tutorial for typescript react?

[@dreznik]

does this work for front end (non-npm)?

[@vincesanchez7790]

Does this work on create-react-app with Airbnb style

[@PerfectSwingDance]

How to install class property proposal?

[@jakegyllenhaal7220]

How can I use this with a react app? It won't launch due to a conflict between the eslint versions required

[@WesBos]

Hrmm - I don't use CRA but I will take a look. I thought it worked fine because of this → github.com/wesbos/eslint-config-wesbos/issues/9

[@cris19951000]

create a .env file in the root and add SKIP_PREFLIGHT_CHECK=true

[@theouterbrackets]

Or you can delete ESLint from the dev dependancies, then delete package.lock/yarn.lock file and node modules, then run npm install again

[@theouterbrackets]

@@cris19951000 This is maybe what you need, but remember the pre-flight checklist is there for your benefit.

[@theouterbrackets]

@@WesBos is there a reason you don't use CRA? Don't like it?

[@aidanwalker7136]

will this work with a react app if i follow this?

[@SajidAliSoftwareEngineer]

how you add a border around the terminal

[@yoandyvillaman2790]

What is the name of the plugin that suggests the commands? like 6:59

[@zuberab5405]

github.com/zsh-users/zsh-syntax-highlighting

[@yoandyvillaman2790]

@@zuberab5405 I mean that you complete the phrase you want to put, for example ls -a, you put ls and the terminal suggests the -a, bu thanks 😊😊

[@zuberab5405]

​@@yoandyvillaman2790 I am not sure there is a plugin for hyper but Upterm github.com/railsware/upterm does autocompletion you can also use zsh-autosuggestions github.com/zsh-users/zsh-autosuggestions

[@WesBos]

It's zsh-autosuggestions for ZSH

[@mehrdad-ai]

Wes I have a question. Do you code also as freelancer/employee? Or you devote all of your time teaching coding?

[@WesBos]

I was a freelance consultant for about 10 years and made courses for about 6 of those - been just working on my own course platform and making courses full time for about 2 years now

[@mehrdad-ai]

@@WesBos Besides one's love for teaching others, do you think that's a good way to make passive income?

[@WesBos]

@@mehrdad-ai Its far from passive, but it is certainly a career option if you can build up the audience and know your stuff

[@mehrdad-ai]

@@WesBos Really appreciate your advice. would love to hear more about this career from you. would you choose it again? what would you have done differently? +1 if you too.

[@Iamclawed]

What’s the VSCode theme?

[@szymonrojek6480]

Guys how to stop overwriting let for const? Sometimes I want to change a value of variable, thanks :)

[@myamoto-musasi]

Hi, which terminal were you used.

[@weslley39]

hyper.is/

[@WesBos]

Hyper. Check wesbos.com/uses for more

[@maskahleo]

how do lint one page at the time

[@Diamonddrake]

I wonder if they know no-sweat is not a defendable trademark because it doesn’t have a clear separate meaning from its popular phrase usage

[@selftaughtfullstackjourney3460]

wes u don't extend into prettier, is it included in wesbos? where is prettier ?

[@ZombiTV1]

hi, thnx for the video. Can u plz share ur hyperjs custom, thnx.

[@johnnyelcoste]

cool

[@aram5642]

with small exceptions (like indent or max-len rules), Prettier is not needed. You can have lint on save with just eslint.

[@karishmashaik3590]

How? Can you explain clearly, Thanks!

[@sidokouki670]

they solve different problems though

[@zieglmeierjakob]

Doesnt work for me. "Failed to load parser 'babel-eslint' ..."

[@justpassingbylearning]

What terminal are you using and what theme for it>

[@munyafiction]

github.com/zeit/hyper

[@expeng5861]

i want your vscode font-family....so ,i got it Operator-Mono

[@YunisRajab]

Global install don't work bos!!! Eslint 7??

[@yadusolparterre]

Why don't you simply install the VSCode Prettier extension? Looks like it would be way simpler

[@ikedacripps]

why must i go through this stress just for set up??

[@whiskers08spot09]

maybe because im using windows but of course it doesnt work after running $ npm run lint:fix

[@timtitus7861]

airbnb is too strict

[@chuyelregio5]

that fucked up all my settings

[@dom7019]

npm run:fix just hangs.. does nothing.

[@prsion1925]

Only (ESlint + Sublime_3) or PHPStorm !!!!! cause VScode is the piece of virus which permanently loads memory( 5-7 process each of them about 800 Mb)

[@cis84muz]

PHPStorm to JS projects? I don't think so :P

[@carlosmendez3363]

You just need to download some more RAM bro!

[@prsion1925]

@@cis84muz Why not??? WebStorm+PHP=PHPStorm exactly the same thing

[@MarcelRobitaille]

Can't eslint already fix stuff? Why the need for prettier? Personally, I hate prettier and just write eslint rules.