這份代碼在保存時(shí)，ESLint 會(huì)先從初始狀態(tài)變成正確的格式，然后 prettier 又把代碼變成了錯(cuò)誤的格式。

以前當(dāng)我發(fā)現(xiàn)這個(gè)問題時(shí)，我首先想的是把 prettier 規(guī)則配置的跟 ESLint 一致，這樣就沒問題了。

然而 standard 規(guī)則要求函數(shù)名和括號(hào)之間有一個(gè)空格，這就是space-before-function-paren 規(guī)則（ESLint 本身也會(huì)默認(rèn)開啟這個(gè)規(guī)則）。 但是 prettier 完全沒有這個(gè)規(guī)則！prettier 不會(huì)處理這個(gè)空格的問題，所以根據(jù) ESLint 配置修改 prettier 規(guī)則不可行。

后來我找到的解決辦法是安裝 prettier-eslint 包。其實(shí)它一共所需的依賴如下：
npm i @vue/cli-plugin-eslint babel-eslint eslint eslint-plugin-vue prettier prettier-eslint --save-dev

如果在使用 vue-cli 創(chuàng)建項(xiàng)目時(shí)已經(jīng)選擇了 babel、eslint，那么只需要安裝缺少的包：
npm i prettier prettier-eslint --save-dev

這樣，保存文件時(shí)會(huì)得到正確的代碼格式。

那么 prettier-eslint 是怎么讓結(jié)果變得正確了呢？昨天我去它的 github 看了看，原來它是先把代碼用 prettier 格式化，然后再用 ESLint fix。

這和 vscode 保存文件時(shí)的流程是相反的。這樣等于是調(diào)轉(zhuǎn)了順序，最后我們只要 ESLint fix 的結(jié)果就行了。