您好,登錄后才能下訂單哦!
本文以prettier工具為例,為大家分析prettier的概念、prettier的作用以及prettier的自定義配置,閱讀完整文相信大家對(duì)prettier有了一定的認(rèn)識(shí)。
什么是Prettier
Prettier是一個(gè)代碼格式化工具,它可以支持JS/JSX/TS/Flow/JSON/CSS/LESS等文件格式。
為什么要用Prettier
用來(lái)替代lint中的一些場(chǎng)景,比如說(shuō)分號(hào)/tab縮進(jìn)/空格/引號(hào),這些在lint工具檢查出問(wèn)題之后還需要手動(dòng)修改,而通常這樣的錯(cuò)誤都是空格或者符號(hào)之類的,這樣相對(duì)來(lái)說(shuō)不太優(yōu)雅,利用格式化工具自動(dòng)生成省時(shí)省力。
如何自定義配置
Prettier提供了一套默認(rèn)的配置,那么如何修改配置項(xiàng)符合我們自己的代碼規(guī)范呢,有三種方法可以做到:
(1).prettierrc 文件
(2)prettier.config.js 文件
(3)package.json 中配置prettier屬性
Prettier會(huì)檢查配置文件并自動(dòng)讀取文件中的配置,我們只需要選一種方法配置就好了,我現(xiàn)在選的是第二種。
有種感覺跟lint工具很像的感覺,是不是?
可配置的屬性
分享一下我的配置文件
module.exports = {`
`// tab縮進(jìn)大小,默認(rèn)為2`
`tabWidth: 2,`
`// 使用tab縮進(jìn),默認(rèn)false`
`useTabs: true,`
`// 使用分號(hào), 默認(rèn)true`
`semi: false,`
`// 使用單引號(hào), 默認(rèn)false(在jsx中配置無(wú)效, 默認(rèn)都是雙引號(hào))`
`singleQuote: true,`
`// 行尾逗號(hào),默認(rèn)none,可選 none|es5|all`
`// es5 包括es5中的數(shù)組、對(duì)象`
`// all 包括函數(shù)對(duì)象等所有可選`
`TrailingCooma:` `"none"``,`
`// 對(duì)象中的空格 默認(rèn)true`
`// true: { foo: bar }`
`// false: {foo: bar}`
`bracketSpacing: true,`
`// JSX標(biāo)簽閉合位置 默認(rèn)false`
`// false: <div`
`// className=""`
`// style={{}}`
`// >`
`// true: <div`
`// className=""`
`// style={{}} >`
`jsxBracketSameLine:false,`
`// 箭頭函數(shù)參數(shù)括號(hào) 默認(rèn)avoid 可選 avoid| always`
`// avoid 能省略括號(hào)的時(shí)候就省略 例如x => x`
`// always 總是有括號(hào)`
`arrowParens:` `'always'``,`
`}`
關(guān)于prettier就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。