VSCode格式化前端程式碼後Eslint報錯

十三山入秋發表於2024-11-29
VSCode前端EsLint

VSCode格式化前端程式碼後Eslint報錯

> 比如Eslint要求函式後面括號，括號前要空一格，但是原來的vsCode格式化不會留這個空格；

這是矛盾的；

解決方式：兩步：

1. 下載三個外掛：

  • ESLint: 用於在 VSCode 中整合 ESLint。
  • Prettier - Code formatter: 用於程式碼格式化
  • Vetur：主要 .vue檔案 語法高亮、程式碼補全、錯誤檢測、格式化等

2. 在settings.json 後面貼一段配置：

 "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ],
  "eslint.run": "onSave",
  "eslint.options": {
    "extensions": [".js", ".jsx", ".vue"]
  }

儲存檔案的時候，會儲存成Eslint滿意的樣子。

PS，此時html不會在儲存時候自動格式化，可以右鍵用vscode的格式化格式化一下，最後儲存。

完成✅

相關文章