Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/andreynav/cra-ts-eslint-prettier-config

Template for start project with Create React App + TS + ESLint + Prettier
https://github.com/andreynav/cra-ts-eslint-prettier-config

config cra-template-typescript cra-template-typescript-eslint-prettier create-react-app eslint eslint-prettier prettier typescript

Last synced: 23 days ago
JSON representation

Template for start project with Create React App + TS + ESLint + Prettier

Awesome Lists containing this project

README 

        
# General Notes



React project config set up for: **Create React App + TypeScript + ESLint + Prettier + WebStorm** from scratch.



Recommend to use **Yarn** as a package manager.



## Installation



1. To install [Create React App](https://create-react-app.dev/docs/getting-started#yarn) select a start directory for a new project (folder with all projects) and enter the following command:



```console

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

```



Change the `your-app-name` to desired project name and note that we are using **TypeScript** as our template language.



2. To install [ESLint](https://yarnpkg.com/package/eslint) open the root project directory and enter the following command:



```console

  yarn add -D eslint

```



Note that we are using `-D` flag to install the package in `devDependencies`.



3. After installing **ESLint** we need to initialize the configuration file. To do this, enter the following command:



```console

  npx eslint --init

```



And answer the next questions:



```console

    How would you like to use ESLint? …

    To check syntax only

    ▸ To check syntax and find problems

    To check syntax, find problems, and enforce code style

```



```console

    What type of modules does your project use? … 

    ▸ JavaScript modules (import/export)

    CommonJS (require/exports)

    None of these

```



```console

    Which framework does your project use? …

    ▸ React

    Vue.js

    None of these

```



```console

    Does your project use TypeScript? 

    ‣ Yes / No

```



```console

    Where does your code run? …  (Press  to select,  to toggle all,  to invert selection)

    ✔ Browser

    ✔ Node

```



```console

    What format do you want your config file to be in? … 

    JavaScript

    YAML

    ▸ JSON

```



```console

    The config that you've selected requires the following dependencies:

    eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest

    ? Would you like to install them now with npm? ‣ No / Yes

```



4. Since we chose **No** for the last questions (we use **Yarn**), we need to install the suggested dependencies: 



```console

  yarn add -D eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest

```



5. To install **TypeScript plugins** related to ESLint enter the following command:



```console

    yarn add -D eslint-plugin-import @typescript-eslint/parser eslint-import-resolver-typescript

```



6. To install [Prettier](https://yarnpkg.com/package/prettier) enter the following command:



```console

    yarn add -D prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react-hooks

```



7. To install [Prettier plugin sort imports](https://yarnpkg.com/package/@trivago/prettier-plugin-sort-imports) enter the following command:



```console

    yarn add @trivago/prettier-plugin-sort-imports

```



8. Create `.prettierrc` file in the root directory and fill the rules. See example [here](.prettierrc)



9. Create `.prettierignore` file in the root directory and fill the rules. See example [here](.prettierignore)



10. Fill the `.eslintrc.json` file as in example [here](.eslintrc.json). ❗ Note that the order in which the "extends" object keys are placed is important. 



11. Create `.eslintignore` file in the root directory and fill the rules. See example  [here](.eslintignore)

 

12. Fill the `tsconfig.json` file as in example [here](tsconfig.json)



13. Create a `.env` file in the root directory. You can add a row like `PORT=3002` to the `.env` file, and run the project on the desired port. ❗ Note that we need to put `.env` file inside `.gitignore`in order to exclude data sharing from it.



14. To install `Prettier` plugin to **WebStorm** open the Webstorm > Preferences > Plugins, find **Prettier** and install it.



15. To run `Prettier` automatically against specific files, open the Webstorm > Preferences > Languages & Frameworks > JavaScript > Prettier, select the right path to Prettier package, and use the "On reformatting code" and "On save" checkboxes to specify the actions that will trigger Prettier.



![prettier-settings](public/prettier-settings.png)



## Project structure



The project structure should look like this:



```

.

├── public

├── src

├── .env

├── .eslintignore

├── .eslintrc.json

├── .gitignore

├── .gitignore

├── .prettierignore

├── .prettierrc

├── package.json

├── README.md

└── tsconfig.json

```

## Running project



To run project, open the root directory and enter the following command:



```console

  yarn start

```



It's expected that there will be errors after run the project. Add the next row to your `package.json` file to the section `scripts`:



```console

   "fix:codestyle": "find src/ -type f \\( -name \"*.ts\" -o -name \"*.tsx\" -o -name \"*.js\" -o -name \"*.jsx\" \\) -not -name \"*.d.ts\" | xargs prettier --write --plugin=./node_modules/@trivago/prettier-plugin-sort-imports/",

```



Run it by command:



```console

    yarn fix:codestyle

```



The command will fix some issues automatically. Also, you have to fix some issues by manual (for example, delete redundant `import react from 'react'`)



## License



The project is open source software provided under the [Apache License 2.0](LICENSE.md).