使用vs code 終端打開當(dāng)前工作空間目錄舆驶。
1. 安裝 prettier橱健，可以選擇本地安裝 或者全局安裝(盡量安裝在本地工作空間)
? ? node_modules 的安裝方式盡量選擇 yarn ，速度比最新的npm 要快沙廉。
? ? yarn add prettier -D
2. 安裝 ESLint
? ? yarn add eslint -D
3.vscode 打開插件市場(chǎng)分別安裝 eslint 和 prettier 兩款插件拘荡。這兩款插件能盡量保證插件的正常啟動(dòng)
安裝完畢之后，使用vscode 快捷鍵創(chuàng)建 ctrl + shift +p (command +shift +p)?
輸入 eslint 撬陵，選擇創(chuàng)建eslint 配置(下圖第二個(gè))
提示會(huì)要求根據(jù)你的喜好配置eslint 的檢查規(guī)則珊皿。根據(jù)習(xí)慣配置?https://eslint.org/docs/rules/。創(chuàng)建好之后 在 .eslintrc 文件中找到 plugins,在數(shù)組中加入?"prettier"
配置完之后我們繼續(xù)配置prettier 和 eslint 的方法一致 vs code快捷輸入 ctrl + shift +p 輸入 prettier 并選擇路徑巨税。就會(huì)生成一個(gè)默認(rèn)的prettier 配置蟋定，然后根據(jù)自己的需求修改格式化規(guī)則。
4. 在workspace 中建立 .vscode 的文件夾 并在目錄下添加 settings.json 文件草添。
????編輯文件在最后添加?"editor.formatOnSave": true
????保存當(dāng)前的配置驶兜。然后重啟vs code，自動(dòng)格式話就會(huì)正常工作了远寸。
常見問題
? ? 如果自動(dòng)格式化不能正常工作抄淑，先打開vs code 終端中output 對(duì)應(yīng)的 eslint 和 prettier 尋找答案 詳細(xì)閱讀應(yīng)該都能解決。?
遇此問題? ? Failed to load plugin 'prettier' declared in 'CLIOptions': Cannot find module 'eslint-plugin-prettier'驰后，請(qǐng)將package.json 中的 eslint 的版本 設(shè)置在 5.4.0? 就可以解決肆资。詳情見：https://github.com/prettier/prettier-atom/issues/505
