kevinvalias / dodgeball-app

Setup Boilerplate

This repo is setup to begin working immediately with AirBNB code style rules, using ESLint for warnings and errors, Prettier as a formatter and configured for VS Code.

IF you're cloning this repo and building off of it you'll need to:

1. Fork & Clone

2. cd eslint-boilerplate-configs

3. npm i to install dependencies

4. npx install-peerdeps --dev eslint-config-airbnb to install peer dependencies

5. Install Prettier and Eslint Extensions for VS Code

   1. Go to VSC Settings (CMD + , || CTRL + ,)
   2. Search Save => Format on Save
   3. Search ESLint => Always show status
   4. Search Default Formatter => choose esbenp.prettier.vs-code
   5. Search Prettier => add path: .prettierrc
   6. Search Prettier semi => semi-colons - check
   7. Search Prettier single => single quotes - check
   8. Search Prettier arrow parens => parens - check

ELSE if you're just using these config files a starting point follow these instructions:

1. create a new repo
2. clone new repo
3. cd into the new repo
4. Initialize as an NPM Package and create a package.json file by running the command: npm init -y || npm init and answer each of the questions

• name> => [REPO_NAME],
• description? => ENTER || "A description.....",
• version "1.0.0" => ENTER || YES
• main? => ENTER || index.js
• test? => ENTER || mocha —no-timeouts
• repository? => ENTER || "https://github.com/ashleygwilliams/my_package.git"
• keywords? => ENTER || ["a", "few", "words", "that", "describe", "it"],
• author? => ENTER || [YOU]
• license ISC? => ENTER || YES

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

6. Install Prettier and Eslint Extensions for VS Code

   1. Go to VSC Settings (CMD + , || CTRL + ,)
   2. Search Save => Format on Save
   3. Search ESLint => Always show status
   4. Search Default Formatter => choose esbenp.prettier.vs-code
   5. Search Prettier => add path: .prettierrc
   6. Search Prettier semi => semi-colons - check
   7. Search Prettier single => single quotes - check
   8. Search Prettier arrow parens => parens - check

7. Install Peer Dependencies: npx install-peerdeps --dev eslint-config-airbnb

• Docs on eslint-config-airbnb - npm
  • Docs on Airbnb Style Guide

8. Create a Prettier Configuration file: touch .prettierrc

• Add rules using Prettier Options

• Copy/Paste the example rules below:

  {
    "singleQuotes": true,
    "arrowParens": "always",
    "semi": false
  }

9. Install ESLint globally: npm i -g eslint || sudo npm i -g eslint
10. Create the ESLint configuration file by running the eslint --init && Walk through the steps in your console

  eslint --init
  ~? How would you like to use ESLint? · style✔
  ~? What type of modules does your project use? · commonjs✔
  ~? Which framework does your project use? · react✔
  ~? Does your project use TypeScript? · No✔
  ~? Where does your code run? · node✔
  ~? How would you like to define a style for your project? · guide✔
  ~? Which style guide do you want to follow? · airbnb✔
  ~? What format do you want your config file to be in? · JSON

  || You'll have different prompts

  ~? How would you like to configure ESLint? > Use a popular style guide✔
  ~? Which style guide do you want to follow? > Airbnb✔
  ~? Do you use React? > Yes✔
  ~? What format do you want your config file to be in? > JSON✔
  Checking peerDependencies of eslint-config-airbnb@latest
  ~? The style guide "airbnb" requires eslint@^5.16.0 || ^6.8.0 || ^7.2.0. You are currently using [email protected].
  Do you want to upgrade? > Yes✔
  Installing [email protected].....

11. In the .eslintrc.json file that was created copy/paste this JSON Object to replace what is automatically create there.

{
  "extends": ["airbnb", "prettier", "plugin:node/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "no-unused-vars": "error",
    "no-console": "warn",
    "func-names": "off",
    "object-shorthand": "warn",
    "class-methods-use-this": "warn"
  }
}

12. Learn more about ESLint Rules and use more of them.