My Personal Front-End Starter Template

This template repository provides a foundation for building simple websites using my preferred front-end web development tools.

It's preconfigured with up-to-date tools and includes comments explaining my choices throughout the codebase.

Features

Git

• List of files and directories to be ignored by Git (see .gitignore).¹
• Line endings of text-based files committed to the repository are automatically normalized (see .gitattributes).

Git Hooks

• Pre-commit: Prevents commits on the main branch or in a detached HEAD state.
• Post-checkout & Post-merge: Checks for package-lock.json changes when running git checkout/merge/pull/switch, and if found, prompts to run npm ci.

See files in .husky folder.

Dependencies

• Automated dependency updates with GitHub's Dependabot version updates (see .github/dependabot.yml).
• Pinned versions: dependencies saved to package.json will be configured with an exact version by default, rather than using npm's default semver range operator (see .npmrc).²
• .nvmrc with lts/* by default (customize it as needed)

Formatting and Linting

Formatting

• EditorConfig (see .editorconfig)
• Prettier (see .prettierignore and prettier.config.js)

Linting

• Markdown: markdownlint-cli2 (see .markdownlint-cli2.jsonc)
• CSS: Stylelint (see .stylelintignore and stylelint.config.js)
• JavaScript: ESLint (see eslint.config.js)

The formatter(s) and linters used are configured using sensible and personal preferences, and are automatically run before committing using a pre-commit Git hook with husky and lint-staged.

Code editor integrations

To get the most out of the tools and have a better developer experience, it is highly recommended to use the integrations with the code editors.

Visual Studio Code

• Recommended extensions
• Useful settings

Getting started

Prerequisites

• Git
• Node.js + npm

Steps

1. Create a new repository³ from this template and clone it⁴ to your computer.
2. Install the dependencies by running npm install in the root directory of the repository.
3. Install the tools' integrations with your code editor (optional, but highly recommended):
   • Extensions for VS Code.

Customization

Some parts should be customized for each project, while others are optional.

Must be customized

• package.json:
  • name
  • description
  • keywords
  • homepage
  • bugs.url
  • repository.url
  • author
• README.md

May require customization

• package.json:
  • version
  • private
  • license
  • type
  • main
  • dependencies
  • devDependencies
  • scripts
  • lint-staged
• .github/dependabot.yml
• .vscode/extensions.json
• .vscode/settings.json
• .gitignore
• .nvmrc
• index.html
• LICENSE
• styles.css

Doesn't require customization (probably)

• .husky/
• .editorconfig
• .gitattributes
• .npmrc

Contribution

Feel free to fork this template and modify it to fit your needs! I'm open to suggestions on how to improve it.

License

LICENSE.

References

• Client-side web development tools (MDN)

Footnotes

1. Use gitignore.io. ↩

2. Should you Pin your JavaScript Dependencies? (Renovate Docs) ↩

3. Creating a repository from a template (GitHub Docs) ↩

4. Cloning a repository (GitHub Docs) ↩