How to Setup VS Code + Prettier + ESLint

A quick video on how I solved my config issues with VS Code, ESLint and Prettier

[shollymore]

still saving frustrated by prettier lives in 2020 on the verge of 2021! thank You!

[michaelconnor]

What is 'prettier' and 'prettier/react'? Are these VSCode extensions? Some dev dependencies that need to be installed? There are many extensions called 'prettier' .. and 'beautifier' to add to the confusion. Thanks!

[SansPur]

How are you able to even open these files? I'm only able to open the settings.json file, which doesn't look anything like what I see in your video.

[JonathanPetitcolas]

Thanks for this video! It didn't work on a fresh install. As of today (July 2020), it seems you have to add:
```
"editor.codeActionsOnSave": {
"source.fixAll": true
}
```
in your configuration as well.

[MrSushant]

I'm so confused. Don't we have to install *ESLint* via *npm* too for live code formatting/debugging to work ?

[monolizm]

several hours before this video I was searching exactly for this. Wes is cool indeed.

[UrbanBDKNY]

This still works today. Between your video and some of the comments that show a simpler way, this is a great resource. Thanks to you and some in the comments

[bibblebabl]

I dont understand how to configure prettier for styles (do I need have stylelintrc for that)? Can you provide all configs include package.json with necessary plugins? Thanks

[piriyakantong]

Hi, how can one access the .eslintrc file directly from VSCode? I would like to add prettier to the "extends" array in the file. Thank you in advance.

[dazecm]

I'm confused about the prettier/prettier rules section if my eslintrc file is a JS file (.elsintrc.js) that exports modules - like this:

module.exports = {
env: {
browser: true,
node: true,
es6: true,
},
extends: ['airbnb', 'prettier', prettier / react],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
sourceType: 'module',
},
rules: {},
"prettier/prettier": [
{
"doubleQuotes": true
}
],
scripts: { "eslint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check" },
plugins: [
"prettier"
],
};

Things do not seem to work :(

[regiwiz]

I have a doubt. Why are we doing this in user.settings.json,


“[javascript]”: {
“editor.formatOnSave”: false,
},
“prettier.disableLanguages”: [
“js”
]


Why to disable format on save for JS files? Wouldn’t it be tiresome to manually format every time?

[infiniteeyelashes]

Helpful as always. More of these please <3

[DW-lrmn]

Thanks Wes. This will probably help me with a few issues I'm having with my VSCode configuration.

[spasmdesign]

Awesome!! short but great thing you talk about but where is the config file??

[UCBCteam]

Which operating system have you installed VS Code? is it MAC? or any Linux distro?

[gianpaj]

This was really helpful, thanks! I had the Prettier's VSCode extensions and other wrong settings in my user config. Now it formats as it should! 🎉
legend! :)

[ruslanogarkov]

Hey Wes, thanx for your video. Could you tell me please, which plugin do you use to achieve cursive font when you comment in vscode?

[MikeBertelsenDK]

I did exactly what he said but mine isn't fixing or formatting on save. I did also set auto to Settings -> Communly used -> Files: Auto save to OFF as I read online that should help, but unfortunately not.

[nielslytzdk]

So, how did you setup ESlint and prettier? I'm sure your setup fixes everything but how do you actually set it up? I downloaded the eslint extention and... I'm stuck! What now (forgive me, I I'm rather new to all this and may just be stupid). What is that eslintrc-file and where is it? Do you create that yourself, and if so, where do you place the file? Could you please maybe do a little more thorough video? Keep up the good work and thanks for a useful channel :)

[souravpanda]

Video was about how to set up eslint. Why you are showing the things after set up.