My Personal Front-End Starter Template

Note

This is a work in progress.

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 (.gitignore).¹
• Line endings of text-based files committed to the repository are automatically normalized (.gitattributes).

Dependencies

• Pinned dependencies (.npmrc).²
• Automated dependency updates with GitHub's Dependabot version updates (.github/dependabot.yml).

Formatting and Linting

Formatting

• EditorConfig
• Prettier

Linters

• markdownlint-cli2 for Markdown
• Stylelint for CSS
• ESLint for JavaScript

Formatters and linters are automatically run before committing with husky + 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.

• VS Code: recommended extensions and useful settings.

Getting started

Prerequisites: Git, and Node.js + npm.

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
• README.md
• index.html
• styles.css

May need to be customized

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

Don't need to be customized (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

See 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) ↩