create-react-app集成Prettier

腳手架帶來的便捷

進入前端工做也有一些時間了，咱們的前端開發也從必須通過千千萬萬的配置到執行某某一切就能夠開始工做了。

我想每一個人接觸到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的文檔，應該很快就能上手的。