Skip to content

Commit

Permalink
Merge pull request paulolramos#5 from jondkinney/master
Browse files Browse the repository at this point in the history 
Add prompting for various preferences
  • Loading branch information
@paulolramos
paulolramos committed Apr 3, 2019
2 parents c09155e + f33da96 commit c878aa9
Show file tree
Hide file tree
Showing 2 changed files with 160 additions and 39 deletions.
32 changes: 12 additions & 20 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,22 @@
**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.
##### 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.

1. Clone this repo somewhere on your machine, preferably in your home directory (~/), and _NOT_ in your app's directory.
1. Navigate to your app directory where you want to include this style configuration.

```
cd
git clone https://github.com/paulolramos/eslint-prettier-airbnb-react style-config
```
```bash
cd myApp
```

2. Navigate to your app directory where you want to include this style configuration.
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.

```
cd myApp
```
```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. Run the shell script inside your app's root directory. (_The example below assumes you cloned this repo inside your home directory_)

```
~/style-config/eslint-prettier-config.sh
```

4. The shell script added two config files

- .eslintrc.json
- .prettierrc
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.
167 changes: 148 additions & 19 deletions eslint-prettier-config.sh
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,37 +5,166 @@ GREEN='\033[1;32m'
LCYAN='\033[1;36m'
NC='\033[0m' # No Color

# Prompt for config preferences
# -----------------------------
echo
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;;
npm ) pkg_cmd='npm install'; break;;
Cancel ) exit;;
esac
done
echo

echo "????? Which ESLint and Prettier configuration format do you perfer?"
select config_extension in ".js" ".json" "Cancel"; do
case $config_extension in
.js ) config_opening='module.exports = {'; break;;
.json ) config_opening='{'; break;;
Cancel ) exit;;
esac
done
echo

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:"
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
read -p "????? Write .eslintrc${config_extension} (Y/n)? "
if [[ $REPLY =~ ^[Nn]$ ]]; then
echo ">>>>> Skipping ESLint config"
skip_eslint_setup="true"
fi
fi

finished=false
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)? "
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"
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."
select trailing_comma_pref in "none" "es5" "all"; do
case $trailing_comma_pref in
none ) break;;
es5 ) break;;
all ) break;;
esac
done
echo

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"
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
read -p "????? Write .prettierrc${config_extension} (Y/n)? "
if [[ $REPLY =~ ^[Nn]$ ]]; then
echo ">>>>> Skipping Prettier config"
skip_prettier_setup="true"
fi
echo
fi


# Pefrom config
# -------------
echo
echo -e "${GREEN}Starting Style Formatting Configuration... ${NC}"

echo
echo -e "1/5 ${LCYAN}Local ESLint & Prettier Installation... ${NC}"
npm install -D eslint@5.6.0 prettier
echo
$pkg_cmd -D eslint prettier


echo
echo
echo -e "2/5 ${YELLOW}Airbnb Configuration Installation... ${NC}"
npm install -D eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react babel-eslint
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}"
npm install -D eslint-config-prettier eslint-plugin-prettier eslint-plugin-flowtype@2.50.3 eslint-config-react-app
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


echo -e "4/5 ${YELLOW}Creating ESLint JSON... ${NC}"
touch .eslintrc.json
if [ "$skip_eslint_setup" == "true" ]; then
break
else
echo
echo
echo -e "4/5 ${YELLOW}Creating custom .eslintrc${config_extension} config...${GREEN}Done! ${NC}"
> ".eslintrc${config_extension}" # truncates existing file (or creates empty)

echo '{
"extends": ["airbnb", "prettier", "react-app", "plugin:prettier/recommended"],
"plugins": ["prettier"],
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
"env": {
browser: true,
commonjs: true,
es6: true,
jest: true,
node: true,
},
"rules": {
"prettier/prettier": ["error"],
"jsx-a11y/href-no-hash": [0],
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
// 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,
"ignoreStrings": true,
"ignoreTemplateLiterals": true,
"ignoreRegExpLiterals": true
}
]
}
}' >> .eslintrc.json
}' >> .eslintrc${config_extension}
fi

echo -e "5/5 ${YELLOW}Creating Custom Prettier Config... ${NC}"
touch .prettierrc

echo '{
"printWidth": 100,
"singleQuote": true
}' >> .prettierrc
if [ "$skip_prettier_setup" == "true" ]; then
break
else
echo -e "5/5 ${YELLOW}Creating custom .prettierrc${config_extension} config...${GREEN}Done! ${NC}"
> .prettierrc${config_extension} # truncates existing file (or creates empty)

echo -e "${GREEN}Done! ${NC}"
echo ${config_opening}'
"printWidth": '${max_len_val}',
"singleQuote": true,
"trailingComma": "'${trailing_comma_pref}'"
}' >> .prettierrc${config_extension}
fi

echo
echo -e "${GREEN}Finished Style Formatting Configuration! ${NC}"
echo

0 comments on commit c878aa9

Please sign in to comment.