Code Quality Friendly Vite Template

This template includes:

• Typescript
• ESLint
• Prettier
• Husky
• React Testing Library

Path alias ~/

• Context: https://twitter.com/domhabersack/status/1557763450687848448

ESlint Rules

Prefer Array<T> over T[]

• Rule: array-type
• Why: https://twitter.com/TkDodo/status/1352201629408387072

Don't allow unused variables unless they start with an underscore

• Rule: no-unused-vars
• Why: Unused variables are removed from the prod build, but can make the code harder to read. There are times when you need to declare them though, like in event handlers where the event parameter isn't needed but is required, so the rule allows you to declare those variables using an underscore.

const handleEvent = (_event, data) => {};

Ordered imports

• Rule: import/order
• Why: Ordered and grouped imports helps to avoid conflicts when several people add new imports to the same file.

No React import in JSX file unless is needed

• Rule: react-in-jsx-scope
• Why: Starting with React 17 it is not needed to import React at the top of the JSX files. Source: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

Prefer arrow functions

• Rule: eslint-plugin-prefer-arrow-functions
• Why: I hate this
• Note: This is more a preference, you can deactivate it by removing line 30 and 79-87 in the .eslintrc file and running the following command

yarn remove eslint-plugin-prefer-arrow-functions