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)
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.
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 :)
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
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?
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?
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?
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.
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.
@@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
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!
I always get so confused with all these setups, thank you Wes. Excellent videol.
Thanks Wes for the updates about this very point.
Top video Wes, superb tips for a great setup, thanks very much for sharing 👍
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)
Man this is so helpful. Thank you Wes Bos
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.
Thank you for persuading me to uninstall ESlint
👍
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.
Nice production and explanation style, WesBos!
Life saving video, thanks alot bro ❤
smashed to subscribe button faster than npm package download speed
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.
i haven't watch it yet, but still wanna say your videos/courses are awesome!
Thanks! Glad you enjoy them! Stay tuned for more!
I like the font of the comments in the video. How to get it in VS Code ?
Great job again Wesbos. Do you plan to make any video about React Hooks, loves your teaching and explaining styles.
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 ?
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?
Global install don't work bos!!! Eslint 7??
This help a lot. Thanks for the great video.
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
Awesome Wes...i made a repo for myself too
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?
Thanks a lot Wes! Great video
Doesnt work for me. "Failed to load parser 'babel-eslint' ..."
Riiiight on!!!!!
Just one thing: how to set tab width to be 4?
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
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?
Does it block prettier plugin's autofix on save? Does quokka work normally with this setup? Gonna try it after getting more advanced.
you should release a video about this on SFC Vue component
That is what I am looking for.
Can you make an update of this video? Some of these settings aren't already supported.
Thanks a lot for sharing this!!!
will this work with a react app if i follow this?
When I do the first step (npx install-peerdeps --dev eslint-config-wesbos), my package.json doesn't change (the list of devDependencies)..
Is there a way for it to work with create-react-app without ejecting?
wes u don't extend into prettier, is it included in wesbos? where is prettier ?
You are BACK !!!
So valuable, thanks!
Guys how to stop overwriting let for const? Sometimes I want to change a value of variable, thanks :)
how you add a border around the terminal
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
hi hope well do you mind sharing your settings.json file for the vs code i really love it
What’s the VSCode theme?
Hi, what's the theme of your shell? I guess it's zsh ?
Why don't you simply install the VSCode Prettier extension? Looks like it would be way simpler
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.
thanks man
you save my live
My favorite guru!
maybe because im using windows but of course it doesnt work after running
$ npm run lint:fix
Does this work on create-react-app with Airbnb style
Thank you 🙌
Wes, Is there a way of doing this with svelte files aswell?
Could you create a new tutorial for typescript react?
How to install class property proposal?
Thanks, God, I mean, thanks, man! Holy shit... it really helped me!
Hey Bos, on VS code terminal, we have 9 problem, is it normal?
Hi;
What Terminal App are you using?
I think it is hyper - hyper.is
Legendary 👌
why must i go through this stress just for set up??
does this work for front end (non-npm)?
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!
Thank You So Much!!
how do lint one page at the time
i want your vscode font-family....so ,i got it Operator-Mono
pretty fine.
Tslint+prettier setup too please!
Thanks ❤️
🙏Thank you!!!
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
thanks!
hi, thnx for the video. Can u plz share ur hyperjs custom, thnx.
Hi, which terminal were you used.
hyper.is/
Hyper. Check wesbos.com/uses for more
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
airbnb is too strict
that fucked up all my settings
Can't eslint already fix stuff? Why the need for prettier? Personally, I hate prettier and just write eslint rules.
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
cool
What terminal are you using and what theme for it>
github.com/zeit/hyper
npm run:fix just hangs.. does nothing.
Great video thanks Wes!
Thanks for sharing.
Thank you!