Last active
March 30, 2020 04:16
Star
You must be signed in to star a gist
Common development setup for React => Babel, ESLint and Prettier (with or without Flow).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# dependencies | |
/node_modules | |
# testing | |
/coverage | |
# production | |
/build | |
# misc | |
.DS_Store | |
.env.local | |
.env.development.local | |
.env.test.local | |
.env.production.local | |
npm-debug.log* | |
yarn-debug.log* | |
yarn-error.log* | |
#flow-typed annotations | |
flow-typed/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[ignore] | |
.*/node_modules/.* | |
[include] | |
./src | |
[libs] | |
[lints] | |
[options] | |
module.name_mapper='^Components\/\(.*\)$' -> '<PROJECT_ROOT>/src/Components/\1' | |
module.name_mapper='^Styles\/\(.*\)$' -> '<PROJECT_ROOT>/src/Styles/\1' | |
module.file_ext=.js | |
module.file_ext=.scss | |
module.name_mapper.extension='scss' -> 'empty/object' | |
[strict] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"endOfLine": "lf", | |
"tabWidth": 4, | |
"printWidth": 120, | |
"trailingComma": "all", | |
"semi": true, | |
"singleQuote": true | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
NOTE: | |
1. Don't forget to install flow-typed | |
2. run flow-typed install | |
3. Ignore /flow-typed directory from Git and ESLint |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"scripts": { | |
"lint": "eslint --fix . && echo 'Lint complete.'", | |
"eslint-check": "eslint --print-config .eslintrc.json | eslint-config-prettier-check", | |
"start": "node server.js" | |
}, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Without @Flow | |
yarn add -D babel-eslint eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier pretty-quick | |
With @Flow | |
yarn add flow-bin && yarn add -D babel-eslint eslint eslint-plugin-flowtype flow-typed eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier pretty-quick |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"env": { | |
"browser": true, | |
"commonjs": true, | |
"es6": true, | |
"node": true, | |
"jest": true | |
}, | |
"plugins": [ | |
"react", | |
"react-hooks", | |
"prettier", | |
"flowtype" | |
], | |
"extends": [ | |
"airbnb", | |
"prettier", | |
"plugin:prettier/recommended", | |
"plugin:react/recommended", | |
"plugin:flowtype/recommended", | |
"prettier/flowtype", | |
"prettier/react" | |
], | |
"parser": "babel-eslint", | |
"parserOptions": { | |
"sourceType": "module", | |
"ecmaVersion": 2018, | |
"allowImportExportEverywhere": false, | |
"codeFrame": false | |
}, | |
"settings": { | |
"react": { | |
"version": "detect" | |
}, | |
"flowtype": { | |
"onlyFilesWithFlowAnnotation": false | |
} | |
}, | |
"rules": { | |
"react/no-unused-prop-types": 0, | |
"react-hooks/rules-of-hooks": "error", | |
"react-hooks/exhaustive-deps": "warn", | |
"max-len": ["error", {"code": 120}], | |
"prefer-promise-reject-errors": ["off"], | |
"react/jsx-filename-extension": ["off"], | |
"no-nested-ternary": "off", | |
"no-return-assign": ["off"], | |
"prettier/prettier": "error", | |
"flowtype/boolean-style": [ | |
2, | |
"boolean" | |
], | |
"flowtype/define-flow-type": 1, | |
"flowtype/delimiter-dangle": [ | |
2, | |
"always" | |
], | |
"flowtype/generic-spacing": [ | |
2, | |
"never" | |
], | |
"flowtype/no-mixed": 2, | |
"flowtype/no-primitive-constructor-types": 2, | |
"flowtype/no-types-missing-file-annotation": 2, | |
"flowtype/no-weak-types": [ | |
2, { | |
"any": false, | |
"Object": false, | |
"Function": true | |
} | |
], | |
"flowtype/object-type-delimiter": [ | |
2, | |
"comma" | |
], | |
"flowtype/require-parameter-type": [ | |
2, | |
{ | |
"excludeArrowFunctions": true | |
} | |
], | |
"flowtype/require-readonly-react-props": 0, | |
"flowtype/require-return-type": [ | |
2, | |
"always", | |
{ | |
"annotateUndefined": "never", | |
"excludeArrowFunctions": true, | |
"excludeMatching": ["render"] | |
} | |
], | |
"flowtype/require-valid-file-annotation": 2, | |
"flowtype/semi": [ | |
2, | |
"always" | |
], | |
"flowtype/space-after-type-colon": [ | |
2, | |
"always" | |
], | |
"flowtype/space-before-generic-bracket": [ | |
2, | |
"never" | |
], | |
"flowtype/space-before-type-colon": [ | |
2, | |
"never" | |
], | |
"flowtype/type-id-match": [ | |
2, | |
"^([A-Z][a-z0-9]+)+Type$" | |
], | |
"flowtype/union-intersection-spacing": [ | |
2, | |
"always" | |
], | |
"flowtype/use-flow-type": 1, | |
"flowtype/valid-syntax": 1 | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"env": { | |
"browser": true, | |
"commonjs": true, | |
"es6": true, | |
"node": true, | |
"jest": true | |
}, | |
"plugins": [ | |
"react", | |
"react-hooks", | |
"prettier" | |
], | |
"extends": [ | |
"airbnb", | |
"prettier", | |
"plugin:prettier/recommended", | |
"plugin:react/recommended", | |
"prettier/react" | |
], | |
"parser": "babel-eslint", | |
"parserOptions": { | |
"sourceType": "module", | |
"ecmaVersion": 2018, | |
"allowImportExportEverywhere": false, | |
"codeFrame": false | |
}, | |
"settings": { | |
"react": { | |
"version": "detect" | |
}, | |
"flowtype": { | |
"onlyFilesWithFlowAnnotation": false | |
} | |
}, | |
"rules": { | |
"react/no-unused-prop-types": 0, | |
"react-hooks/rules-of-hooks": "error", | |
"react-hooks/exhaustive-deps": "warn", | |
"max-len": ["error", {"code": 120}], | |
"prefer-promise-reject-errors": ["off"], | |
"react/jsx-filename-extension": ["off"], | |
"no-nested-ternary": "off", | |
"no-return-assign": ["off"], | |
"prettier/prettier": "error" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment