Integrating Prettier + ESLint + Airbnb Style Guide In VSCode

prettier-eslint-airbnb-vscode.md

Integrating Prettier + ESLint + Airbnb Style Guide In VSCode

#1 Download the ESLint and Prettier extensions for VSCode.

• https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
• https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

#2 Install the ESLint and Prettier libraries into our project.

npm install -D eslint prettier

#3 Install the Airbnb config.

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

#4 Install eslint-config-prettier and eslint-plugin-prettier

npm install --save-dev eslint-config-prettier
npm install --save-dev eslint-plugin-prettier
npm install --save-dev --save-exact prettier

#5 Create .eslintrc file in your project’s root directory

{
  "extends": ["airbnb", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  },
}

#6 Create .prettierrc file in your project’s root directory

{
  "printWidth": 100,
  "singleQuote": true
}

#7 Notes

• Reference: https://echobind.com/post/integrating-prettier-eslint-airbnb-style-guide-in-vscode
• Please do all above commands on your project directory