Previous Lecture Complete and continue  

  Project Linting

Since recording this lesson it's been pointed out to me that you can make this much easier on yourself! Follow the steps below to configure linting for your project.

The video will be relevant again at the 1:14 mark, which aligns with step 8. The GIF below walks through steps 1 through 6.

  1. Run npm install -g eslint
  2. Inside your project directory run eslint --init
  3. Select "Use a popular style guide"
  4. Select "Airbnb"
  5. Do you use React? y
  6. What format do you want your config file to be in? JSON
  7. Add to .eslintrc.json
{
  "extends": "airbnb", // EXISTING
  "parser": "babel-eslint",
  "env": {
    "browser": true
  },
  "plugins": [
    "react"
  ],
  "rules": {
    "react/jsx-filename-extension": [
      2,
      {
        "extensions": [
          ".js",
          ".jsx"
        ]
      }
    ],
    "react/forbid-prop-types": [
      0
    ],
    "react/require-default-props": [
      0
    ],
    "global-require": [
      0
    ]
  }
}

8. Add npm scripts

// package.json
"scripts": {
  // ...
  "lint": "eslint app/",
  "lint:fix": "eslint app/ --fix"
},

9. Update VSCode settings

// .vscode/settings.json
// Place your settings in this file to overwrite default and user settings.
{
  "prettier.eslintIntegration": true,
  "editor.formatOnSave": true
}

38 comments