Prettier document you need to know【1】 -- 概要內容

MadPecker 發布于2019-08-26 11:55 / 2916人閱讀

摘要：都有個規則范疇格式化規則例減輕了對這整個類別規則的需求以一致的方式從頭開始輸出整個程序，所以程序員不可能再犯錯誤了。代碼質量規則例不針對與此項。在這方面還是有無可替代的功勞譯者建議配合使用來管理維護更好的代碼輸出。

以下內容為個人參照Prettier官網部分文檔翻譯+理解，用以羅列部分you need to know，文檔內容經供參考，詳細內容參考官網

安裝

（由于node.js的火熱和自帶npm，所以只放置npm下載方式）

//using npm to download prettier

npm install --save-dev --save-exact prettier
# --save-exact指代在package.json文件指定安裝模塊的確切版本。
# 或 全局環境安裝
npm install --global prettier

Prettier是什么

Prettier是選擇式的代碼格式化工具，支持：

JS 包括ES2017

JSX

CSS,LESS,SASS

...

它移除了所有原始格式并且保證所有的輸出代碼符合一種一致的風格
Prettier獲取你的代碼并從頭重新輸出通過計算代碼行長度
例如，以下

foo(arg1, arg2, arg3, arg4);

它合適一行顯示，所有保持了原樣。然而我們可能遇到這種場景

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

我們可能會因為它過長而手動或使用其他工具將它分解在多行顯示，但是Prettier會為你做這樣的艱苦工作

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

更多細節參照官網

為什么使用Prettier

這里不再翻譯文檔，采用自身體會闡述：

曾幾何時你是否遭遇過在前端代碼中大家使用的Javascript等格式不同導致源文件在沒有新feature加入下卻被修改并提交至遠端。在當你去查看某一文件的history時發現文件有相應的修改并伴有commit comment，你疑惑的去跟蹤修改記錄，后來卻發現僅僅是原文件格式被他人覆蓋提交。

還有更多好處被Prettier寫下，參考官文。

Prettier vs. Linters

Linters都有2個規則范疇
格式化規則： 例： max-len, no-mixed-spaces-and-tabs, keyword-spacing, comma-style...
Prettier減輕了對這整個類別規則的需求！Prettier以一致的方式從頭開始輸出整個程序，所以程序員不可能再犯錯誤了。

代碼質量規則 例： no-unused-vars, no-extra-bind, no-implicit-globals, prefer-promise-reject-errors...
Prettier 不針對與此項。Linters在這方面還是有無可替代的功勞

譯者建議 ：配合使用 Jshint + Prettier 來管理維護更好的代碼輸出。

最后

如有任何問題和建議歡迎發送至郵箱討論：
翻譯不易，若您覺得對您有幫助，歡迎打賞

微信：

支付寶：

GPU云服務器云服務器深度學習內容概要 code-1-usev-to-see-i Prettier Know

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107812.html

工程搭建---代碼風格統一

摘要：為此我們需要安裝這個是用于提交代碼的鉤子函數安裝完之后，我們就需要在增加運行鉤子函數。等鉤子函數這樣就簡單的成功對代碼進行效驗了，當然這邊更進一步的可以使用這個可以將取得所有被提交的文件依次執行寫好的任務。一個項目是會有多個成員來開發的，因此統一開發規范是很有必要的，不然每個人都有自己的風格，同步之后代碼都會報錯。我這邊是用Vscode編譯器的。首先用vue-cli3.0創建一個工...

levius 2019-08-23 16:05 評論0 收藏0
使用REACT VR構建web虛擬現實

Building virtual reality experiences on the web with React VR Over the past year, virtual reality has made major strides toward becoming the next computing platform. With Oculus Rift, consumer-grade h...

anquan 2019-08-20 15:55 評論0 收藏0
You need to know curry

Functions are first-class citizen Functions are first-class citizen in JavaScript, as the same as other types(e.g. number, array, object). They can be used as arguments, as well as return value from o...

BigNerdCoding 2019-08-22 15:23 評論0 收藏0
【譯】State and Lifecycle (State和生命周期)

摘要：結果如下打開試試下一步，我們將把組件功能自己設置定時器并且能每秒更新。這是一個設置定時器的好地方注意我們是怎么保存定時器的。我們將在這個生命周期的函數方法中卸載掉定時器最后，我們會每一秒跑方法。下面是react官方文檔的個人翻譯，如有翻譯錯誤，請多多指出原文地址：https://facebook.github.io/re... Consider the ticking clock e...

dadong 2019-08-20 14:46 評論0 收藏0