Merge pull request paulolramos#6 from paulolramos/config-updates

Config updates

README.md

@@ -1,24 +1,106 @@
-# ESLint/Prettier & Airbnb's Style Guide for React Apps
-
-**Make sure you `npm init`, or at least have a _package.json_ file before proceeding!**
-
-## Installation
-##### You will need _npm/npx_ installed. It will work on Windows, but just needs to be run in a bash shell, like VS Code's integrated terminal.
+# Installation
 
 1. Navigate to your app directory where you want to include this style configuration.
 
-    ```bash
-    cd myApp
-    ```
+   ```bash
+   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.
 
-    ```bash
-    exec 3<&1;bash <&3 <(curl https://raw.githubusercontent.com/paulolramos/eslint-prettier-airbnb-react/master/eslint-prettier-config.sh 2> /dev/null)
-    ```
+   ```bash
+   exec 3<&1;bash <&3 <(curl https://raw.githubusercontent.com/paulolramos/eslint-prettier-airbnb-react/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](https://eslint.org/)
+2. [Prettier](https://prettier.io/)
+
+### Airbnb Configuration
+
+1. [eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb)
+   - This package provides Airbnb's .eslintrc as an extensible shared config.
+2. [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) (Peer Dependency)
+   - Static AST checker for accessibility rules on JSX elements.
+3. [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react) (Peer Dependency)
+   - React specific linting rules for ESLint
+4. [eslint-plugin-import](https://www.npmjs.com/package/eslint-plugin-import) (Peer Dependency)
+   - Support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names.
+5. [babel-eslint](https://github.com/babel/babel-eslint)
+   - A wrapper for Babel's parser used for ESLint.
+   - We decided to include this since [Airbnb Style Guide uses Babel](https://github.com/airbnb/javascript#airbnb-javascript-style-guide-).
+
+### ESlint, Prettier Integration
+
+1. [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier)
+   - Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.
+2. [eslint-config-prettier](https://github.com/prettier/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)
+
+- [more info](https://eslint.org/docs/user-guide/configuring)
+
+```
+{
+"extends": [
+    "airbnb",
+    "plugin:prettier/recommended",
+    "prettier/react"
+  ],
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es6": true,
+    "jest": true,
+    "node": true
+  },
+  "rules": {
+    "jsx-a11y/href-no-hash": ["off"],
+    "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }],
+    "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)
+
+- [more Info](https://prettier.io/docs/en/configuration.html)
+
+```
+{
+"printWidth": (SET BY USER),
+  "singleQuote": true,
+  "trailingComma": (SET BY USER)
+}
+```
 
-3. Look in your project's root directory and notice the two newly added/updated config files:
-    - `.eslintrc.js` (or `.eslintrc.json`)
-    - `.prettierrc`
+---
 
-This script follows this [tutorial](https://blog.echobind.com/integrating-prettier-eslint-airbnb-style-guide-in-vscode-47f07b5d7d6a) by Jeffrey Zhen.
+This script was inspired by Jeffrey Zhen's [tutorial](https://blog.echobind.com/integrating-prettier-eslint-airbnb-style-guide-in-vscode-47f07b5d7d6a).

eslint-prettier-config.sh

@@ -1,14 +1,21 @@
 #!/bin/bash
 
+# ----------------------
+# Color Variables
+# ----------------------
+RED="\033[0;31m"
 YELLOW='\033[1;33m'
 GREEN='\033[1;32m'
 LCYAN='\033[1;36m'
 NC='\033[0m' # No Color
 
-# Prompt for config preferences
-# -----------------------------
+# --------------------------------------
+# Prompts for configuration preferences
+# --------------------------------------
+
+# Package Manager Prompt
 echo
-echo "????? Which package manager are you using?"
+echo "Which package manager are you using?"
 select package_command_choices in "Yarn" "npm" "Cancel"; do
   case $package_command_choices in
     Yarn ) pkg_cmd='yarn add'; break;;
@@ -18,7 +25,8 @@ select package_command_choices in "Yarn" "npm" "Cancel"; do
 done
 echo
 
-echo "????? Which ESLint and Prettier configuration format do you perfer?"
+# File Format Prompt
+echo "Which ESLint and Prettier configuration format do you prefer?"
 select config_extension in ".js" ".json" "Cancel"; do
   case $config_extension in
     .js ) config_opening='module.exports = {'; break;;
@@ -28,34 +36,36 @@ select config_extension in ".js" ".json" "Cancel"; do
 done
 echo
 
+# Checks for existing eslintrc files
 if [ -f ".eslintrc.js" -o -f ".eslintrc.yaml" -o -f ".eslintrc.yml" -o -f ".eslintrc.json" -o -f ".eslintrc" ]; then
-  echo "!!!!! Existing ESLint config file(s) found:"
+  echo -e "${RED}Existing ESLint config file(s) found:${NC}"
   ls -a .eslint* | xargs -n 1 basename
   echo
-  echo ">>>>> CAUTION: there is loading priority when more than one config file is present: https://eslint.org/docs/user-guide/configuring#configuration-file-formats"
+  echo -e "${RED}CAUTION:${NC} there is loading priority when more than one config file is present: https://eslint.org/docs/user-guide/configuring#configuration-file-formats"
   echo
-  read -p  "????? Write .eslintrc${config_extension} (Y/n)? "
+  read -p  "Write .eslintrc${config_extension} (Y/n)? "
   if [[ $REPLY =~ ^[Nn]$ ]]; then
-    echo ">>>>> Skipping ESLint config"
+    echo -e "${YELLOW}>>>>> Skipping ESLint config${NC}"
     skip_eslint_setup="true"
   fi
 fi
-
 finished=false
+
+# Max Line Length Prompt
 while ! $finished; do
-  echo
-  read -p "????? What max line length do you want to set for ESLint and Prettier (Recommendations: 80 or 100 or 120)? "
+  read -p "What max line length do you want to set for ESLint and Prettier? (Recommendation: 80)"
   if [[ $REPLY =~ ^[0-9]{2,3}$ ]]; then
     max_len_val=$REPLY
     finished=true
     echo
   else
-    echo "!!!!! Please choose a max length of two or three digits, e.g. 80 or 100 or 120"
+    echo -e "${YELLOW}Please choose a max length of two or three digits, e.g. 80 or 100 or 120${NC}"
   fi
 done
 
-echo "????? What style of trailing commas do you want to enforce with prettier?"
-echo ">>>>> See https://prettier.io/docs/en/options.html#trailing-commas for more details."
+# Trailing Commas Prompt
+echo "What style of trailing commas do you want to enforce with Prettier?"
+echo -e "${YELLOW}>>>>> See https://prettier.io/docs/en/options.html#trailing-commas for more details.${NC}"
 select trailing_comma_pref in "none" "es5" "all"; do
   case $trailing_comma_pref in
     none ) break;;
@@ -65,80 +75,73 @@ select trailing_comma_pref in "none" "es5" "all"; do
 done
 echo
 
+# Checks for existing prettierrc files
 if [ -f ".prettierrc.js" -o -f "prettier.config.js" -o -f ".prettierrc.yaml" -o -f ".prettierrc.yml" -o -f ".prettierrc.json" -o -f ".prettierrc.toml" -o -f ".prettierrc" ]; then
-  echo "!!!!! Existing Prettier config file(s) found"
+  echo -e "${RED}Existing Prettier config file(s) found${NC}"
   ls -a | grep "prettier*" | xargs -n 1 basename
   echo
-  echo ">>>>> CAUTION: The configuration file will be resolved starting from the location of the file being formatted, and searching up the file tree until a config file is (or isn't) found. https://prettier.io/docs/en/configuration.html"
+  echo -e "${RED}CAUTION:${NC} The configuration file will be resolved starting from the location of the file being formatted, and searching up the file tree until a config file is (or isn't) found. https://prettier.io/docs/en/configuration.html"
   echo
-  read -p  "????? Write .prettierrc${config_extension} (Y/n)? "
+  read -p  "Write .prettierrc${config_extension} (Y/n)? "
   if [[ $REPLY =~ ^[Nn]$ ]]; then
-    echo ">>>>> Skipping Prettier config"
+    echo -e "${YELLOW}>>>>> Skipping Prettier config${NC}"
     skip_prettier_setup="true"
   fi
   echo
 fi
 
-
-# Pefrom config
-# -------------
+# ----------------------
+# Perform Configuration
+# ----------------------
 echo
-echo -e "${GREEN}Starting Style Formatting Configuration... ${NC}"
+echo -e "${GREEN}Configuring your development environment... ${NC}"
 
 echo
-echo -e "1/5 ${LCYAN}Local ESLint & Prettier Installation... ${NC}"
+echo -e "1/5 ${LCYAN}ESLint & Prettier Installation... ${NC}"
 echo
 $pkg_cmd -D eslint prettier
 
-
 echo
-echo
-echo -e "2/5 ${YELLOW}Airbnb Configuration Installation... ${NC}"
+echo -e "2/5 ${YELLOW}Conforming to Airbnb's JavaScript Style Guide... ${NC}"
 echo
 $pkg_cmd -D eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react babel-eslint
 
-
-echo
 echo
-echo -e "3/5 ${LCYAN}Disabling ESLint Formatting... ${NC}"
+echo -e "3/5 ${LCYAN}Making ESlint and Prettier play nice with each other... ${NC}"
 echo "See https://github.com/prettier/eslint-config-prettier for more details."
 echo
-$pkg_cmd -D eslint-config-prettier eslint-plugin-prettier eslint-plugin-flowtype
+$pkg_cmd -D eslint-config-prettier eslint-plugin-prettier
 
 
 if [ "$skip_eslint_setup" == "true" ]; then
   break
 else
   echo
-  echo
-  echo -e "4/5 ${YELLOW}Creating custom .eslintrc${config_extension} config...${GREEN}Done! ${NC}"
+  echo -e "4/5 ${YELLOW}Building your .eslintrc${config_extension} file...${NC}"
   > ".eslintrc${config_extension}" # truncates existing file (or creates empty)
 
   echo ${config_opening}'
-  // https://prettier.io/docs/en/eslint.html#use-both (plugin directive not needed)
-  "extends": ["airbnb", "plugin:prettier/recommended"],
-  "parser": "babel-eslint",
-  // env from the sharable react-app ESLint config
+  "extends": [
+    "airbnb",
+    "plugin:prettier/recommended",
+    "prettier/react"
+  ],
   "env": {
-    browser: true,
-    commonjs: true,
-    es6: true,
-    jest: true,
-    node: true,
+    "browser": true,
+    "commonjs": true,
+    "es6": true,
+    "jest": true,
+    "node": true
   },
   "rules": {
-    // https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/397#issuecomment-393921950
     "jsx-a11y/href-no-hash": ["off"],
-    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md#rule-options
     "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }],
-    // https://eslint.org/docs/rules/max-len Override default, set to '${max_len_value}' with some addtl config opts
     "max-len": [
       "warn",
       {
         "code": '${max_len_val}',
         "tabWidth": 2,
         "comments": '${max_len_val}',
-        "ignoreUrls": true,
         "ignoreComments": false,
         "ignoreTrailingComments": true,
         "ignoreUrls": true,
@@ -155,7 +158,7 @@ fi
 if [ "$skip_prettier_setup" == "true" ]; then
   break
 else
-  echo -e "5/5 ${YELLOW}Creating custom .prettierrc${config_extension} config...${GREEN}Done! ${NC}"
+  echo -e "5/5 ${YELLOW}Building your .prettierrc${config_extension} file... ${NC}"
   > .prettierrc${config_extension} # truncates existing file (or creates empty)
 
   echo ${config_opening}'
@@ -166,5 +169,5 @@ else
 fi
 
 echo
-echo -e "${GREEN}Finished Style Formatting Configuration! ${NC}"
+echo -e "${GREEN}Finished setting up!${NC}"
 echo