使用prettier和husky自动格式化代码【React * Firebase个人开发第二部分】

3 年 ago
雅, 悟
3 minutes

上一篇文章在这里。

我是ucho456。在第2部分中，我想要在上次启动的React应用中使用prettier和husky来设置代码的自动格式化。

提前确定文件夹架构

在进行自动格式设置之前，我们需要整理src文件夹及其子文件夹的结构。虽然以后可能会有变动，但暂时我们想要达到以下的结构。

src/
|--- components // 部品コンポーネントを格納するフォルダ
|--- constants // グローバル定数を格納するフォルダ
|--- contexts // contextを格納するフォルダ
|--- firebase // firebase関連のファイルを格納するフォルダ
|--- hooks // カスタムhooksを格納するするフォルダ
|--- pages // pageコンポーネントを格納するフォルダ（今回はNext.jsでは無いですが、ルーティングしたページの大本となるコンポーネントを格納する位置づけとしました。）
|--- router // ルーティング関連のファイルを格納するフォルダ
|--- store // reduxを格納するフォルダ
|--- types // 型ファイルを格納するフォルダ
|--- utils // utility関数のファイルを格納するフォルダ

为了让每个文件夹在git中被识别，我创建了dummy.txt文件。一旦开始使用文件夹，我会逐步删除这个文件。此外，我注意到在启动React时有一个assets文件夹，但是由于计划将图像和字体文件存储在public文件夹中，所以目前可能不需要它。它将在以后被删除。

设置 import alias

再次编辑tsconfig.json和vite.config.ts文件，设置import别名。

tsconfig.json的意思是TypeScript的配置文件。

{
  "compilerOpations": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

vite.config.ts 的中文释义

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react-swc"

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": "/src",
    },
  },
})

安装prettier

从这里开始是正题。我们将安装prettier并使代码格式化可用。上一篇文章中，当我们使用vite来启动React时，eslint已经被默认设置好了，所以我们不需要再进行新的安装。如果出现了我关心的语法检查问题，我会再次进行设置。另外，为了在格式化时按照import的顺序进行排序，我们也会安装prettier-plugin-sort-imports。

npm i -D prettier @trivago/prettier-plugin-sort-imports

创建`.prettierrc.cjs`文件。设置根据您的喜好。

const sortImports = require.resolve("@trivago/prettier-plugin-sort-imports")

module.exports = {
  trailingComma: "all",
  tabWidth: 2,
  printWidth: 100,
  arrowParens: "always",
  semi: true,
  endOfLine: "lf",
  plugins: [sortImports],
  importOrder: [
    "^react",
    "<THIRD_PARTY_MODULES>",
    "^@/components",
    "^@/constants",
    "^@/contexts",
    "^@/firebase",
    "^@/hooks",
    "^@/pages",
    "^@/router",
    "^@/store",
    "^@/types",
    "^@/utils",
    "^@",
    "^/",
    "^[./]"
  ]
}

请在package.json中添加脚本。

{
  "scripts": {
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "lint:fix": "npm run lint -- --fix",
    "format": "npm run lint:fix && prettier --write 'src/**/*.{js,jsx,ts,tsx}'",
  },
}

我将尝试对代码进行格式化。我认为App.tsx将按照以下方式进行格式化。

npm run format

import { useState } from "react";
import "@/App.css";
import reactLogo from "@/assets/react.svg";
import viteLogo from "/vite.svg";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
    </>
  );
}

export default App;

在提交之前使用Husky自动格式化

安装Husky和Lint-staged，以便在提交前进行格式化。

npm i -D husky lint-staged

在 package.json 文件中添加 husky 和 lint-staged 的设置。

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts,jsx,tsx,css,scss,md}": [
      "npm run format"
    ]
  }
}

在当前的Git仓库中启用husky的Git钩子，并添加pre-commit钩子。

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

我认为这就是husky的产生方式。请随意修改App.tsx并尝试进行提交。如果在提交之前自动进行了格式化，则本次文章完成。

结束

请参考以下package.json文件来对这次的实施进行版本等的匹配，安装时希望进行调整的人。

{
  "name": "******",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --host",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "lint:fix": "npm run lint -- --fix",
    "format": "npm run lint:fix && prettier --write 'src/**/*.{js,jsx,ts,tsx}'",
    "preview": "vite preview",
    "docker:start": "docker compose up -d",
    "docker:stop": "docker compose down"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@trivago/prettier-plugin-sort-imports": "^4.2.0",
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react-swc": "^3.3.2",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "husky": "^8.0.3",
    "lint-staged": "^13.2.3",
    "prettier": "^3.0.1",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts,jsx,tsx,css,scss,md}": [
      "npm run format"
    ]
  }
}

下一次

 

bannerAds