webstorm中配置eslint+prettier

前端開膛手發表於2018-08-08

前兩個月,我們的專案裡引入了prettier,配合之前就有的eslint檢查,一下子就讓自由散漫的我吃夠了苦頭。一個個去改是不可能改的了,那就只有考慮編輯器自動修正,可是看見各種複雜度配置頭就大了,xjb搞了好幾天吧,時好時壞。直到最近才有點理論可以指導實踐了。

vscode始終沒有弄好,我現在是用vscode寫好,然後在webstorm上fix-eslint。

廢話不多說,直接上程式碼,希望能給正在遭遇同樣煩惱的你們帶來幫助。

下圖為prettier依賴,最重要的是eslint-plugin-prettier外掛

webstorm中配置eslint+prettier

那麼在webstorm怎麼設定呢?

prettier.io/docs/en/web… 有耐心的人可以直接看這裡,應該能解決了。採用的辦法是在webstorm新增watcher。

首先要設定eslint

webstorm中配置eslint+prettier

然後設定prettier

webstorm中配置eslint+prettier

然後新增prettier的watcher

webstorm中配置eslint+prettier

哎呀,寫字好麻煩,大家湊合看吧 /假笑


相關文章