Automatic Line Breaks Issue After Git Commit

I apologize in advance for any awkward expressions in English. 🙏

English is not my native language, and I have relied on ChatGPT's assistance to proceed with the translation.

Problem Scenario

This blog was built with Next.js, using the Tailwind CSS Blog Starter template.

While writing content locally, line breaks are intentionally added, and the content appears as intended. However, after making a Git commit, line breaks inexplicably appear again. No matter how many times you revise the content, it reverts to displaying unwanted line breaks after a commit.

Due to these unexpected line breaks introduced after a commit, the blog content does not appear as intended.

Identifying the Cause

The Tailwind CSS Blog Starter template code is configured to use husky to run prettier before committing.

Husky?

I inquired about "Husky" with Chat GPT.

Husky is a set of Git hooks that are scripts executed automatically in a Git repository before or after specific Git actions, such as committing or pushing code changes. It allows developers to enforce certain rules and automate tasks related to code quality, testing, and commit message formatting.

Husky is commonly used in Node.js environments, and it supports various Git hooks, including:

pre-commit: This hook runs before a commit is made, making it suitable for tasks like code formatting, linting, and running unit tests to ensure code quality.
pre-push: This hook runs before a push occurs, typically used for tasks like running tests or builds to validate the code before it's pushed to the repository.
commit-msg: After a commit message is written, this hook can be used to enforce specific commit message formats or automatically add issue numbers, ensuring consistent commit message standards.

Husky works by creating or replacing hook scripts in the .git/hooks directory of your project. You can write custom scripts for your needs or use example scripts provided with Husky via your package manager.

By configuring Husky to run scripts for specific hooks, you can automate and streamline your development process, ensuring code quality and consistency in your Git workflow.

In the Tailwind CSS Blog Starter Kit, the Husky-related code appears as follows:

.husky/pre-commit

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install lint-staged

package.json

{
  "lint-staged": {
    "*.+(js|jsx|ts|tsx)": [
      "eslint --fix"
    ],
    "*.+(js|jsx|ts|tsx|json|css|md|mdx)": [
      "prettier --write"
    ]
  }
}

Solution

I am using the .mdx extension for my blog posts.

Looking at the package.json code provided earlier, it runs prettier for files with the mdx extension.

As a solution, I excluded the .mdx extension and modified it to run prettier separately.

The final code looks like this:

package.json

{
  "lint-staged": {
    "*.+(js|jsx|ts|tsx)": [
      "eslint --fix"
    ],
    "*.+(js|jsx|ts|tsx|json|css|md)": [
      "prettier --write"
    ]
  }
}

Conclusion

For source code, it's a good practice to follow coding conventions.

However, I found it inconvenient to run prettier for blog post writing, as it doesn't align with the content's formatting. Therefore, I decided to exclude it boldly.

Now my blog posts look as intended. 😃

Problem Scenario

Identifying the Cause

Husky?

Checking Husky-related Code

Solution

Conclusion

Related Tags Posts