[week 21] 補充:Prettier 套件 | VS Code 自動排版 設定
[week21]補充:Prettier套件-自動整理程式碼格式-HackMD######tags:`Front-End`#[week21]補充:Prettier套件-自動整理程式碼格式##Prettier:Codeformatter>相關安裝套件與如何操作可參考[官方文件](https://create-react-app.dev/docs/setting-up-your-editor/)。Prettier是一個Codeformatter,能夠將JavaScript,TypeScript,CSS程式碼格式化,進而統一程式碼風格(CodingStyle)。###安裝套件&設定檔為了進行程式碼格式化,共需要安裝下列三個套件:-`husky`:makesitpossibletousegithooksasiftheyarenpmscripts.-`lint-stage...
[week 21] 補充:Prettier 套件 - 自動整理程式碼格式 - HackMD###### tags: `Front-End` # [week 21] 補充:Prettier 套件 - 自動整理程式碼格式 ## Prettier:Code formatter > 相關安裝套件與如何操作可參考[官方文件](https://create-react-app.dev/docs/setting-up-your-editor/)。 Prettier 是一個 Code formatter,能夠將 JavaScript, TypeScript, CSS 程式碼格式化,進而統一程式碼風格(Coding Style)。 ### 安裝套件 & 設定檔 為了進行程式碼格式化,共需要安裝下列三個套件: - `husky`: makes it possible to use githooks as if they are npm scripts. - `lint-staged`: allows us to run scripts on staged files in git. See this blog post about lint-staged to learn more about it. - `prettier`: is the JavaScript formatter we will run before commits. 並在 package.json 檔案中加上套件相關資訊: ```json= + "husky": { + "hooks": { + "pre-commit": "lint-staged" + } + }, + "lint-staged": { + "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [ + "prettier --write" + ] + }, ``` 簡單來說,就是在 pre-commit 之前,透過 husky -> lint-staged -> prettier 這個傳遞過程,對 commit 的檔案做 prettier。 安裝完成後,在 commit 之前,pre...