Project Setup

Getting a repo setup before you start a project.

Import Aliases

Clean up projects imports with aliases

Instead of referencing a Header component with the following file path ../../../components/Header

The imports become @components/Header

To setup the alias, you need to set the baseUrl and then define the paths in .tsconfig

{
  ...,
  "compilerOptions": {
    ...,
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@layouts/*": ["src/layouts/*"],
      "@utils/*": ["src/utils/*"]
    }
  }
}

This will help with simplifying the import statements and copying over imports to new files.

Prettier

Code formatting is essential and I try to keep it as basic as possible

npm install -D prettier

Sample prettier config saved in the root directory .prettierrc

{
  "bracketSpacing": true,
  "tabWidth": 2,
  "singleQuote": true
}

If working with tailwind then I also install the prettier plugin for class sorting

npm install -D prettier-plugin-tailwindcss

{
  ...,
  "plugins": [
    "prettier-plugin-tailwindcss"
  ]
}