create-react-app整合Prettier

辛成同學發表於2018-07-18
ReactAPP

腳手架帶來的便捷

進入前端工作也有一些時間了，我們的前端開發也從必須經過千千萬萬的配置到執行某某一切就可以開始工作了。

我想每個人接觸到create-react-app的時候都是驚訝的，原來開始一個應用可以這麼簡單。

你可以完全不用理會webpack和babel的安裝和配置

你只需要專注於react和應用本身

問題

雖然creact-react-app內建了eslint，但是這個對於我們編碼已經足夠了麼？

我曾經寫過好幾頁的wiki，上面寫滿了各種編碼規範，甚至常見的情況似乎是通過會議以提出公司編碼標準，但是收效微乎其微，團隊產生的程式碼還是具有強烈的個人特色。如果你發現了這個問題，我們必須通過工具來約束人。

宣告

這不是一篇create-react-app和prettier的入門教程，如需相關內容，請自行查詢。

Periiter官網

1. 編輯器

因為我自己用的就是VS code，這裡以它為例，其他編輯器可以找到相關的解決方案，安裝相關擴充套件：

Eslint

Prittier

2. 安裝依賴

需要安裝 prettier package和ESLint Prettier外掛。這個外掛是當程式碼不符合prettier的規則時會通過eslint報錯，在編輯器上會出現紅色的小波浪線。

yarn add  prettier
yarn add  eslint-plugin-prettier
複製程式碼

3. 建立eslint配置檔案，很簡單

在根目錄下建立.eslintrc檔案，內容如下：

{
  "extends": "react-app",
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}
複製程式碼

你如果需要自定義Prettier，建立prettier.config.js，我的配置如下：

module.exports = {
  printWidth: 100,
  singleQuote: true,
  trailingComma: 'all',
  bracketSpacing: true,
  jsxBracketSameLine: false,
  parser: 'babylon',
  semi: true,
};

複製程式碼

總結

可配置的自動程式碼格式化可以節省很多開發時間，對程式碼的後期維護更有幫助，而且這個過程確實很簡單。個人覺得能用工具完成的任務比用文字規範會更好，但是這一套不一定是必需的或者是最好的，如果你發現這個不適合你，你可以自己找一個適合專案或者開發環境的，歡迎留言。

個人愛好：前端自動化，工程化。

注：這一篇不是入門級別的，但是隻要稍微去看一下prettier的文件，應該很快就能上手的。

相關文章