Laravel-Vue ESLint 在 VSCode 上無法靜態使用的問題

發表於 | 更新於 | 分類於

前言

由於最近專案開發上會使用到 Laravel-Vue，本身自己也會使用 ESLint 來管制自己得程式碼品質，但是不知道為什麼不管怎麼甚至就是沒有反應，所以這一篇來記錄一下怎麼解決

ESLint 安裝

要使用 ESLint 之前必須先安裝相關套件

1
npm install --save-dev eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue babel-eslint

總共會安裝這些套件

  • eslint - ESLint 核心
  • eslint-config-airbnb-base - 使用 airbnb 設定檔
  • eslint-plugin-import - 這個套件主要是要解決 ES6 語法 import/export 會在 ESLint 上出現錯誤(依照官方是這樣講沒錯)
  • eslint-plugin-vue - 這是由 Vue 官方所推出的 ESLint 相依套件
  • babel-eslint - babel 所推出的相依套件，如果沒裝這個可能會出現一些怪問題，例如 ESLint 不認得 import 語法

如果你跟我一樣本身是使用 VSCode 的話是可以不用特別去安裝套件，因為 VSCode 本身內建就有安裝 ESLint 套件

ESLint 套件

如果發現自己沒安裝就快安裝吧~

Package.json

安裝好後我們要在 Laravel-Vue 的 Package.json 新增兩行指令

1
2
3
4
"scripts": {
    "lint": "eslint resources/js/**/*.js",
    "lint-vue": "eslint resources/js/**/*.vue",
},

如果你想要檢測 js 的時候就輸入 npm run lint

但是如果你試想檢測 Vue 的話就是 npm run lint-vue

VS Code 靜態執行 ESLint

基本上打開 VSCode 然後將以下程式碼加入即可

1
2
3
4
5
"eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "vue", "autoFix": true }
]

這樣子你就會看到滿滿的毛毛蟲了，但是這個方式如果用於 Vue Cli 開發的模式似乎會出現各種毛毛蟲無法解析路徑…

所以最好的解決辦法就是養成習慣寫 airbnb 的模式吧XD

0%