diff --git a/README.md b/README.md index ff22563..ae96ce1 100644 --- a/README.md +++ b/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). diff --git a/eslint-prettier-config.sh b/eslint-prettier-config.sh index 2ff9d50..0789c87 100755 --- a/eslint-prettier-config.sh +++ b/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