Workflow - Adding ESLint (Airbnb) + Prettier to projects

adding-prettier-to-projects.md

# Install ESLint and Babel ESLint
# Make sure to install at least v5.1.0 of ESLint
npm install --save-dev eslint babel-eslint

# Install the Airbnb configs (3 of them, listed below)
npx install-peerdeps --dev eslint-config-airbnb

# Install Prettier + ESLint config
npm install --save-dev --save-exact prettier eslint-config-prettier

Add this to your .eslintrc.js:

module.exports = {
  parser: "babel-eslint",
  extends: ["airbnb", "prettier"],
  plugins: ["react", "jsx-a11y", "import"]
};

In VSCode, CTRL+, to open User Settings and add this to enable auto-prettify on save:

{
    // Format a file on save. A formatter must be available, the file must not be auto-saved, and editor must not be shutting down.
    "editor.formatOnSave": true,
    // Enable/disable default JavaScript formatter (For Prettier)
    "javascript.format.enable": false,
    // Use 'prettier-eslint' instead of 'prettier'. Other settings will only be fallbacks in case they could not be inferred from eslint rules.
    "prettier.eslintIntegration": true
}

ref: https://medium.com/@sgroff04/configure-eslint-prettier-and-flow-in-vs-code-for-react-development-c9d95db07213 ref: https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb#eslint-config-airbnb-1