prettier 把我程式碼弄的很醜

混子的日常發表於2021-10-31

開篇一個小故事：

近日組內多人反饋 eslint fix 後的程式碼很醜。我說我看看，然而 2 個月過去了，我都沒有搞定。。。（老透明，想刷存在感。）

又暴露了我的無知：

  1. 是 eslint 修的，還是 prettier 修的
  2. 這是什麼奇怪的風格

本質： 我不懂 eslint， 也不懂 prettier，更甚我tmd還不懂 html 了，我也不懂英語

空格敏感

第二個圖片的程式碼為啥那樣了? 我們首先回顧下 html 空格問題

<span>這是一行非常、非常長的文字~，我就問你。你敢輕易換行嗎</span>

html標籤很容易出現莫名空格問題 。如何解決？

  • 優雅一點父元素font-size: 0，子元素font-size: 12.345px
  • 老司機文字頂頭寫，尾標籤也緊緊的跟隨。

知道了空格問題，我大概懂了。prettier 應該是不想背空格的鍋，所以把程式碼搞成那樣。

感興趣的同志，可以看看
eslint-plugin-prettier修復後換行的格式很亂

prettier 介紹

一個挺那個的（opinionated）程式碼格式化的工具。提供很少的配置，輔助我們做程式碼格式化。
試著下執行 npx prettier --write .

prettier 配置

.prettierrc.js

module.exports = {
  // 單行程式碼字元數限制
  printWidth: 80,   
  // tab鍵縮排相當於2個空格
  tabWidth: 2,  
  // 行縮排使用空格
  useTabs: false,    
  // 語句的末尾不加分號
  semi: false,
  // 使用單引號
  singleQuote: true,    
  //僅僅當必須的時候才會加上雙引號
  quoteProps: 'as-needed',    
  // 在 JSX 中使用單引號
  jsxSingleQuote: true,   
  // 尾逗號
  trailingComma: 'all', 
  //在括號和物件的文字之間加上一個空格
  bracketSpacing: true,              
  // 當箭頭函式中只有一個引數的時候忽略括弧   
  arrowParens: 'avoid', 
  // vue template 中的結束標籤結尾尖括號掉到了下一行
  htmlWhitespaceSensitivity: 'ignore', 
  // .vue 檔案，不縮排 <script> 和 <style> 裡的內容
  vueIndentScriptAndStyle: false,    
};

htmlWhitespaceSensitivity: 'ignore'這個配置就是我遇到問題的解決方案。

prettier 和 eslint

現在常規的配置方案：prettier 負責修程式碼格式，eslint 負責程式碼潛在質量問題。

官網說 prettier 是 opinionated 的。因此它想處理的工作，別人就不能插手了，我們必須將 eslint 的格式規則禁用掉。不禁用？那就死迴圈。

插一個問題： 如何執行 prettier 和 eslint 大家都知道吧？ 我不太清楚，會查文件就可。

基於上述原因在專案裡面我們還要按兩個依賴：eslint-config-prettier、eslint-plugin-prettier

eslint-config-prettier: 負責關掉 eslint 所有格式相關的規則

eslint-plugin-prettier：將 prettier 整合進 eslint，作為 eslint 一條規則來執行prettier。

看到這兒，eslint(prettier/prettier)啥意思知道了吧

.eslintrc.json

{
  "extends": [
    ....
    // eslint-config-prettier
    "prettier" 
  ]
  //eslint-plugin-prettier
  "plugins": ["prettier"], 
  "rules": {
    "prettier/prettier": "error",
    ....
  }
}

以上 prettier 的基礎我就算掌握了

小Q

eslint 的擴充套件和外掛有啥區別? 歡迎留言討論

我很菜，很焦慮，但我還沒有放棄；給個 Offer， 我立馬走

相關文章