將eslint安裝為擴展和安裝為npm package有什么區別？

Question

我一直在關注有關為 vscode 和開發設置和配置 eslint 和 prettier 的各種博客和視頻。 但是每篇文章都沒有解釋why do we need to separately install eslint as an npm package and vs code extension?

如果我安裝其中任何一個，會有什么不同？

Answer 1

為什么我們需要單獨安裝eslint as npm package 和vscode擴展？

簡短的回答：你沒有。

長答案：

安裝 ESLint/Prettier 作為擴展，允許您在 VSCode 中格式化/檢查您的代碼。

但是，將它們也作為依賴項安裝會帶來額外的好處：

• VSCode 將使用與安裝時完全相同的 package。 所以當 VSCode 說 OK 時你不會發現這種情況，但是你的 CI 服務器說：NOT OK
• 您將控制版本，並可以隨時更新
• 您將能夠為不同的項目使用不同的版本。 當您無法遷移舊項目，但想為新項目使用最新的可能性時，這一點尤其重要
• 您將能夠通過 package.json 的script塊訪問 Prettier/ package.json ，並能夠根據需要編寫帶有參數的自定義命令
• 您將能夠將它們與 Husky 或 NPM 掛鈎配對以自動驗證/格式化代碼

根據我的經驗，如果你可以在本地安裝一些東西——將它安裝為 package 依賴項（除了像 create-react-app 或 angular-cli 這樣的 CLI 可以幫助你啟動應用程序）。 這會讓你的生活有點可預測。

Answer 2

這些程序可以格式化您的代碼（ESLint 和 Prettier）並檢測特定語法（ESLint）。

當作為擴展安裝在你的 IDE（例如 vscode）中時，你可以獲得：

• 實時波浪線；
• 和格式保存。

但是在他們自己的環境中啟動您的項目的人可能沒有安裝這些擴展（甚至可能沒有相同的 IDE），因此可能無法獲得這些擴展。

當作為 npm 包安裝時（並包含在管道中的某處，或者在 npm 開始，或者在你的持續部署中，或者......）

• 你不會得到實時的波浪線，
• 但你仍然可以獲得自動格式化（雖然不一定在保存時，取決於配置），
• 您可以獲得阻止規則（這意味着您不僅可以看到錯誤/警告，還可以實際阻止管道，直到開發人員修復所述錯誤/警告）
• 您可以確保從任何 IDE 開始該項目的任何人都能獲得包含的軟件包