screen shot of package json development section

Add AirBnB's React Linting To Your Project The Easy Way
Published: 12-Jul-2019

Here’s the fastest way to get AirBnb’s React Linting into your codebase.

Step 1 – add lint packages with yarn

In the root directory of your app, run the following command:

npx install-peerdeps --dev eslint-config-airbnb

Step 2 – make sure you have an eslint config

If you’re using create-react-app, this is probably already in your package.json file (but check anyway):

"eslintConfig": {    "extends": "react-app"  },

Step 3 – create an eslintrc json file and configure it for react

Create a file called .eslintrc.json in the same directory as your package.json file. Enter the following into it:

{
  "extends":"airbnb",
  "env":{
      "browser":true
  },
  "plugins":[
      "react",
      "jsx-a11y",
      "import"
  ],
  "rules":{
      "react/jsx-filename-extension":[
        1,
        {
            "extensions":[
              ".js",
              ".jsx"
            ]
        }
      ],
      "linebreak-style":0,
      "max-len":"off"
  }
}

And you’re done.

Now get back to coding.

screen shot of package json development section

Add AirBnB's React Linting To Your Project The Easy Way
Published: 12-Jul-2019

Here’s the fastest way to get AirBnb’s React Linting into your codebase.

Step 1 – add lint packages with yarn

In the root directory of your app, run the following command:

npx install-peerdeps --dev eslint-config-airbnb

Step 2 – make sure you have an eslint config

If you’re using create-react-app, this is probably already in your package.json file (but check anyway):

"eslintConfig": {    "extends": "react-app"  },

Step 3 – create an eslintrc json file and configure it for react

Create a file called .eslintrc.json in the same directory as your package.json file. Enter the following into it:

{
  "extends":"airbnb",
  "env":{
      "browser":true
  },
  "plugins":[
      "react",
      "jsx-a11y",
      "import"
  ],
  "rules":{
      "react/jsx-filename-extension":[
        1,
        {
            "extensions":[
              ".js",
              ".jsx"
            ]
        }
      ],
      "linebreak-style":0,
      "max-len":"off"
  }
}

And you’re done.

Now get back to coding.