VSCode ESLint, Prettier & Airbnb Style Guide Setup



VSCode ESLint, Prettier & Airbnb Style Guide Setup

VSCode ESLint, Prettier & Airbnb Style Guide Setup

In this video we will setup linting with the Airbnb style guide for clean and consitent JavaScript code in VSCode

Commands & Config:
https://gist.github.com/bradtraversy/aab26d1e8983d9f8d79be1a9ca894ab4

Sponsor: Freelancer Bundle (Use “brad25” for 25% off)
https://studywebdevelopment.com/freelancing.html

💖 Become a Patron: Show support & get perks!
http://www.patreon.com/traversymedia

Website & Udemy Courses
http://www.traversymedia.com

Follow Traversy Media:
https://www.facebook.com/traversymedia
https://www.twitter.com/traversymedia
https://www.instagram.com/traversymedia

39 Comments

  1. WHO would have taught these things to an isolated self-taught programmer like me , in this subtly and thoroughly way, except you Brad? owe you a lot, thank you my man 🙏🙏🙏🙏🙏

  2. Hi Brad. I am currently learning React with your Udemy course. I have seen Vite being used in place of CRA. Can this setup be applied to a project that has been created using Vite?

  3. Can you please set up ESLint, Airbnb, and prettier in the MERN app? Because when I set up these on the backend, it doesn't work on the client site(react). How could I solve this issue?

  4. I had this issue running eslint
    The eslint library loaded from /Users/development/ecommerce-project/e-commerce-front/node_modules/eslint/lib/api.js doesn't export a CLIEngine. You need at least [email protected]

    any help 🙁

  5. Thanks a million for this video. I needed to set up the "prefer-arrow-callback" rule, but couldn't find the syntax for the rules section of the .eslintrc file. Simply outstanding!

  6. Single quotes would be a bit faster, running it about a million times. If you happen to be making a particle system or want to support a seamless experience on a raspberry pi or something?

  7. Just an personal suggestion: (14:51)

    Instead disabling the console log rule in the whole project, you can turn off the ESLint rule for that specific case using `// eslint-disable-next-line no-console` in the previous line. Example:

    const express = require('express');

    const app = express( );

    app.listen(3000, ( ) => {
    // eslint-disable-next-line no-console
    console.log("App Listening on port 3000!");
    })

  8. Hey Brad. Thanks for this. It helped me get my dev environment set up with fewer pain points. At 12:44 you explain the 'newline-after-import' rule that you like. I can see that I get the linting to show up but is there a way to have either ESlint or Prettier auto-format the document to take care of this like it can with inserting semi-colons and other good formatting help on save? I suspect getting Prettier to do this is problematic considering it's so 'opinionated' and does not allow custom rules, so is there a way to tell Eslint to handle it using its formatting capabilities?

  9. I had a question… Do I have to do this manually every time for another project, or can I change all these settings globally?

  10. Oh boy. The lint tool is so buggy. ESLint triggers an error for using the `const` keyword. How else would I declare a constant?

  11. npm init -y didnt work for me…

    npm : The term 'npm' is not recognized as the name of a cmdlet, function, script file, or

    operable program. Check the spelling of the name, or if a path was included, verify that the

    path is correct and try again.

  12. >npx install-peerdeps –dev eslint-config-airbnb

    install-peerdeps v3.0.3

    Installing peerdeps for [email protected].

    npm install [email protected] eslint@^7.2.0 eslint-plugin-import@^2.22.1 eslint-plugin-jsx-a11y@^6.4.1 eslint-plugin-react@^7.21.5 eslint-plugin-react-hooks@^1.7.0 –save-dev

    ERR undefined

    npm ERR! code 1

    npm ERR! path C:UsersprathDocumentsJobRoboticstechno LLCFront End Development Mayak KumarPrettier TutosYT_Code_Formatting_with_Prettier_in_Visual_Studio_Code

    npm ERR! command failed

    npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c install-peerdeps –dev eslint-config-airbnb

    npm ERR! A complete log of this run can be found in:

    npm ERR! C:UsersprathAppDataLocalnpm-cache_logs2021-03-05T06_17_15_777Z-debug.log

    Help me!

  13. I'm getting an error. I did this 10:56 and nothing is showing up inside problems console and when i click eslint icon at the buttom right it says "Failed to load config "airbnb" to extend from location folder". Update: I figured it out it was because I installed the airbnb base and it has to extend airbnb-base inside the eslintrc. I'm also surprized you didn't mention eslintignore to ignore node and json paths. Anyways those were the only issues aside from this solid video.

Leave a Reply

© 2023 53GB