如何在Glitch项目中配置Prettier及解决提交校验失效问题

Hey there! Let's break down your Glitch + Prettier questions step by step, since I’ve dealt with similar setup quirks before.

Adding Prettier to your Glitch project is simple—just follow these steps directly in the Glitch interface:

• Open your Glitch project, then launch the Terminal (click Tools in the bottom-left corner, then select Terminal).
• Install Prettier as a dev dependency:

  npm install prettier --save-dev
  

  (If your project uses Yarn instead, run yarn add prettier --dev.)
• Create a .prettierrc config file in your project root to define your formatting rules. Here’s a basic example you can use:

  {
    "singleQuote": true,
    "semi": false,
    "tabWidth": 2,
    "trailingComma": "es5"
  }
  

• Add a script to your package.json so you can manually trigger formatting anytime:

  {
    "scripts": {
      "format": "prettier --write ."
    }
  }
  

• Test it out by running npm run format in the terminal—this will format all files in your project according to your .prettierrc rules.

It’s super frustrating when pre-commit hooks don’t fire, but let’s troubleshoot this specifically for Glitch’s environment. Here’s what to check:

1. Verify dependencies and Husky version compatibility #

• First, make sure husky and lint-staged are properly installed. Run this in the terminal to check:

  npm list husky lint-staged
  

  If either is missing, reinstall them:

  npm install husky lint-staged --save-dev
  

• Note: Husky v7+ uses a new configuration system. If you’re on a newer version, you need to initialize hooks first. Run:

  npx husky install
  

  Then add a prepare script to package.json so hooks auto-initialize whenever dependencies are installed:

  {
    "scripts": {
      "prepare": "husky install"
    }
  }
  

2. Set up the pre-commit hook correctly #

• Use Husky’s built-in command to create the pre-commit hook (this avoids manual file errors):

  npx husky add .husky/pre-commit "npx lint-staged"
  

• Open the .husky/pre-commit file to confirm it looks like this (no typos!):

  #!/usr/bin/env sh
  . "$(dirname -- "$0")/_/husky.sh"
  
  npx lint-staged
  

3. Configure lint-staged to target Prettier #

• Update your package.json with a lint-staged section that tells it to run Prettier on staged files. You can target specific file types or use a broad rule:

  {
    "lint-staged": {
      "*.{ts,js,json,md}": "prettier --write"
    }
  }
  

  Or for all file types (ignoring files Prettier doesn’t recognize):

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

4. Fix Glitch-specific quirks #

• Glitch’s Git cache can sometimes interfere with hooks. Reset the cache and re-stage your files:

  git rm -r --cached .
  git add .
  

• Double-check that your .prettierrc is in the project root and has valid JSON syntax (no missing commas or quotes—this breaks Prettier silently).
• If the hook still doesn’t fire, try restarting the Glitch terminal (close and re-open it) and re-run npx husky install—sometimes terminal sessions lose context.

内容的提问来源于stack exchange，提问作者jsdario