#什麼是Prettier
Prettier是一個程式碼格式化工具,它可以支援JS/JSX/TS/Flow/JSON/CSS/LESS等檔案格式。
為什麼要用Prettier
來取代lint中的一些場景,比如說分號/tab縮排/空格/引號,這些在lint工具檢查出問題之後還需要手動修改,而通常這樣的錯誤都是空格或符號之類的,這樣相對來說不太優雅,利用格式化工具自動生成省時省力。
如何自訂配置
Prettier提供了一套預設的配置,那麼如何修改配置項符合我們自己的程式碼規格呢,有三種方法可以做到:
(1).prettierrc 檔案
(2)prettier.config.js 檔案
(3)package.json 中設定prettier屬性
Prettier會檢查設定檔並自動讀取檔案中的配置,我們只需要選一種方法配置就好了,我現在選的是第二種。
有種感覺跟lint工具很像的感覺,是不是?
可設定的屬性
分享我的設定檔
module.exports = { // tab缩进大小,默认为2 tabWidth: 2, // 使用tab缩进,默认false useTabs: true, // 使用分号, 默认true semi: false, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号) singleQuote: true, // 行尾逗号,默认none,可选 none|es5|all // es5 包括es5中的数组、对象 // all 包括函数对象等所有可选 TrailingCooma: "none", // 对象中的空格 默认true // true: { foo: bar } // false: {foo: bar} bracketSpacing: true, // JSX标签闭合位置 默认false // false: <div // className="" // style={{}} // > // true: <div // className="" // style={{}} > jsxBracketSameLine:false, // 箭头函数参数括号 默认avoid 可选 avoid| always // avoid 能省略括号的时候就省略 例如x => x // always 总是有括号 arrowParens: 'always', }
更多常見問題,敬請上PHP中文網。
以上是prettier怎麼設定的詳細內容。更多資訊請關注PHP中文網其他相關文章!