{"id":38242,"date":"2023-02-11T07:02:53","date_gmt":"2023-07-23T08:59:38","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8prettier%e5%92%8chusky%e8%87%aa%e5%8a%a8%e6%a0%bc%e5%bc%8f%e5%8c%96%e4%bb%a3%e7%a0%81%e3%80%90react-firebase%e4%b8%aa%e4%ba%ba%e5%bc%80%e5%8f%91%e7%ac%ac%e4%ba%8c%e9%83%a8%e5%88%86\/"},"modified":"2024-04-29T14:07:13","modified_gmt":"2024-04-29T06:07:13","slug":"%e4%bd%bf%e7%94%a8prettier%e5%92%8chusky%e8%87%aa%e5%8a%a8%e6%a0%bc%e5%bc%8f%e5%8c%96%e4%bb%a3%e7%a0%81%e3%80%90react-firebase%e4%b8%aa%e4%ba%ba%e5%bc%80%e5%8f%91%e7%ac%ac%e4%ba%8c%e9%83%a8%e5%88%86","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8prettier%e5%92%8chusky%e8%87%aa%e5%8a%a8%e6%a0%bc%e5%bc%8f%e5%8c%96%e4%bb%a3%e7%a0%81%e3%80%90react-firebase%e4%b8%aa%e4%ba%ba%e5%bc%80%e5%8f%91%e7%ac%ac%e4%ba%8c%e9%83%a8%e5%88%86\/","title":{"rendered":"\u4f7f\u7528prettier\u548chusky\u81ea\u52a8\u683c\u5f0f\u5316\u4ee3\u7801\u3010React * Firebase\u4e2a\u4eba\u5f00\u53d1\u7b2c\u4e8c\u90e8\u5206\u3011"},"content":{"rendered":"

\u4e0a\u4e00\u7bc7\u6587\u7ae0\u5728\u8fd9\u91cc\u3002<\/p>\n

\u6211\u662fucho456\u3002\u5728\u7b2c2\u90e8\u5206\u4e2d\uff0c\u6211\u60f3\u8981\u5728\u4e0a\u6b21\u542f\u52a8\u7684React\u5e94\u7528\u4e2d\u4f7f\u7528prettier\u548chusky\u6765\u8bbe\u7f6e\u4ee3\u7801\u7684\u81ea\u52a8\u683c\u5f0f\u5316\u3002<\/p>\n

\u63d0\u524d\u786e\u5b9a\u6587\u4ef6\u5939\u67b6\u6784<\/h2>\n

\u5728\u8fdb\u884c\u81ea\u52a8\u683c\u5f0f\u8bbe\u7f6e\u4e4b\u524d\uff0c\u6211\u4eec\u9700\u8981\u6574\u7406src\u6587\u4ef6\u5939\u53ca\u5176\u5b50\u6587\u4ef6\u5939\u7684\u7ed3\u6784\u3002\u867d\u7136\u4ee5\u540e\u53ef\u80fd\u4f1a\u6709\u53d8\u52a8\uff0c\u4f46\u6682\u65f6\u6211\u4eec\u60f3\u8981\u8fbe\u5230\u4ee5\u4e0b\u7684\u7ed3\u6784\u3002<\/p>\n

src\/\r\n|--- components \/\/ \u90e8\u54c1\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u683c\u7d0d\u3059\u308b\u30d5\u30a9\u30eb\u30c0\r\n|--- constants \/\/ \u30b0\u30ed\u30fc\u30d0\u30eb\u5b9a\u6570\u3092\u683c\u7d0d\u3059\u308b\u30d5\u30a9\u30eb\u30c0\r\n|--- contexts \/\/ context\u3092\u683c\u7d0d\u3059\u308b\u30d5\u30a9\u30eb\u30c0\r\n|--- firebase \/\/ firebase\u95a2\u9023\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u683c\u7d0d\u3059\u308b\u30d5\u30a9\u30eb\u30c0\r\n|--- hooks \/\/ \u30ab\u30b9\u30bf\u30e0hooks\u3092\u683c\u7d0d\u3059\u308b\u3059\u308b\u30d5\u30a9\u30eb\u30c0\r\n|--- pages \/\/ page\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u683c\u7d0d\u3059\u308b\u30d5\u30a9\u30eb\u30c0\uff08\u4eca\u56de\u306fNext.js\u3067\u306f\u7121\u3044\u3067\u3059\u304c\u3001\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3057\u305f\u30da\u30fc\u30b8\u306e\u5927\u672c\u3068\u306a\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u683c\u7d0d\u3059\u308b\u4f4d\u7f6e\u3065\u3051\u3068\u3057\u307e\u3057\u305f\u3002\uff09\r\n|--- router \/\/ \u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u95a2\u9023\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u683c\u7d0d\u3059\u308b\u30d5\u30a9\u30eb\u30c0\r\n|--- store \/\/ redux\u3092\u683c\u7d0d\u3059\u308b\u30d5\u30a9\u30eb\u30c0\r\n|--- types \/\/ \u578b\u30d5\u30a1\u30a4\u30eb\u3092\u683c\u7d0d\u3059\u308b\u30d5\u30a9\u30eb\u30c0\r\n|--- utils \/\/ utility\u95a2\u6570\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u683c\u7d0d\u3059\u308b\u30d5\u30a9\u30eb\u30c0\r\n<\/code><\/pre>\n
\u4e3a\u4e86\u8ba9\u6bcf\u4e2a\u6587\u4ef6\u5939\u5728git\u4e2d\u88ab\u8bc6\u522b\uff0c\u6211\u521b\u5efa\u4e86dummy.txt\u6587\u4ef6\u3002\u4e00\u65e6\u5f00\u59cb\u4f7f\u7528\u6587\u4ef6\u5939\uff0c\u6211\u4f1a\u9010\u6b65\u5220\u9664\u8fd9\u4e2a\u6587\u4ef6\u3002\u6b64\u5916\uff0c\u6211\u6ce8\u610f\u5230\u5728\u542f\u52a8React\u65f6\u6709\u4e00\u4e2aassets\u6587\u4ef6\u5939\uff0c\u4f46\u662f\u7531\u4e8e\u8ba1\u5212\u5c06\u56fe\u50cf\u548c\u5b57\u4f53\u6587\u4ef6\u5b58\u50a8\u5728public\u6587\u4ef6\u5939\u4e2d\uff0c\u6240\u4ee5\u76ee\u524d\u53ef\u80fd\u4e0d\u9700\u8981\u5b83\u3002\u5b83\u5c06\u5728\u4ee5\u540e\u88ab\u5220\u9664\u3002<\/p>\n
\u8bbe\u7f6e import alias<\/h2>\n
\u518d\u6b21\u7f16\u8f91tsconfig.json\u548cvite.config.ts\u6587\u4ef6\uff0c\u8bbe\u7f6eimport\u522b\u540d\u3002<\/p>\n
tsconfig.json\u7684\u610f\u601d\u662fTypeScript\u7684\u914d\u7f6e\u6587\u4ef6\u3002<\/p>\n
{<\/span>\r\n  \"compilerOpations\"<\/span>:<\/span> {<\/span>\r\n    \"paths\"<\/span>:<\/span> {<\/span>\r\n      \"@\/*\"<\/span>:<\/span> [<\/span>\".\/src\/*\"<\/span>]<\/span>\r\n    }<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n\r\n<\/code><\/pre>\n
vite.config.ts \u7684\u4e2d\u6587\u91ca\u4e49<\/p>\n
import<\/span> {<\/span> defineConfig<\/span> }<\/span> from<\/span> \"<\/span>vite<\/span>\"<\/span>\r\nimport<\/span> react<\/span> from<\/span> \"<\/span>@vitejs\/plugin-react-swc<\/span>\"<\/span>\r\n\r\nexport<\/span> default<\/span> defineConfig<\/span>({<\/span>\r\n  plugins<\/span>:<\/span> [<\/span>react<\/span>()],<\/span>\r\n  resolve<\/span>:<\/span> {<\/span>\r\n    alias<\/span>:<\/span> {<\/span>\r\n      \"<\/span>@<\/span>\"<\/span>:<\/span> \"<\/span>\/src<\/span>\"<\/span>,<\/span>\r\n    },<\/span>\r\n  },<\/span>\r\n})<\/span>\r\n<\/code><\/pre>\n
\u5b89\u88c5prettier<\/h2>\n
\u4ece\u8fd9\u91cc\u5f00\u59cb\u662f\u6b63\u9898\u3002\u6211\u4eec\u5c06\u5b89\u88c5prettier\u5e76\u4f7f\u4ee3\u7801\u683c\u5f0f\u5316\u53ef\u7528\u3002\u4e0a\u4e00\u7bc7\u6587\u7ae0\u4e2d\uff0c\u5f53\u6211\u4eec\u4f7f\u7528vite\u6765\u542f\u52a8React\u65f6\uff0ceslint\u5df2\u7ecf\u88ab\u9ed8\u8ba4\u8bbe\u7f6e\u597d\u4e86\uff0c\u6240\u4ee5\u6211\u4eec\u4e0d\u9700\u8981\u518d\u8fdb\u884c\u65b0\u7684\u5b89\u88c5\u3002\u5982\u679c\u51fa\u73b0\u4e86\u6211\u5173\u5fc3\u7684\u8bed\u6cd5\u68c0\u67e5\u95ee\u9898\uff0c\u6211\u4f1a\u518d\u6b21\u8fdb\u884c\u8bbe\u7f6e\u3002\u53e6\u5916\uff0c\u4e3a\u4e86\u5728\u683c\u5f0f\u5316\u65f6\u6309\u7167import\u7684\u987a\u5e8f\u8fdb\u884c\u6392\u5e8f\uff0c\u6211\u4eec\u4e5f\u4f1a\u5b89\u88c5prettier-plugin-sort-imports\u3002<\/p>\n
npm i -D<\/span> prettier @trivago\/prettier-plugin-sort-imports\r\n<\/code><\/pre>\n
\u521b\u5efa`.prettierrc.cjs`\u6587\u4ef6\u3002\u8bbe\u7f6e\u6839\u636e\u60a8\u7684\u559c\u597d\u3002<\/p>\n
const<\/span> sortImports<\/span> =<\/span> require<\/span>.<\/span>resolve<\/span>(<\/span>\"<\/span>@trivago\/prettier-plugin-sort-imports<\/span>\"<\/span>)<\/span>\r\n\r\nmodule<\/span>.<\/span>exports<\/span> =<\/span> {<\/span>\r\n  trailingComma<\/span>:<\/span> \"<\/span>all<\/span>\"<\/span>,<\/span>\r\n  tabWidth<\/span>:<\/span> 2<\/span>,<\/span>\r\n  printWidth<\/span>:<\/span> 100<\/span>,<\/span>\r\n  arrowParens<\/span>:<\/span> \"<\/span>always<\/span>\"<\/span>,<\/span>\r\n  semi<\/span>:<\/span> true<\/span>,<\/span>\r\n  endOfLine<\/span>:<\/span> \"<\/span>lf<\/span>\"<\/span>,<\/span>\r\n  plugins<\/span>:<\/span> [<\/span>sortImports<\/span>],<\/span>\r\n  importOrder<\/span>:<\/span> [<\/span>\r\n    \"<\/span>^react<\/span>\"<\/span>,<\/span>\r\n    \"<\/span><THIRD_PARTY_MODULES><\/span>\"<\/span>,<\/span>\r\n    \"<\/span>^@\/components<\/span>\"<\/span>,<\/span>\r\n    \"<\/span>^@\/constants<\/span>\"<\/span>,<\/span>\r\n    \"<\/span>^@\/contexts<\/span>\"<\/span>,<\/span>\r\n    \"<\/span>^@\/firebase<\/span>\"<\/span>,<\/span>\r\n    \"<\/span>^@\/hooks<\/span>\"<\/span>,<\/span>\r\n    \"<\/span>^@\/pages<\/span>\"<\/span>,<\/span>\r\n    \"<\/span>^@\/router<\/span>\"<\/span>,<\/span>\r\n    \"<\/span>^@\/store<\/span>\"<\/span>,<\/span>\r\n    \"<\/span>^@\/types<\/span>\"<\/span>,<\/span>\r\n    \"<\/span>^@\/utils<\/span>\"<\/span>,<\/span>\r\n    \"<\/span>^@<\/span>\"<\/span>,<\/span>\r\n    \"<\/span>^\/<\/span>\"<\/span>,<\/span>\r\n    \"<\/span>^[.\/]<\/span>\"<\/span>\r\n  ]<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u8bf7\u5728package.json\u4e2d\u6dfb\u52a0\u811a\u672c\u3002<\/p>\n
{<\/span>\r\n  \"scripts\"<\/span>:<\/span> {<\/span>\r\n    \"lint\"<\/span>:<\/span> \"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0\"<\/span>,<\/span>\r\n    \"lint:fix\"<\/span>:<\/span> \"npm run lint -- --fix\"<\/span>,<\/span>\r\n    \"format\"<\/span>:<\/span> \"npm run lint:fix && prettier --write 'src\/**\/*.{js,jsx,ts,tsx}'\"<\/span>,<\/span>\r\n  },<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u6211\u5c06\u5c1d\u8bd5\u5bf9\u4ee3\u7801\u8fdb\u884c\u683c\u5f0f\u5316\u3002\u6211\u8ba4\u4e3aApp.tsx\u5c06\u6309\u7167\u4ee5\u4e0b\u65b9\u5f0f\u8fdb\u884c\u683c\u5f0f\u5316\u3002<\/p>\n
npm run format\r\n<\/code><\/pre>\n
import<\/span> {<\/span> useState<\/span> }<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>;<\/span>\r\nimport<\/span> \"<\/span>@\/App.css<\/span>\"<\/span>;<\/span>\r\nimport<\/span> reactLogo<\/span> from<\/span> \"<\/span>@\/assets\/react.svg<\/span>\"<\/span>;<\/span>\r\nimport<\/span> viteLogo<\/span> from<\/span> \"<\/span>\/vite.svg<\/span>\"<\/span>;<\/span>\r\n\r\nfunction<\/span> App<\/span>()<\/span> {<\/span>\r\n  const<\/span> [<\/span>count<\/span>,<\/span> setCount<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>);<\/span>\r\n\r\n  return <\/span>(<\/span>\r\n    <><\/span>\r\n      <<\/span>div<\/span>><\/span>\r\n        <<\/span>a<\/span> href<\/span>=<\/span>\"https:\/\/vitejs.dev\"<\/span> target<\/span>=<\/span>\"_blank\"<\/span>><\/span>\r\n          <<\/span>img<\/span> src<\/span>=<\/span>{<\/span>viteLogo<\/span>}<\/span> className<\/span>=<\/span>\"logo\"<\/span> alt<\/span>=<\/span>\"Vite logo\"<\/span> \/><\/span>\r\n        <\/<\/span>a<\/span>><\/span>\r\n        <<\/span>a<\/span> href<\/span>=<\/span>\"https:\/\/react.dev\"<\/span> target<\/span>=<\/span>\"_blank\"<\/span>><\/span>\r\n          <<\/span>img<\/span> src<\/span>=<\/span>{<\/span>reactLogo<\/span>}<\/span> className<\/span>=<\/span>\"logo react\"<\/span> alt<\/span>=<\/span>\"React logo\"<\/span> \/><\/span>\r\n        <\/<\/span>a<\/span>><\/span>\r\n      <\/<\/span>div<\/span>><\/span>\r\n      <<\/span>h1<\/span>><\/span>Vite + React<\/<\/span>h1<\/span>><\/span>\r\n      <<\/span>div<\/span> className<\/span>=<\/span>\"card\"<\/span>><\/span>\r\n        <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>()<\/span> =><\/span> setCount<\/span>((<\/span>count<\/span>)<\/span> =><\/span> count<\/span> +<\/span> 1<\/span>)<\/span>}<\/span>><\/span>count is {<\/span>count<\/span>}<\/span><\/<\/span>button<\/span>><\/span>\r\n        <<\/span>p<\/span>><\/span>\r\n          Edit <<\/span>code<\/span>><\/span>src\/App.tsx<\/<\/span>code<\/span>><\/span> and save to test HMR\r\n        <\/<\/span>p<\/span>><\/span>\r\n      <\/<\/span>div<\/span>><\/span>\r\n      <<\/span>p<\/span> className<\/span>=<\/span>\"read-the-docs\"<\/span>><\/span>Click on the Vite and React logos to learn more<\/<\/span>p<\/span>><\/span>\r\n    <\/><\/span>\r\n  );<\/span>\r\n}<\/span>\r\n\r\nexport<\/span> default<\/span> App<\/span>;<\/span>\r\n<\/code><\/pre>\n
\u5728\u63d0\u4ea4\u4e4b\u524d\u4f7f\u7528Husky\u81ea\u52a8\u683c\u5f0f\u5316<\/h2>\n
\u5b89\u88c5Husky\u548cLint-staged\uff0c\u4ee5\u4fbf\u5728\u63d0\u4ea4\u524d\u8fdb\u884c\u683c\u5f0f\u5316\u3002<\/p>\n
npm i -D<\/span> husky lint-staged\r\n<\/code><\/pre>\n
\u5728 package.json \u6587\u4ef6\u4e2d\u6dfb\u52a0 husky \u548c lint-staged \u7684\u8bbe\u7f6e\u3002<\/p>\n
{<\/span>\r\n  \"husky\"<\/span>:<\/span> {<\/span>\r\n    \"hooks\"<\/span>:<\/span> {<\/span>\r\n      \"pre-commit\"<\/span>:<\/span> \"lint-staged\"<\/span>\r\n    }<\/span>\r\n  },<\/span>\r\n  \"lint-staged\"<\/span>:<\/span> {<\/span>\r\n    \"*.{js,ts,jsx,tsx,css,scss,md}\"<\/span>:<\/span> [<\/span>\r\n      \"npm run format\"<\/span>\r\n    ]<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u5728\u5f53\u524d\u7684Git\u4ed3\u5e93\u4e2d\u542f\u7528husky\u7684Git\u94a9\u5b50\uff0c\u5e76\u6dfb\u52a0pre-commit\u94a9\u5b50\u3002<\/p>\n
npx husky install\r\n<\/span>npx husky add .husky\/pre-commit \"npx lint-staged\"<\/span>\r\n<\/code><\/pre>\n
\u6211\u8ba4\u4e3a\u8fd9\u5c31\u662fhusky\u7684\u4ea7\u751f\u65b9\u5f0f\u3002\u8bf7\u968f\u610f\u4fee\u6539App.tsx\u5e76\u5c1d\u8bd5\u8fdb\u884c\u63d0\u4ea4\u3002\u5982\u679c\u5728\u63d0\u4ea4\u4e4b\u524d\u81ea\u52a8\u8fdb\u884c\u4e86\u683c\u5f0f\u5316\uff0c\u5219\u672c\u6b21\u6587\u7ae0\u5b8c\u6210\u3002<\/p>\n
\u7ed3\u675f<\/h2>\n
\u8bf7\u53c2\u8003\u4ee5\u4e0bpackage.json\u6587\u4ef6\u6765\u5bf9\u8fd9\u6b21\u7684\u5b9e\u65bd\u8fdb\u884c\u7248\u672c\u7b49\u7684\u5339\u914d\uff0c\u5b89\u88c5\u65f6\u5e0c\u671b\u8fdb\u884c\u8c03\u6574\u7684\u4eba\u3002<\/p>\n
{<\/span>\r\n  \"name\"<\/span>:<\/span> \"******\"<\/span>,<\/span>\r\n  \"private\"<\/span>:<\/span> true<\/span>,<\/span>\r\n  \"version\"<\/span>:<\/span> \"0.0.0\"<\/span>,<\/span>\r\n  \"type\"<\/span>:<\/span> \"module\"<\/span>,<\/span>\r\n  \"scripts\"<\/span>:<\/span> {<\/span>\r\n    \"dev\"<\/span>:<\/span> \"vite --host\"<\/span>,<\/span>\r\n    \"build\"<\/span>:<\/span> \"tsc && vite build\"<\/span>,<\/span>\r\n    \"lint\"<\/span>:<\/span> \"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0\"<\/span>,<\/span>\r\n    \"lint:fix\"<\/span>:<\/span> \"npm run lint -- --fix\"<\/span>,<\/span>\r\n    \"format\"<\/span>:<\/span> \"npm run lint:fix && prettier --write 'src\/**\/*.{js,jsx,ts,tsx}'\"<\/span>,<\/span>\r\n    \"preview\"<\/span>:<\/span> \"vite preview\"<\/span>,<\/span>\r\n    \"docker:start\"<\/span>:<\/span> \"docker compose up -d\"<\/span>,<\/span>\r\n    \"docker:stop\"<\/span>:<\/span> \"docker compose down\"<\/span>\r\n  },<\/span>\r\n  \"dependencies\"<\/span>:<\/span> {<\/span>\r\n    \"react\"<\/span>:<\/span> \"^18.2.0\"<\/span>,<\/span>\r\n    \"react-dom\"<\/span>:<\/span> \"^18.2.0\"<\/span>\r\n  },<\/span>\r\n  \"devDependencies\"<\/span>:<\/span> {<\/span>\r\n    \"@trivago\/prettier-plugin-sort-imports\"<\/span>:<\/span> \"^4.2.0\"<\/span>,<\/span>\r\n    \"@types\/react\"<\/span>:<\/span> \"^18.2.15\"<\/span>,<\/span>\r\n    \"@types\/react-dom\"<\/span>:<\/span> \"^18.2.7\"<\/span>,<\/span>\r\n    \"@typescript-eslint\/eslint-plugin\"<\/span>:<\/span> \"^6.0.0\"<\/span>,<\/span>\r\n    \"@typescript-eslint\/parser\"<\/span>:<\/span> \"^6.0.0\"<\/span>,<\/span>\r\n    \"@vitejs\/plugin-react-swc\"<\/span>:<\/span> \"^3.3.2\"<\/span>,<\/span>\r\n    \"eslint\"<\/span>:<\/span> \"^8.45.0\"<\/span>,<\/span>\r\n    \"eslint-plugin-react-hooks\"<\/span>:<\/span> \"^4.6.0\"<\/span>,<\/span>\r\n    \"eslint-plugin-react-refresh\"<\/span>:<\/span> \"^0.4.3\"<\/span>,<\/span>\r\n    \"husky\"<\/span>:<\/span> \"^8.0.3\"<\/span>,<\/span>\r\n    \"lint-staged\"<\/span>:<\/span> \"^13.2.3\"<\/span>,<\/span>\r\n    \"prettier\"<\/span>:<\/span> \"^3.0.1\"<\/span>,<\/span>\r\n    \"typescript\"<\/span>:<\/span> \"^5.0.2\"<\/span>,<\/span>\r\n    \"vite\"<\/span>:<\/span> \"^4.4.5\"<\/span>\r\n  },<\/span>\r\n  \"husky\"<\/span>:<\/span> {<\/span>\r\n    \"hooks\"<\/span>:<\/span> {<\/span>\r\n      \"pre-commit\"<\/span>:<\/span> \"lint-staged\"<\/span>\r\n    }<\/span>\r\n  },<\/span>\r\n  \"lint-staged\"<\/span>:<\/span> {<\/span>\r\n    \"*.{js,ts,jsx,tsx,css,scss,md}\"<\/span>:<\/span> [<\/span>\r\n      \"npm run format\"<\/span>\r\n    ]<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u4e0b\u4e00\u6b21<\/h2>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
\u4e0a\u4e00\u7bc7\u6587\u7ae0\u5728\u8fd9\u91cc\u3002 \u6211\u662fucho456\u3002\u5728\u7b2c2\u90e8\u5206\u4e2d\uff0c\u6211\u60f3\u8981\u5728\u4e0a\u6b21\u542f\u52a8\u7684React\u5e94\u7528\u4e2d\u4f7f\u7528prettier\u548c […]<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38242","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u4f7f\u7528prettier\u548chusky\u81ea\u52a8\u683c\u5f0f\u5316\u4ee3\u7801\u3010React * Firebase\u4e2a\u4eba\u5f00\u53d1\u7b2c\u4e8c\u90e8\u5206\u3011 - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528prettier\u548chusky\u81ea\u52a8\u683c\u5f0f\u5316\u4ee3\u7801\u3010react-firebase\u4e2a\u4eba\u5f00\u53d1\u7b2c\u4e8c\u90e8\u5206\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u4f7f\u7528prettier\u548chusky\u81ea\u52a8\u683c\u5f0f\u5316\u4ee3\u7801\u3010React * Firebase\u4e2a\u4eba\u5f00\u53d1\u7b2c\u4e8c\u90e8\u5206\u3011\" \/>\n<meta property=\"og:description\" content=\"\u4e0a\u4e00\u7bc7\u6587\u7ae0\u5728\u8fd9\u91cc\u3002 \u6211\u662fucho456\u3002\u5728\u7b2c2\u90e8\u5206\u4e2d\uff0c\u6211\u60f3\u8981\u5728\u4e0a\u6b21\u542f\u52a8\u7684React\u5e94\u7528\u4e2d\u4f7f\u7528prettier\u548c […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528prettier\u548chusky\u81ea\u52a8\u683c\u5f0f\u5316\u4ee3\u7801\u3010react-firebase\u4e2a\u4eba\u5f00\u53d1\u7b2c\u4e8c\u90e8\u5206\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-23T08:59:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T06:07:13+00:00\" \/>\n<meta name=\"author\" content=\"\u96c5, \u609f\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u96c5, \u609f\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8prettier%e5%92%8chusky%e8%87%aa%e5%8a%a8%e6%a0%bc%e5%bc%8f%e5%8c%96%e4%bb%a3%e7%a0%81%e3%80%90react-firebase%e4%b8%aa%e4%ba%ba%e5%bc%80%e5%8f%91%e7%ac%ac%e4%ba%8c%e9%83%a8%e5%88%86\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8prettier%e5%92%8chusky%e8%87%aa%e5%8a%a8%e6%a0%bc%e5%bc%8f%e5%8c%96%e4%bb%a3%e7%a0%81%e3%80%90react-firebase%e4%b8%aa%e4%ba%ba%e5%bc%80%e5%8f%91%e7%ac%ac%e4%ba%8c%e9%83%a8%e5%88%86\/\",\"name\":\"\u4f7f\u7528prettier\u548chusky\u81ea\u52a8\u683c\u5f0f\u5316\u4ee3\u7801\u3010React * Firebase\u4e2a\u4eba\u5f00\u53d1\u7b2c\u4e8c\u90e8\u5206\u3011 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-07-23T08:59:38+00:00\",\"dateModified\":\"2024-04-29T06:07:13+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/f044a4b7fa4ee2701702942002419ca6\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8prettier%e5%92%8chusky%e8%87%aa%e5%8a%a8%e6%a0%bc%e5%bc%8f%e5%8c%96%e4%bb%a3%e7%a0%81%e3%80%90react-firebase%e4%b8%aa%e4%ba%ba%e5%bc%80%e5%8f%91%e7%ac%ac%e4%ba%8c%e9%83%a8%e5%88%86\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8prettier%e5%92%8chusky%e8%87%aa%e5%8a%a8%e6%a0%bc%e5%bc%8f%e5%8c%96%e4%bb%a3%e7%a0%81%e3%80%90react-firebase%e4%b8%aa%e4%ba%ba%e5%bc%80%e5%8f%91%e7%ac%ac%e4%ba%8c%e9%83%a8%e5%88%86\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8prettier%e5%92%8chusky%e8%87%aa%e5%8a%a8%e6%a0%bc%e5%bc%8f%e5%8c%96%e4%bb%a3%e7%a0%81%e3%80%90react-firebase%e4%b8%aa%e4%ba%ba%e5%bc%80%e5%8f%91%e7%ac%ac%e4%ba%8c%e9%83%a8%e5%88%86\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u4f7f\u7528prettier\u548chusky\u81ea\u52a8\u683c\u5f0f\u5316\u4ee3\u7801\u3010React * Firebase\u4e2a\u4eba\u5f00\u53d1\u7b2c\u4e8c\u90e8\u5206\u3011\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/f044a4b7fa4ee2701702942002419ca6\",\"name\":\"\u96c5, \u609f\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e71a913e914f1aad1efc391f92084294bac54bc782acd289638580134cf667a6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e71a913e914f1aad1efc391f92084294bac54bc782acd289638580134cf667a6?s=96&d=mm&r=g\",\"caption\":\"\u96c5, \u609f\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/yawu\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8prettier%e5%92%8chusky%e8%87%aa%e5%8a%a8%e6%a0%bc%e5%bc%8f%e5%8c%96%e4%bb%a3%e7%a0%81%e3%80%90react-firebase%e4%b8%aa%e4%ba%ba%e5%bc%80%e5%8f%91%e7%ac%ac%e4%ba%8c%e9%83%a8%e5%88%86\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u4f7f\u7528prettier\u548chusky\u81ea\u52a8\u683c\u5f0f\u5316\u4ee3\u7801\u3010React * Firebase\u4e2a\u4eba\u5f00\u53d1\u7b2c\u4e8c\u90e8\u5206\u3011 - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528prettier\u548chusky\u81ea\u52a8\u683c\u5f0f\u5316\u4ee3\u7801\u3010react-firebase\u4e2a\u4eba\u5f00\u53d1\u7b2c\u4e8c\u90e8\u5206\/","og_locale":"zh_CN","og_type":"article","og_title":"\u4f7f\u7528prettier\u548chusky\u81ea\u52a8\u683c\u5f0f\u5316\u4ee3\u7801\u3010React * Firebase\u4e2a\u4eba\u5f00\u53d1\u7b2c\u4e8c\u90e8\u5206\u3011","og_description":"\u4e0a\u4e00\u7bc7\u6587\u7ae0\u5728\u8fd9\u91cc\u3002 \u6211\u662fucho456\u3002\u5728\u7b2c2\u90e8\u5206\u4e2d\uff0c\u6211\u60f3\u8981\u5728\u4e0a\u6b21\u542f\u52a8\u7684React\u5e94\u7528\u4e2d\u4f7f\u7528prettier\u548c […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528prettier\u548chusky\u81ea\u52a8\u683c\u5f0f\u5316\u4ee3\u7801\u3010react-firebase\u4e2a\u4eba\u5f00\u53d1\u7b2c\u4e8c\u90e8\u5206\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-07-23T08:59:38+00:00","article_modified_time":"2024-04-29T06:07:13+00:00","author":"\u96c5, \u609f","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u96c5, \u609f","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"2 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8prettier%e5%92%8chusky%e8%87%aa%e5%8a%a8%e6%a0%bc%e5%bc%8f%e5%8c%96%e4%bb%a3%e7%a0%81%e3%80%90react-firebase%e4%b8%aa%e4%ba%ba%e5%bc%80%e5%8f%91%e7%ac%ac%e4%ba%8c%e9%83%a8%e5%88%86\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8prettier%e5%92%8chusky%e8%87%aa%e5%8a%a8%e6%a0%bc%e5%bc%8f%e5%8c%96%e4%bb%a3%e7%a0%81%e3%80%90react-firebase%e4%b8%aa%e4%ba%ba%e5%bc%80%e5%8f%91%e7%ac%ac%e4%ba%8c%e9%83%a8%e5%88%86\/","name":"\u4f7f\u7528prettier\u548chusky\u81ea\u52a8\u683c\u5f0f\u5316\u4ee3\u7801\u3010React * Firebase\u4e2a\u4eba\u5f00\u53d1\u7b2c\u4e8c\u90e8\u5206\u3011 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-07-23T08:59:38+00:00","dateModified":"2024-04-29T06:07:13+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/f044a4b7fa4ee2701702942002419ca6"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8prettier%e5%92%8chusky%e8%87%aa%e5%8a%a8%e6%a0%bc%e5%bc%8f%e5%8c%96%e4%bb%a3%e7%a0%81%e3%80%90react-firebase%e4%b8%aa%e4%ba%ba%e5%bc%80%e5%8f%91%e7%ac%ac%e4%ba%8c%e9%83%a8%e5%88%86\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8prettier%e5%92%8chusky%e8%87%aa%e5%8a%a8%e6%a0%bc%e5%bc%8f%e5%8c%96%e4%bb%a3%e7%a0%81%e3%80%90react-firebase%e4%b8%aa%e4%ba%ba%e5%bc%80%e5%8f%91%e7%ac%ac%e4%ba%8c%e9%83%a8%e5%88%86\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8prettier%e5%92%8chusky%e8%87%aa%e5%8a%a8%e6%a0%bc%e5%bc%8f%e5%8c%96%e4%bb%a3%e7%a0%81%e3%80%90react-firebase%e4%b8%aa%e4%ba%ba%e5%bc%80%e5%8f%91%e7%ac%ac%e4%ba%8c%e9%83%a8%e5%88%86\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u4f7f\u7528prettier\u548chusky\u81ea\u52a8\u683c\u5f0f\u5316\u4ee3\u7801\u3010React * Firebase\u4e2a\u4eba\u5f00\u53d1\u7b2c\u4e8c\u90e8\u5206\u3011"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/f044a4b7fa4ee2701702942002419ca6","name":"\u96c5, \u609f","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e71a913e914f1aad1efc391f92084294bac54bc782acd289638580134cf667a6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e71a913e914f1aad1efc391f92084294bac54bc782acd289638580134cf667a6?s=96&d=mm&r=g","caption":"\u96c5, \u609f"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/yawu\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8prettier%e5%92%8chusky%e8%87%aa%e5%8a%a8%e6%a0%bc%e5%bc%8f%e5%8c%96%e4%bb%a3%e7%a0%81%e3%80%90react-firebase%e4%b8%aa%e4%ba%ba%e5%bc%80%e5%8f%91%e7%ac%ac%e4%ba%8c%e9%83%a8%e5%88%86\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38242","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=38242"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38242\/revisions"}],"predecessor-version":[{"id":85727,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38242\/revisions\/85727"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=38242"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=38242"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=38242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}