成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

我為什么推薦Prettier來(lái)統(tǒng)一代碼風(fēng)格

YJNldm / 3516人閱讀

摘要：但是，有條原則應(yīng)該是對(duì)的少數(shù)服從多數(shù)用工具統(tǒng)一風(fēng)格。我曾經(jīng)以為，程序員有自己獨(dú)特的代碼風(fēng)格挺好的。業(yè)界有一些流行的代碼風(fēng)格，比如和。你也可以使用來(lái)統(tǒng)一風(fēng)格。比如，的配置，只能統(tǒng)一示例的代碼風(fēng)格，而不能統(tǒng)一后面兩者。相比于代碼風(fēng)格，我更推薦。

譯者按: 關(guān)于代碼風(fēng)格，不同的人有不同的偏好，其實(shí)并沒(méi)有什么絕對(duì)的對(duì)錯(cuò)。但是，有 2 條原則應(yīng)該是對(duì)的： 少數(shù)服從多數(shù)；用工具統(tǒng)一風(fēng)格。

原文: Why robots should format our code for us

譯者: Fundebug

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權(quán)歸原作者所有，翻譯僅用于學(xué)習(xí)。

我曾經(jīng)以為，程序員有自己獨(dú)特的代碼風(fēng)格挺好的。因?yàn)椋粋€(gè)成熟的程序員應(yīng)該清楚，好的代碼應(yīng)該是怎樣的。

我的大學(xué)教授告訴我，他的學(xué)生在用我的代碼，因?yàn)槲业拇a風(fēng)格不一樣。我想了一下，也許是因?yàn)槲业拇a至少是有風(fēng)格的，而其他人的代碼一團(tuán)糟。

一些示例 示例 1：

讀了The Programmers’ Stone之后，我把大括號(hào)這樣寫：

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

但是，我意識(shí)到在前端社區(qū)里，也許只有我一個(gè)人這樣寫的。而其他人都是這樣寫的：

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

或者這樣：

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

于是，我改變了風(fēng)格，采用了最后一種寫法。

示例 2

將多個(gè)方法鏈接起來(lái)時(shí)，我喜歡這樣寫：

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

讀了Why you should enforce Dangling Commas for Multiline Statements，我意識(shí)到了trailing commas寫法更加易于重構(gòu)：

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

但是，這種寫法非常少見(jiàn)。我審查過(guò)的代碼中，沒(méi)人這樣寫。于是，我只能放棄這種寫法，向現(xiàn)實(shí)世界低頭。

示例 4

我還有一個(gè)不合群的習(xí)慣。在行尾寫代碼注釋之前，我習(xí)慣敲 2 個(gè)空格：

const volume = 200;  // ml

我覺(jué)得這樣寫好看些。但是，這會(huì)導(dǎo)致代碼不一致，因?yàn)槠渌酥磺靡粋€(gè)空格。

JavaScript 開(kāi)發(fā)者是怎樣做的

很遺憾，JavaScript 沒(méi)有官方的代碼風(fēng)格。業(yè)界有一些流行的代碼風(fēng)格，比如Airbnb和Standard。使用它們的話，團(tuán)隊(duì)成員之間的代碼會(huì)更易讀。

你也可以使用ESLint 來(lái)統(tǒng)一風(fēng)格。但是它并不能保證代碼 100%一致。比如，ESLint 的 Airbnb 配置，只能統(tǒng)一示例 1的代碼風(fēng)格，而不能統(tǒng)一后面兩者。

JavaScript 開(kāi)發(fā)者應(yīng)該怎么做？

有一些語(yǔ)言有非常嚴(yán)格的代碼風(fēng)格，并且有工具可以用于統(tǒng)一風(fēng)格。因此，開(kāi)發(fā)者不需要浪費(fèi)時(shí)間去爭(zhēng)論代碼風(fēng)格的優(yōu)劣。例如，Reason 語(yǔ)言的Refmt，和 Rust 語(yǔ)言的Rustfmt。

現(xiàn)在，JavaScript 終于有了一個(gè)解決方案。有一個(gè)新工具，叫做Prettier，它運(yùn)用自身的規(guī)則將你的的代碼重新格式化。無(wú)論你之前的代碼風(fēng)格是怎樣。

我們不妨試用一下 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"];

也許，你并不喜歡這種風(fēng)格。比如，我不喜歡 else 放在大括號(hào)后面，也不喜歡把鏈?zhǔn)椒椒ㄈ繉懺谕恍?。但是，我發(fā)現(xiàn)使用Prettier有很多益處：

幾乎不需要做決定，因?yàn)??Prettier 的配置選項(xiàng)很少。

團(tuán)隊(duì)成員不需要為規(guī)則去爭(zhēng)論。

開(kāi)源代碼開(kāi)發(fā)者不需要去學(xué)習(xí)項(xiàng)目的代碼風(fēng)格。

不需要去修復(fù) ESLint 報(bào)告的風(fēng)格問(wèn)題。

保存文件的時(shí)候可以自動(dòng)統(tǒng)一風(fēng)格。

結(jié)論

Prettier 已經(jīng)被一些非常流行的項(xiàng)目比如 React 和 Babel 采用了。對(duì)于我自己的項(xiàng)目，我已經(jīng)開(kāi)始從自己的個(gè)性化風(fēng)格全部轉(zhuǎn)為 Prettier 風(fēng)格。相比于 Airbnb 代碼風(fēng)格，我更推薦 Prettier。

