prettier eslint
v16.3.0
使用prettier加上JavaScript的格式，然後是eslint --fix
eslint的fix功能非常出色，可以根據您的ESLINT配置自動使用大部分代碼。 prettier是一個更強大的自動格式化器。關於漂亮的好處之一是它的自以為是。不幸的是，它不夠自以為是，/或某些意見與我自己不同。因此，在格式化代碼之後，我開始遇到絨毛錯誤。
這是通過prettier格式化您的代碼，然後將其結果傳遞給eslint --fix 。這樣，您就可以獲得prettier優質格式化功能的好處，但也從eslint的配置功能中受益。
對於具有
.css的擴展為.less，.scss或.json的文件，僅由於eslint無法處理這些文件，因此該文件prettier。
該模塊是通過NPM分發的，該模塊與節點捆綁在一起，應作為您項目的devDependencies之一安裝：
npm install --save-dev prettier-eslint
const format = require ( 'prettier-eslint' ) ;
// notice, no semicolon in the original text
const sourceCode = 'const {foo} = bar' ;
const options = {
text : sourceCode ,
eslintConfig : {
parserOptions : {
ecmaVersion : 7
} ,
rules : {
semi : [ 'error' , 'never' ]
}
} ,
prettierOptions : {
bracketSpacing : true
} ,
fallbackPrettierOptions : {
singleQuote : false
}
} ;
const formatted = await format ( options ) ;
// notice no semicolon in the formatted text
formatted ; // const { foo } = bar格式的源代碼。
要格式化的文件的路徑可用於覆蓋eslintConfig （ESLINT將用於查找文件的相關配置）。
用於使用ESLINT格式化的配置。可以用filePath覆蓋。
通過prettier格式化的選項。如果沒有提供， prettier-eslint將嘗試根據eslintConfig （無論是通過filePath提供的還是派生的）來創建選項。您還可以提供一些選項，並通過您的ESLINT配置派生剩餘的選項。這對於諸如parser類的選項很有用。
注意：這些選項覆蓋ESLINT配置。如果僅在無法從ESLINT中推斷出規則的情況下使用後備選項，請參見下面的“ HalldbackPrettierOptions”。
如果prettier-eslint無法基於eslintConfig創建選項（無論是通過Filepath提供的還是通過filePath得出），則使用prettier格式化選項。這些選項僅在找不到相應的ESLINT規則的情況下使用，並且未在prettierOptions中手動定義更漂亮的選項。如果未給出後備， prettier-eslint將在此情況下僅使用默認的prettier值。
如果您願意的話prettier-eslint可以進行很多記錄。傳遞此操作以設置您要查看的日誌數。默認值為process.env.LOG_LEVEL || 'warn' 。
默認情況下， prettier-eslint將嘗試基於filePath找到相關的eslint （且更prettier ）模塊。如果找不到一個，那麼它將使用prettier-eslint在本地安裝的版本。如果您想指定要使用prettier-eslint使用eslint模塊的路徑，則可以使用eslintPath選項提供完整的路徑。
除了prettier模塊外，這基本上與eslintPath相同。
默認情況下， prettier-eslint將首先運行prettier ，然後是eslint --fix 。如果您想使用prettier ，但要覆蓋您不喜歡使用eslint --fix ，這真是太好了。
另一種方法是將不同的工具用於不同的問題。如果您提供了prettierLast: true ，它將運行eslint --fix ，然後prettier 。這使您可以使用eslint來尋找錯誤和/或不良實踐，並使用prettier代碼代碼樣式。
prettier-eslint只有在prettier或eslint失敗時才會傳播解析錯誤。除了傳播錯誤外，它還還將記錄一條特定的消息，以指示其在失敗時所做的事情。
注意： format不會在prettier或eslint中顯示有關損壞規則的任何消息。
const { analyze } = require ( "prettier-eslint" ) ;
const text = 'var x = 0;' ;
const result = await analyze ( {
text ,
eslintConfig : {
rules : { 'no-var' : 'error' }
}
} )
console . log ( result . messages ) ;在控制台上生產
[{
ruleId: 'no-var',
severity: 2,
message: 'Unexpected var, use let or const instead.',
line: 1,
column: 1,
nodeType: 'VariableDeclaration',
messageId: 'unexpectedVar',
endLine: 1,
endColumn: 11
}]
附加的導出analyze與format相同，只是它返回一個簡單的對象，其中具有屬性output ，使format將返回的確切messages ，以及賦予代碼eslint分析產生的消息描述數組（帶有上面顯示的結構）。如果您想執行格式，則可以使用analyze代替format ，但還可以捕獲eslint可能會注意到的任何錯誤。
代碼➡️Prettier➡️ESLINT-FIX➡️格式代碼
可以將eslintConfig和prettierOptions作為參數提供。如果未提供eslintConfig ，則prettier-eslint將根據fileName尋找它們（如果沒有提供fileName ，則使用process.cwd() ）。一旦prettier-eslint找到了eslintConfig ，就可以從eslintConfig推斷出上prettierOptions 。如果已經提供了一些prettierOptions ，那麼prettier-eslint只會推斷其餘選項。這種推斷發生在src/utils.js中。
有關此推斷的重要一件重要的事情是，它可能不支持您的特定ESLINT配置。因此，您需要檢查src/utils.js以查看如何為每個選項完成推理（引用什麼規則，等），並在支持您的配置時提出拉請請求。
默認值如果您禁用了所有相關的ESLINT規則（或完全通過/* eslint-disable */ ，那麼漂亮的選項將返回到prettier默認值：
{
printWidth : 80 ,
tabWidth : 2 ,
singleQuote : false ,
trailingComma : 'none' ,
bracketSpacing : true ,
semi : true ,
useTabs : false ,
// prettier-eslint doesn't currently support
// inferring these two (Pull Requests welcome):
parser : 'babylon' ,
bracketSameLine : false ,
} prettier-eslint可以使用很多伐木。調試時，您可以使用其中一個logLevel S來更好地了解正在發生的事情。如果您使用的是prettier-eslint-cli ，則可以使用--log-level trace ，如果您使用的是Atom插件，則可以打開開發人員工具並在控制台中輸入： process.env.LOG_LEVEL = 'trace' ，然後運行格式。您會看到一堆日誌，這些日誌可以幫助您確定問題是否prettier ， eslint --fix ， prettier-eslint如何滲透您的prettier選擇或其他任何其他因素。在提交問題之前，您將要求您執行此操作，所以請這樣做？
注意：執行此操作時，建議您僅在一個文件上運行此文件，因為有很多日誌:)
在使用// eslint-disable-line時，有時您可能會在該模塊處理代碼後會遇到絨毛錯誤。那是因為prettier改變了這一點：
// prettier-ignore
if ( x ) { // eslint-disable-line
}因此：
if ( x ) {
// eslint-disable-line
} eslint --fix不會將其更改。您可以注意到// eslint-disable-line已移至新線路。要解決此問題，您可以使用//eslint-disable-next-line而不是// eslint-disable-line這樣：
// eslint-disable-next-line
if ( x ) {
} prettiereslint我沒有知道。如果您知道其他解決方案，請隨時提交公關。
prettier-eslint-cli命令行接口prettier-atom原子插件（在設置中檢查“ ESLINT集成”複選框）vs-code-prettier-eslint -VISUAL Studio代碼插件eslint-plugin-prettier -ESLINT插件。雖然Prettier-Eslint使用eslint --fix來改變prettier的輸出，但Eslint-Plugin-Prettier將其保持prettier輸出，並將其與常規的Eslint工作流程集成在一起。prettier-eslint-webpack-plugin漂亮的Eslint Webpack插件謝謝這些人（表情符號密鑰）：
肯特·多德斯（Kent C. Dodds） ？ | Gyandeep Singh ？ | igor pnev ？ | 本傑明·譚 ？ | 埃里克·麥考密克 | 西蒙·萊德爾（Simon Lydell） | 湯姆·麥凱尼 |
帕特里克·奧克斯特蘭德 | Lochlan Bunn | DaniëlTerwiel ？ ？ | 羅賓·惡意 ？ | 邁克爾·麥克德莫特（Michael McDermott） | 亞當·斯坦基維奇（Adam Stankiewicz） | 斯蒂芬·約翰·索倫森（Stephen John Sorensen） |
布萊恩·迪·帕爾瑪（Brian Di Palma） ？ | 羅布·懷斯 | 帕特里克豌豆 ？ | Thijs Koerselman ？ | Enrique Caballero ？ | olukasz Moroz ？ | 西蒙·弗里德倫德（Simon Fridlund） ？ ？ ？ ？ ？ ？ |
奧利弗·約瑟夫·阿什（Oliver Joseph Ash） ？ | 馬克·帕弗里曼 | 亞歷克斯·泰勒（Alex Taylor） | 夏宗 | 劉易斯·劉 | Hamza Hamidi ？ ？ ？ ？ | Rajiv Ranjan Singh |
伊戈爾 ？ | 麗貝卡背心 | 克里斯·鮑比（Chris Bobbe） ？ | Jounqin ？ ？ ？ ？ ？ ？ ？ | 喬納森·雷姆（Jonathan Rehm） | 格倫·惠特尼（Glen Whitney） |
該項目遵循全企業規範。歡迎任何形式的貢獻！
麻省理工學院
