Setting Up a GitHub Repository Like a Pro

When developing a project, we often overlook establishing metrics and standards for our workflow. While clients may not care if our code has a formatter configured or if we have defined a process for tracking changes, implementing these standards makes code integration easier, not only for us but also for future collaborators.

In this article, I will show you how to set up a GitHub repository like a true professional. If you want more information about the tools and dependencies used, I recommend checking their official documentation, as this blog focuses exclusively on configuration. :)

Note: This setup was performed in a Windows 10 environment, using NPM as the package manager and Visual Studio Code (VSCode) as the code editor.

Before Starting

Make sure your repository is initialized. If it isn't, run:

git init

---

Commit Lint

Commit Lint helps maintain a consistent format in commit messages.

Installation

npm install --save-dev @commitlint/config-conventional @commitlint/cli

Configuration

Create the commitlint.config.js file with the following content:

echo 'module.exports = { extends: ["@commitlint/config-conventional"], };' > commitlint.config.js

Extension in VSCode

Install the Conventional Commits extension and use it as follows:

1. Press Ctrl + Shift + P.
2. Search for "Conventional Commits" and select the option.
3. Follow the steps to configure your commit.

Note: The configuration uses the config-conventional standard, so the extension will simplify writing proper commit messages.

---

Prettier

Prettier is a tool for consistently formatting code.

Installation

npm install --save-dev --save-exact prettier

Configuration

Create the .prettierrc.json file with the following settings:

{
    "printWidth": 80,
    "tabWidth": 1,
    "useTabs": true,
    "semi": true,
    "singleQuote": false,
    "quoteProps": "as-needed",
    "jsxSingleQuote": false,
    "trailingComma": "all",
    "bracketSpacing": true,
    "bracketSameLine": false,
    "arrowParens": "always",
    "proseWrap": "preserve",
    "htmlWhitespaceSensitivity": "css",
    "endOfLine": "lf",
    "embeddedLanguageFormatting": "auto",
    "singleAttributePerLine": false
}

Exclude certain directories by creating the .prettierignore file:

**/node_modules/
**/dist/

Extension in VSCode

Install the Prettier extension and set it as the default formatter in your settings.json file.

Note: You can add additional plugins in Prettier's configuration to further customize its functionality.

---

Lint Staged

Lint Staged allows you to run scripts on files that are about to be committed.

Installation

npm install --save-dev lint-staged

Configuration

Create the lint-staged.config.js file with the following content:

module.exports = {
    "**/*.js": ["prettier --write"],
    "**/*.ts": ["prettier --write"],
    "**/*.tsx": ["prettier --write"],
    "**/*.jsx": ["prettier --write"],
    "**/*.json": ["prettier --write"],
    "**/*.css": ["prettier --write"],
    "**/*.scss": ["prettier --write"],
    "**/*.md": ["prettier --write"]
};

Note: You can modify this configuration to include or exclude extensions based on your needs.

---

Changelog

Automatically generate a changelog with Conventional Changelog.

Installation

npm install --save-dev conventional-changelog-cli

Configuration

Add the following script to the package.json file:

"scripts": {
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
}

Parameters:

1. -p angular: Specifies the preset (predefined configuration) to use.
2. -i CHANGELOG.md: File where the changelog will be written.
3. -s: Saves the changes directly to the file.
4. -r 0: Regenerates the changelog from the beginning of the commit history.

Note: This process works best if you use commit messages based on Conventional Commits.

---

Husky

Husky allows you to define git hooks to automate tasks before commits.

Installation

npm install --save-dev husky

Configuration

Initialize Husky:

npx husky init

Set up the hooks by creating the following files:

File commit-msg:

echo 'npx --no -- commitlint --edit $1' > .husky/commit-msg

File pre-commit:

echo 'npx lint-staged' > .husky/pre-commit

Note: These hooks run Lint Staged and Commit Lint before making a commit.

---

Project Structure

By the end, your project should have a structure similar to this:

.
├── .husky/
|   ├── _/
|   ├── commit-msg
|   └── pre-commit
├── .gitignore
├── .prettierignore
├── .prettierrc.json
├── CHANGELOG.md
├── commitlint.config.js
├── package-lock.json
├── lint-staged.config.js
├── package.json
└── README.md

---

Conclusion

Finalize the setup by making an initial commit. As an additional option, you could enable GitHub Actions to automate the deployment and versioning of your repository, but that’s a topic for another article.

Although this process may seem complex, it is done only once and will help keep your code organized. I hope this guide was helpful! 🫡