剛開(kāi)始，我會(huì)覺(jué)得 Prettier 風(fēng)格非常差。但是，當(dāng)我發(fā)現(xiàn)自己需要手動(dòng)去調(diào)整代碼風(fēng)格時(shí)，我意識(shí)到 Prettier 真的非常好用。

Prettier 可以在保存文件的時(shí)候可以自動(dòng)統(tǒng)一風(fēng)格：

感興趣的話，可以按照這個(gè)教程配置 Prettier。

關(guān)于Fundebug

Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java線上應(yīng)用實(shí)時(shí)BUG監(jiān)控。 自從2016年雙十一正式上線，F(xiàn)undebug累計(jì)處理了10億+錯(cuò)誤事件，付費(fèi)客戶有Google、360、金山軟件、百姓網(wǎng)等眾多品牌企業(yè)。歡迎大家免費(fèi)試用！

版權(quán)聲明

轉(zhuǎn)載時(shí)請(qǐng)注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/10/23/format-code-use-Prettier/

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102775.html

相關(guān)文章

  • 高效開(kāi)發(fā)者是如何個(gè)性化VS Code插件與配置的？

    摘要：由于本身不能個(gè)性化配置，有時(shí)可能會(huì)引起不適，但是至少保證團(tuán)隊(duì)成員可以輕易統(tǒng)一代碼風(fēng)格。就是將多于一個(gè)字母的合成一個(gè)字形。自從年雙十一正式上線，累計(jì)處理了億錯(cuò)誤事件，得到了金山軟件等眾多知名用戶的認(rèn)可。 譯者按： IDE是生產(chǎn)力的保證！ 原文：Visual Studio Code Settings and Extensions for Faster JavaScript Develop...

    shenhualong 評(píng)論0 收藏0

  • 前端開(kāi)發(fā)團(tuán)隊(duì)的工具鏈

    摘要：官網(wǎng)地址推薦指數(shù)顆星推薦理由自動(dòng)化部署和集成部署的好工具，操作簡(jiǎn)單，顯示友好，具備多種插件，應(yīng)有盡有，支持多類型語(yǔ)言的項(xiàng)目集成和部署。官網(wǎng)地址如果你有其他好用的工具，不妨也分享一下原博客鏈接前端開(kāi)發(fā)團(tuán)隊(duì)的工具鏈 匯集前端開(kāi)發(fā)團(tuán)隊(duì)中經(jīng)常使用的好工具，分享給大家！ 注：都是開(kāi)源工具 showImg(https://segmentfault.com/img/remote/1460000019...

    xcold 評(píng)論0 收藏0

  • 更新版-梳理前端開(kāi)發(fā)使用eslint和prettier來(lái)檢查和格式化代碼問(wèn)題

    摘要：整個(gè)代碼檢查和格式化流程應(yīng)該規(guī)范為如下步驟使用并且嘗試自動(dòng)修復(fù)所有問(wèn)題有提示，可以進(jìn)行修復(fù)，按照配置文件來(lái)進(jìn)行修復(fù)。參考文檔如何花分鐘解決產(chǎn)生的各種錯(cuò)誤的記憶現(xiàn)場(chǎng)本文轉(zhuǎn)載自我的更新版梳理前端開(kāi)發(fā)使用和來(lái)檢查和格式化代碼問(wèn)題 更新版，之前的版本可以看這里：梳理前端開(kāi)發(fā)使用eslint和prettier來(lái)檢查和格式化代碼問(wèn)題 一、問(wèn)題痛點(diǎn) 在團(tuán)隊(duì)的項(xiàng)目開(kāi)發(fā)過(guò)程中，代碼維護(hù)所占的時(shí)間比重...

    GitChat 評(píng)論0 收藏0

  • 使用ESLint+Prettier來(lái)統(tǒng)一前端代碼風(fēng)格

    摘要：但是關(guān)于代碼風(fēng)格，我們很難區(qū)分誰(shuí)對(duì)誰(shuí)錯(cuò)，不同的人有不同偏好，唯有強(qiáng)制要求才能規(guī)避爭(zhēng)論。所以，團(tuán)隊(duì)關(guān)于代碼風(fēng)格必須遵循兩個(gè)基本原則少數(shù)服從多數(shù)用工具統(tǒng)一風(fēng)格。本文將介紹，如何使用來(lái)統(tǒng)一我們的前端代碼風(fēng)格。 加分號(hào)還是不加分號(hào)？tab還是空格？你還在為代碼風(fēng)格與同事?tīng)?zhēng)論得面紅耳赤嗎？ 正文之前，先看個(gè)段子放松一下： 去死吧！你這個(gè)異教徒！ 想起自己剛?cè)胄械臅r(shí)候，從svn上把代碼checko...

    Corwien 評(píng)論0 收藏0

  • Prettier+VScode 治好你的代碼潔癖

    摘要：忍無(wú)可忍只能拔槍相見(jiàn)了。而只關(guān)心格式化文件最大長(zhǎng)度混合標(biāo)簽和空格引用樣式等?？梢?jiàn)，代碼格式統(tǒng)一的問(wèn)題，交給再合適不過(guò)了。和配合使用，風(fēng)味更佳。我的配置文件如下到此，安裝完畢，使用就可格式化代碼。兩者配合才能使項(xiàng)目代碼優(yōu)雅健壯 試想一個(gè)多人開(kāi)發(fā)的項(xiàng)目，每次同步代碼，看到各個(gè)風(fēng)格迥異，換行空格混亂，4格，2格縮進(jìn)交替上演的代碼文件，分分鐘逼死強(qiáng)迫癥啊。忍無(wú)可忍只能拔槍相見(jiàn)了~~。統(tǒng)一的代碼...

    qc1iu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<