我爲何推薦Prettier來統一代碼風格

時間 2020-05-28

標籤爲何推薦 prettier 統一代碼風格简体版

原文原文鏈接

譯者按: 關於代碼風格，不一樣的人有不一樣的偏好，其實並無什麼絕對的對錯。可是，有2條原則應該是對的：少數服從多數；用工具統一風格。javascript

原文: Why robots should format our code for us
譯者: Fundebug

爲了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原做者全部，翻譯僅用於學習。html

我曾經覺得，程序員有本身獨特的代碼風格挺好的。由於，一個成熟的程序員應該清楚，好的代碼應該是怎樣的。前端

個人大學教授告訴我，他的學生在用個人代碼，由於個人代碼風格不同。我想了一下，也許是由於個人代碼至少是有風格的，而其餘人的代碼一團糟。java

一些示例

示例1：

讀了The Programmers’ Stone以後，我把大括號這樣寫：git

if (food === 'pizza')
{
 alert('Pizza ;-)'); 
}
else
{ 
 alert('Not pizza ;-(');
}

可是，我意識到在前端社區裏，也許只有我一我的這樣寫的。而其餘人都是這樣寫的：程序員

if (food === 'pizza') {
 alert('Pizza ;-)'); 
} else {
 alert('Not pizza ;-(');
}

或者這樣：github

if (food === 'pizza') {
 alert('Pizza ;-)'); 
}
else { 
 alert('Not pizza ;-(');
}

因而，我改變了風格，採用了最後一種寫法。ide

示例2

將多個方法連接起來時，我喜歡這樣寫：工具

function foo(items) {
 return items
 .filter(item => item.checked)
 .map(item => item.value)
 ;
}

示例3

讀了Why you should enforce Dangling Commas for Multiline Statements，我意識到了trailing commas寫法更加易於重構：學習

const food = [
 'pizza',
 'burger',
 'pasta',
]

可是，這種寫法很是少見。我審查過的代碼中，沒人這樣寫。因而，我只能放棄這種寫法，向現實世界低頭。

示例4

我還有一個不合羣的習慣。在行尾寫代碼註釋以前，我習慣敲2個空格：

const volume = 200; // ml

我以爲這樣寫好看些。可是，這會致使代碼不一致，由於其餘人只敲一個空格。

JavaScript開發者是怎樣作的

很遺憾，JavaScript沒有官方的代碼風格。業界有一些流行的代碼風格，好比Airbnb和Standard。使用它們的話，團隊成員之間的代碼會更易讀。

你也可使用ESLint 來統一風格。可是它並不能保證代碼100%一致。好比，ESLint的Airbnb配置，只能統一示例1的代碼風格，而不能統一後面二者。

JavaScript開發者應該怎麼作？

有一些語言有很是嚴格的代碼風格，而且有工具能夠用於統一風格。所以，開發者不須要浪費時間去爭論代碼風格的優劣。例如，Reason語言的Refmt，和Rust語言的Rustfmt。

如今，JavaScript終於有了一個解決方案。有一個新工具，叫作Prettier，它運用自身的規則將你的的代碼從新格式化。不管你以前的代碼風格是怎樣。

咱們不妨試用一下Prettier。

輸入代碼是這樣的：

if (food === 'pizza')
{
 alert('Pizza ;-)'); 
}
else
{ 
 alert('Not pizza ;-(');
}

function foo(items) {
 return items
 .filter(item => item.checked)
 .map(item => item.value)
 ;
}

const food = [
 'pizza',
 'burger',
 'pasta',
]

Prettier處理以後的代碼是這樣的：

if (food === "pizza") {
 alert("Pizza ;-)");
} else {
 alert("Not pizza ;-(");
}

function foo(items) {
 return items.filter(item => item.checked).map(item => item.value);
}

const food = ["pizza", "burger", "pasta"];

也許，你並不喜歡這種風格。好比，我不喜歡else放在大括號後面，也不喜歡把鏈式方法所有寫在同一行。可是，我發現使用Prettier有不少益處：

幾乎不須要作決定，由於 Prettier的配置選項不多。
團隊成員不須要爲規則去爭論。
開源代碼開發者不須要去學習項目的代碼風格。
不須要去修復ESLint報告的風格問題。
保存文件的時候能夠自動統一風格。

結論

Prettier已經被一些很是流行的項目好比React和Babel採用了。對於我本身的項目，我已經開始從本身的個性化風格所有轉爲Prettier風格。相比於Airbnb代碼風格，我更推薦Prettier。

剛開始，我會以爲Prettier風格很是差。可是，當我發現本身須要手動去調整代碼風格時，我意識到Prettier真的很是好用。

Prettier能夠在保存文件的時候能夠自動統一風格：

感興趣的話，能夠按照這個教程配置Prettier。

版權聲明:
轉載時請註明做者Fundebug以及本文地址：
https://blog.fundebug.com/2017/10/23/format-code-use-Prettier/

相關標籤/搜索

迅爲推薦

推薦系統