ESLint, Prettier, Airbnb Setup

.editorconfig

# EditorConfig is awesome: http://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
charset = utf-8
indent_style = space
indent_size = 2

# Matches the exact files either package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

[*.md]
trim_trailing_whitespace = false

.eslintrc.json

{
  "extends": [
    "airbnb",
    "plugin:prettier/recommended",
    "prettier/react",
    "plugin:node/recommended"
  ],
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "jest": true,
    "node": true
  },
  "rules": {
    "no-console": "off",
    "no-process-exit": "off",
    "func-names": "off",
    "prettier/prettier": "error",
    "jsx-a11y/href-no-hash": ["off"],
    "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }],
    "max-len": [
      "warn",
      {
        "code": 80,
        "tabWidth": 2,
        "comments": 80,
        "ignoreComments": false,
        "ignoreTrailingComments": true,
        "ignoreUrls": true,
        "ignoreStrings": true,
        "ignoreTemplateLiterals": true,
        "ignoreRegExpLiterals": true
      }
    ]
  }
}

.prettierrc

{
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "all"
}

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": false,
  "jsxBracketSameLine": false,
  "proseWrap": "always"
}

eslint_setting.md

VSCode - ESLint, Prettier & Airbnb Setup

1. Install ESLint & Prettier extensions for VSCode

Optional - Set format on save and any global prettier options

2. Install Packages

npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-config-node

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

3. Create .prettierrc for any prettier rules (semicolons, quotes, etc)

4. Create .eslintrc.json file (You can generate with eslint --init if you install eslint globally)

Reference

• ESLint Rules - https://eslint.org/docs/rules/
• Prettier Options - https://prettier.io/docs/en/options.html
• Airbnb Style Guide - https://github.com/airbnb/javascri

lint-staged.config.js

module.exports = {
  linters: {
    '**/*.+(js|md|ts|css|sass|less|graphql|yml|yaml|scss|json|vue)': [
      'eslint --fix',
      'prettier --write',
      'jest --findRelatedTests',
      'git add',
    ],
  },
};

package.json

  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "lint": "eslint src",
    "test": "jest",
    "test:watch": "jest src --watch --notify",
    "cover": "jest --coverage",
    "clean": "rimraf dist",
    "precommit": "lint-staged",
    "format": "prettier --write \"src/**/*.+(js|md|ts|css|sass|less|graphql|yml|yaml|scss|json|vue)\"",
    "prepublishOnly": "yarn clean && yarn lint && yarn test && yarn build",
    "bootstrap": "lerna bootstrap",
    "build": "vuepress build example",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 2",
    "commit": "git add . && git-cz",
    "dev": "vuepress dev example",
    "eslint-ext": "eslint --ext .js,.vue ./",
    "eslint-fix": "eslint --fix --ext .js,.vue ./",
    "prepublish": "lerna publish --dist-tag next",
    "publish": "lerna publish",
    "push": "yarn commit && git push",
    "update": "yarn upgrade-interactive --latest"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix --ext .js,.vue ./",
      "git add"
    ],
    "package.json": [
      "sort-package-json",
      "git add"
    ]
  },