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

發表於 2019-07-31 更新於 2020-12-27 分類於 PHP

由於最近專案開發上會使用到 Laravel-Vue，本身自己也會使用 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 套件

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

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

"scripts": {
    "lint": "eslint resources/js/**/*.js",
    "lint-vue": "eslint resources/js/**/*.vue",
},

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

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

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

"eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "vue", "autoFix": true }
]

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

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