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.