cra-template-ts-prettier-eslint-airbnb

    2.1.0 • Public • Published

    cra-template-ts-prettier-eslint-airbnb

    Template for Create React App supporting TypeScript with Prettier and ESlint config recommended by Airbnb.

    React 17

    Use a new version of React 17 even without new features, now importing React into JSX files is optional. In addition to making things simpler with automatic injection of the JSX transformer, it also reduces the file size. Read more...

    Before

    import React from 'react'; // Required
    
    function MyComponent(){
        return (
            <div>Hello Developers!</div>
        );
    }

    Now

    function MyComponent(){
        return (
            <div>Hello Developers!</div>
        );
    }

    Prerequisites

    • Node.js (Node.js >= 8.10 and npm >= 5.6)

    Installation

    Creating a React project using a custom template.

    npx create-react-app myapp --template ts-prettier-eslint-airbnb

    After Installation

    The CRA Custom Template does not yet have support for devDependencies, so I recommend edit your package.json to like this:

    {
        "name": "myapp",
        "version": "0.1.0",
        "private": true,
        "scripts": {
            "build": "npm run lint && react-scripts build",
            "eject": "react-scripts eject",
            "lint": "eslint src/ --ext .js,.jsx,.ts,.tsx",
            "lint:fix": "npm run lint -- --fix",
            "start": "react-scripts start",
            "test": "react-scripts test"
        },
        "dependencies": {
            "react": "^17.0.2",
            "react-dom": "^17.0.2",
            "react-scripts": "^4.0.3",
            "web-vitals": "^2.1.2"
        },
        "devDependencies": {
            "@testing-library/jest-dom": "^5.15.0",
            "@testing-library/react": "^12.1.2",
            "@testing-library/user-event": "^13.5.0",
            "@types/jest": "^27.0.3",
            "@types/react": "^17.0.36",
            "@types/react-dom": "^17.0.11",
            "@typescript-eslint/eslint-plugin": "^5.4.0",
            "@typescript-eslint/parser": "^5.4.0",
            "eslint": "^7.11.0",
            "eslint-config-airbnb": "^18.2.1",
            "eslint-config-airbnb-typescript": "^16.0.0",
            "eslint-config-prettier": "^8.3.0",
            "eslint-plugin-import": "^2.25.3",
            "eslint-plugin-import-helpers": "^1.2.0",
            "eslint-plugin-jsx-a11y": "^6.5.1",
            "eslint-plugin-prettier": "^4.0.0",
            "eslint-plugin-react": "^7.27.1",
            "eslint-plugin-react-hooks": "^4.3.0",
            "prettier": "^2.4.1",
            "typescript": "4.5.2"
        },
        "eslintConfig": {
            "extends": "react-app"
        },
        "browserslist": {
            "development": [
                "last 1 chrome version",
                "last 1 firefox version",
                "last 1 safari version"
            ],
            "production": [
                ">0.2%",
                "not dead",
                "not op_mini all"
            ]
        }
    }

    License

    MIT

    Install

    npm i cra-template-ts-prettier-eslint-airbnb

    DownloadsWeekly Downloads

    21

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    35.7 kB

    Total Files

    25

    Last publish

    Collaborators

    • lindomar-oliveira