Opinionated Checklist for Initializing a New Web Application

Remember Preferred Node.js Version

First create config:

echo "lts/iron" > .nvmrc

… then switch to it:

nvm use

Set up dev server.

I prefer the official Redux template for Vite:


```shell
npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

Configure Code Linting and Formatting

Make sure that when pressing tab key or enter key, the code editors performs expected actions. Preferred EditorConfig:

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true

# Matches multiple files with brace expansion notation
# Set default charset
[*.{ts,tsx,css}]
charset = utf-8
indent_style = space
indent_size = 2

# Tab indentation (no size specified)
[*.{yml,yaml}]
indent_style = tab

I prefer ESlint, with code formatting rules disabled, and Prettier.

npm install --save-dev --save-exact prettier
npx prettier . --write
npm install --save-dev husky lint-staged
npx husky install
npm pkg set scripts.prepare="husky install"
npx husky add .husky/pre-commit "npx lint-staged"

Add to package.json:

{
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}

References

  • https://redux.js.org/introduction/getting-started#installation
  • https://github.com/nvm-sh/nvm/blob/master/README.md https://editorconfig.org/
  • https://github.com/prettier/eslint-config-prettier/blob/main/README.md
  • https://prettier.io/docs/en/install