Last active
August 3, 2019 18:44
-
-
Save VeikkoLehmuskorpi/f04e071728ef0ea1528c4b28d39ae89a to your computer and use it in GitHub Desktop.
Code formatting and code style for React applications (ESLint, Airbnb rules, Prettier, Husky, Lint-staged)
This file contains hidden or 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 | |
| # public | |
| /public | |
| # production | |
| /build |
This file contains hidden or 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
| module.exports = { | |
| env: { | |
| browser: true, | |
| es6: true, | |
| }, | |
| extends: [ | |
| 'eslint:recommended', | |
| 'plugin:react/recommended', | |
| 'airbnb', | |
| 'plugin:prettier/recommended', | |
| 'prettier/react', | |
| ], | |
| globals: { | |
| Atomics: 'readonly', | |
| SharedArrayBuffer: 'readonly', | |
| }, | |
| parserOptions: { | |
| ecmaFeatures: { | |
| jsx: true, | |
| }, | |
| ecmaVersion: 2018, | |
| sourceType: 'module', | |
| }, | |
| plugins: [], | |
| rules: { | |
| 'linebreak-style': ['error', 'unix'], | |
| 'no-console': 0, | |
| 'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }], | |
| }, | |
| }; |
This file contains hidden or 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
| { | |
| "jsxBracketSameLine": true, | |
| "singleQuote": true, | |
| "trailingComma": "es5", | |
| "printWidth": 80, | |
| "tabWidth": 2, | |
| "semi": true, | |
| "bracketSpacing": true, | |
| "arrowParens": "avoid", | |
| "endOfLine": "lf" | |
| } |
This file contains hidden or 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
| { | |
| "name": "my-react-app", | |
| "version": "0.1.0", | |
| "private": true, | |
| "dependencies": { | |
| "react": "^16.8.6", | |
| "react-dom": "^16.8.6", | |
| "react-scripts": "3.0.1" | |
| }, | |
| "scripts": { | |
| "start": "react-scripts start", | |
| "build": "react-scripts build", | |
| "test": "react-scripts test", | |
| "eject": "react-scripts eject" | |
| }, | |
| "browserslist": { | |
| "production": [ | |
| ">0.2%", | |
| "not dead", | |
| "not op_mini all" | |
| ], | |
| "development": [ | |
| "last 1 chrome version", | |
| "last 1 firefox version", | |
| "last 1 safari version" | |
| ] | |
| }, | |
| "devDependencies": { | |
| "eslint": "^5.16.0", | |
| "eslint-config-airbnb": "^17.1.1", | |
| "eslint-config-prettier": "^6.0.0", | |
| "eslint-plugin-import": "^2.18.2", | |
| "eslint-plugin-jsx-a11y": "^6.2.3", | |
| "eslint-plugin-prettier": "^3.1.0", | |
| "eslint-plugin-react": "^7.14.3", | |
| "husky": "^3.0.2", | |
| "lint-staged": "^9.2.1", | |
| "prettier": "^1.18.2" | |
| }, | |
| "husky": { | |
| "hooks": { | |
| "pre-commit": "lint-staged" | |
| } | |
| }, | |
| "lint-staged": { | |
| "*.{js,jsx,ts,tsx}": [ | |
| "eslint --fix", | |
| "git add" | |
| ], | |
| "*.{htm,html,css,scss,less,graphql,json,md,yaml,yml}": [ | |
| "prettier --write", | |
| "git add" | |
| ] | |
| } | |
| } |
This file contains hidden or 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
| { | |
| // eslint | |
| "eslint.alwaysShowStatus": true, | |
| "eslint.autoFixOnSave": true, | |
| // prettier | |
| "prettier.jsxBracketSameLine": true, | |
| "prettier.singleQuote": true, | |
| "prettier.trailingComma": "all", | |
| "prettier.printWidth": 80, | |
| "prettier.endOfLine": "lf", | |
| // line end | |
| "files.eol": "\n", | |
| } |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
npm install eslint -g, install ESLint & Prettier VSCode extensions,npm init -ynpx create-react-app .npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier husky lint-staged3,
npx install-peerdeps --dev eslint-config-airbnbeslint --init