Skip to content

WisdmLabs/eslint-prettier-airbnb-installation

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Installation

  1. Navigate to your app directory where you want to include this style configuration.

    cd my-app
  2. Run this command inside your app's root directory. Note: this command executes the eslint-prettier-config.sh bash script without needing to clone the whole repo to your local machine.

    exec 3<&1;bash <&3 <(curl https://raw.githubusercontent.com/WisdmLabs/eslint-prettier-airbnb-installation/master/eslint-prettier-config.sh 2> /dev/null)
  3. Make selections for your preference of package manager (npm or yarn), file format (.js or .json), max-line size, and trailing commas (none, es5, all).

  4. Look in your project's root directory and notice the two newly added/updated config files:

    • .eslintrc.js (or .eslintrc.json)
    • .prettierrc.js (or .prettierrc.json)

Packages

Main Packages

  1. ESlint
  2. Prettier

Airbnb Configuration

  1. eslint-config-airbnb
    • This package provides Airbnb's .eslintrc as an extensible shared config.
  2. eslint-plugin-import (Peer Dependency)
    • Support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names.
  3. babel-eslint

ESlint, Prettier Integration

  1. eslint-plugin-prettier
    • Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.
  2. eslint-config-prettier
    • Turns off all rules that are unnecessary or might conflict with Prettier.

Created Configuration Files

Once files are created, you may edit to your liking.

eslintrc(.js/.json)

{
"extends": [
    "airbnb/base",
    "plugin:prettier/recommended"
  ],
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "jest": true,
    "node": true
  },
  "rules": {
    "max-len": [
      "warn",
      {
        "code": (SET BY USER),
        "tabWidth": 2,
        "comments": (SET BY USER),
        "ignoreComments": false,
        "ignoreTrailingComments": true,
        "ignoreUrls": true,
        "ignoreStrings": true,
        "ignoreTemplateLiterals": true,
        "ignoreRegExpLiterals": true
      }
    ]
  }
}

prettierrc(.js/.json)

{
"printWidth": (SET BY USER),
  "singleQuote": true,
  "trailingComma": (SET BY USER)
}

This script was inspired by Jeffrey Zhen's tutorial.

About

ESlint + Prettier + Airbnb Style Guide Configuration for JS Projects

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Shell 100.0%