cra-template-typescript-standard-prettier

TypeScript template for Create React App with standardjs (eslint), prettier, editorconfig, axios, react-router-dom, react-icons and styled-components.

How to use

Please attention with the steps below:

To use this template, add --template typescript-standard-prettier when creating a new app.

For example:

yarn create react-app my-app --template typescript-standard-prettier

# or

npx create-react-app my-app --template typescript-standard-prettier

Versions to this template:

typescript: ^4.6.4
@typescript-eslint/eslint-plugin: ^5.23.0
@typescript-eslint/parser: ^5.23.0

IMPORTANT

Due to an eslint config limitation you have to install all dependencies that this config uses manually with:

yarn setup

# or

npm run setup-npm

To be clear, you need to run, by example:

yarn create react-app my-app --template typescript-standard-prettier
cd my-app
yarn setup

Folder structure

my-app
├── src/
│   ├── api/
│   │   └── index.ts
│   ├── compoments/
│   ├── pages/
│   │   ├── About/
│   │   │   └── About.tsx
│   │   │   └── styles.ts
│   │   ├── Home/
│   │   │   └── Home.tsx
│   │   │   └── styles.ts
│   │   └── Restrict/
│   │       └── Restrict.tsx
│   │       └── styles.ts
│   ├── routes/
│   │   └── index.tsx
│   ├── styles/
│   │   └── global.ts
│   ├── App.css
│   ├── App.tsx
│   ├── App.test.tsx
│   └── index.tsx
├── .editorconfig
├── .editorignore
├── .eslintrc.json
├── .gitignore
├── prettier.config.js
├── README.md
└── tsconfig.json

You can remove App.css file. This file is generated automatically by cra.

This template is configured with an absolute path, so you can use it like this:

import { Home, Page } from 'pages'

Instead:

import { Home, Page } from '../pages'

Editor integration

VSCode

I recommend the best editor for JavaScript/TypeScript to use with this template: Visual Studio Code (VSCode).

And these extensions to best integration (Prettier extension it's not necessary!):

• ESLint
• EditorConfig for VS Code

Change your settings.json to fix all:

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

or specific:

  "[typescriptreact]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },

That's it. Reload the window or restart your VSCode to load config.

Contributing

1. Fork it
2. Create a branch (git checkout -b feat/new-feature)
3. Add changes (git add .)
4. Commit (git commit -m 'add some feature)
5. Push (git push origin feat/new-feature)
6. Open a PR :D

License

cra-template-typescript-standard-prettier is open source software licensed as MIT.