Skip to content

Instantly share code, notes, and snippets.

@fedek6

fedek6/.eslintrc.js

Created Jun 16, 2021
Embed
What would you like to do?
How to create react app with Typescript, ESlint, Prettier and Airbnb config (using yarn).
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
"plugin:react/recommended",
"airbnb",
"plugin:import/typescript",
"prettier",
],
parser: "@typescript-eslint/parser",
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: "module",
},
plugins: ["react", "@typescript-eslint", "prettier"],
rules: {
// note you must disable the base rule as it can report incorrect errors
quotes: ["warn", "double"],
"no-use-before-define": "off",
"@typescript-eslint/no-use-before-define": ["error"],
"react/jsx-filename-extension": [
2,
{ extensions: [".js", ".jsx", ".ts", ".tsx"] },
],
"prettier/prettier": "warn",
"import/extensions": [
"error",
"always",
{
js: "never",
jsx: "never",
ts: "never",
tsx: "never",
},
],
},
};

How to create react app with Typescript, ESlint, Prettier and Airbnb config (using yarn).

Init app

yarn create react-app your-app --template typescript
cd your-app

Eslint init

npx eslint --init

Select ptions:

1 To check syntax, find problems, and enforce code style 2 JavaScript modules (import/export) 3 React 4 Yes 5 Browser 6 Use a popular style guide 7 Airbnb 8 JS 9 Yes

Clean up:

rm -r node_modules
rm package-lock.json
yarn install

You'll also need a local Typescript:

yarn add -D typescript

Integrate Prettier

yarn add -D eslint-plugin-prettier
yarn add -D -E prettier

Use yarn start to test if everything is OK!

{
"name": "draft-playground",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"typescript": "^4.3.2",
"web-vitals": "^1.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": {
"@typescript-eslint/eslint-plugin": "^4.27.0",
"@typescript-eslint/parser": "^4.27.0",
"eslint": "^7.28.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "2.3.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment