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?
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)
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?
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.
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 :)
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.
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
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'
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?
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?
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
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.
@@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
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
@@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.
Crazy setup... - Remove this - Download that - Setup this - Turn off that - But turn it off only for this - So that will work like this - Also it needs 10 peerDependencies And after all that still don't understand how to set it up. Pretty sure there is a more simple way to all that
Y'all should smash that subscribe button, eh?
Why would I break it? Doesn't that keep me from being notified about new videos?
Keep making content, Wes! You make great videos!
Just did. Your plugin gave me superpowers man. Thank you so much.
just did it
how do you format html css etc?
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.
are you serious? You said "we are going to build it from scratch" and then "Oh guys, I have prepared npm package..." What? Dis!
Nice production and explanation style, WesBos!
I always get so confused with all these setups, thank you Wes. Excellent videol.
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?
Man this is so helpful. Thank you Wes Bos
I like the font of the comments in the video. How to get it in VS Code ?
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)
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?
That is valid question. I love this Wes config, but is it worth ejecting CRA? 🤔
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.
Thanks Wes for the updates about this very point.
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 :)
Hey, did you manage to set up your project? I just set up mine pretty much the same way.
Life saving video, thanks alot bro ❤
Can you make an update of this video? Some of these settings aren't already supported.
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.
Top video Wes, superb tips for a great setup, thanks very much for sharing 👍
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
I'm also wondering if this is still relevant...
The packages installed are outdated in October 2019. Should I update it or leave it the way they are in their current version ?
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'
i haven't watch it yet, but still wanna say your videos/courses are awesome!
Thanks! Glad you enjoy them! Stay tuned for more!
Doesnt work for me. "Failed to load parser 'babel-eslint' ..."
When I do the first step (npx install-peerdeps --dev eslint-config-wesbos), my package.json doesn't change (the list of devDependencies)..
Does it block prettier plugin's autofix on save? Does quokka work normally with this setup? Gonna try it after getting more advanced.
Riiiight on!!!!!
Just one thing: how to set tab width to be 4?
how you add a border around the terminal
Guys how to stop overwriting let for const? Sometimes I want to change a value of variable, thanks :)
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?
You are BACK !!!
Hi, what's the theme of your shell? I guess it's zsh ?
Global install don't work bos!!! Eslint 7??
Is there a way for it to work with create-react-app without ejecting?
Great job again Wesbos. Do you plan to make any video about React Hooks, loves your teaching and explaining styles.
smashed to subscribe button faster than npm package download speed
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
will this work with a react app if i follow this?
Could you create a new tutorial for typescript react?
What’s the VSCode theme?
How to install class property proposal?
hi hope well do you mind sharing your settings.json file for the vs code i really love it
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?
Does this work on create-react-app with Airbnb style
This help a lot. Thanks for the great video.
Wes, Is there a way of doing this with svelte files aswell?
wes u don't extend into prettier, is it included in wesbos? where is prettier ?
does this work for front end (non-npm)?
Great video thanks Wes!
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
you should release a video about this on SFC Vue component
Hey Bos, on VS code terminal, we have 9 problem, is it normal?
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.
That's a combination of color theme and fonts. Search for Powerline fonts and you should find guides to customising your terminal prompt.
What is the name of the plugin that suggests the commands? like 6:59
github.com/zsh-users/zsh-syntax-highlighting
@@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 😊😊
@@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
It's zsh-autosuggestions for ZSH
Why don't you simply install the VSCode Prettier extension? Looks like it would be way simpler
why must i go through this stress just for set up??
with small exceptions (like indent or max-len rules), Prettier is not needed. You can have lint on save with just eslint.
How? Can you explain clearly, Thanks!
they solve different problems though
how do lint one page at the time
Thanks a lot for sharing this!!!
Hi;
What Terminal App are you using?
I think it is hyper - hyper.is
Awesome Wes...i made a repo for myself too
So valuable, thanks!
Thank you for persuading me to uninstall ESlint
👍
Legendary 👌
Hi, which terminal were you used.
hyper.is/
Hyper. Check wesbos.com/uses for more
Thank you 🙌
My favorite guru!
That is what I am looking for.
maybe because im using windows but of course it doesnt work after running
$ npm run lint:fix
thanks man
you save my live
Wes I have a question. Do you code also as freelancer/employee? Or you devote all of your time teaching coding?
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
@@WesBos Besides one's love for teaching others, do you think that's a good way to make passive income?
@@mehrdad-ai Its far from passive, but it is certainly a career option if you can build up the audience and know your stuff
@@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.
Just awesome!
Thanks, God, I mean, thanks, man! Holy shit... it really helped me!
Thank You So Much!!
hi, thnx for the video. Can u plz share ur hyperjs custom, thnx.
i want your vscode font-family....so ,i got it Operator-Mono
that fucked up all my settings
Thanks ❤️
🙏Thank you!!!
Tslint+prettier setup too please!
pretty fine.
thanks!
What terminal are you using and what theme for it>
github.com/zeit/hyper
Can't eslint already fix stuff? Why the need for prettier? Personally, I hate prettier and just write eslint rules.
npm run:fix just hangs.. does nothing.
airbnb is too strict
cool
Crazy setup...
- Remove this
- Download that
- Setup this
- Turn off that
- But turn it off only for this
- So that will work like this
- Also it needs 10 peerDependencies
And after all that still don't understand how to set it up.
Pretty sure there is a more simple way to all that
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)
PHPStorm to JS projects? I don't think so :P
You just need to download some more RAM bro!
@@cis84muz Why not??? WebStorm+PHP=PHPStorm exactly the same thing
Thanks a lot Wes! Great video
Thanks for sharing.
Thank you!