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 套件
如果發現自己沒安裝就快安裝吧~
Package.json
安裝好後我們要在 Laravel-Vue 的 Package.json 新增兩行指令
1 | "scripts": { |
如果你想要檢測 js 的時候就輸入 npm run lint
但是如果你試想檢測 Vue 的話就是 npm run lint-vue
VS Code 靜態執行 ESLint
基本上打開 VSCode 然後將以下程式碼加入即可
1 | "eslint.validate": [ |
這樣子你就會看到滿滿的毛毛蟲了,但是這個方式如果用於 Vue Cli 開發的模式似乎會出現各種毛毛蟲無法解析路徑…
所以最好的解決辦法就是養成習慣寫 airbnb 的模式吧XD