eslint臀栈、prettier和ts分別承擔(dān)語法檢查娃圆、風(fēng)格檢查玫锋、類型檢查的職責(zé)
我們來研究一下vue項目中相關(guān)的包
用npm init vue創(chuàng)建一個vue3+ts+eslint+prettier的項目，看一下依賴
"@rushstack/eslint-patch": "^1.2.0",
"@types/node": "^18.14.2",
"@vitejs/plugin-vue": "^4.0.0",
"@vitejs/plugin-vue-jsx": "^3.0.0",
"@vue/eslint-config-prettier": "^7.1.0",
"@vue/eslint-config-typescript": "^11.0.2",
"@vue/tsconfig": "^0.1.3",
"eslint": "^8.34.0",
"eslint-plugin-vue": "^9.9.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.8.4",
"typescript": "~4.8.4",
"vite": "^4.1.4",
"vue-tsc": "^1.2.0"
eslint-plugin-vue
支持vue單文件的校驗
@vue/eslint-config-typescript
支持ts解析讼呢，并包含針對ts的校驗rules撩鹿。
如果在非vue的ts項目中，應(yīng)該使用@typescript-eslint/parser和@typescript-eslint/eslint-plugin這2個包悦屏，功能是一致的节沦。事實上@vue/eslint-config-typescript依賴了這2個包。
@vue/eslint-config-prettier
將Prettier作為ESLint規(guī)則運行础爬，并將差異報告為單個 ESLint 問題甫贯。關(guān)閉eslint中與prettier沖突的規(guī)則，讓2個工具各司其職看蚜。
如果在非vue的項目中获搏，應(yīng)該使用eslint-plugin-prettier和eslint-config-prettier這個包，功能是一致的失乾。事實上 @vue/eslint-config-prettier依賴了這2個包常熙。
@rushstack/eslint-patch
根據(jù)官方建議，本包和上述2個包要一起安裝碱茁，理由是：
在ESLint Flat Config變得穩(wěn)定之前裸卫，為了解決ESLint 中的一個已知限制，我們建議您將此包與 一起使用@rushstack/eslint-patch纽竣，這樣您就不必安裝太多依賴項
vue-tsc
配合volar墓贿，可以在vscode中更好更精準(zhǔn)地進行ts的類型檢查
