最近搞團隊前端基礎建設，因為公司使用的是 Vue 項目，為了保證團隊的規范和可維護性，做了大量的 ESLint 、 Vetur 等 Vue 項目相關的研究。其中在進行 vue/no-unused-vars 配置中，遇到了些問題和大家分享下。
寫這篇文章前我也考查了國內的資料，多數人的解決方案並不是非常好的，例如：
- 把 scope 改成 slot-scope 就不報錯了。參閱[eslint-plugin-vue] [vue/no-unused-vars] 'scope' is defined but never used.
- eslint-disable行或者塊設置。參閱'scope' is defined but never used
還有些其他的基本類似，上面兩個並不能真正較好的解決，如果有興趣你可以仔細看看下面的內容。
下面內容基於 VSCode 編輯器，通過
Vue CLI創建的項目，如果不是這個編輯器可能不適用。
重現問題
下面這段代碼，使用 ElementUI 的朋友應該經常看到
<el-table-column fixed="right" label="操作" width="100"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> <el-button type="text" size="small">編輯</el-button> </template> </el-table-column>
這是個沒有問題，不會報錯的代碼。然而再看看下面這段：
<el-table-column label="一個自定義的列" width="200"> <template slot-scope="scope"> {{otherData.name}} </template> </el-table-column>
你或許並不需要使用到 scope 變量，然而他的下面會出現紅色的波浪號，提示內容如下：
[vue/no-unused-vars] 'scope' is defined but never used.eslint-plugin-vue
相同的問題描述，也有人曾經提過：Disable unused variable error
你需要明白的 ESLint
很多項目為了方便都是通過 Vue CLI 創建的，他會安裝eslint-plugin-vue，默認的 ESLint 配置文件是很簡單的，也只是 Vue 的基本風格規范校驗（ plugin:vue/essential ）。為了更加規范編碼，我這邊會進行修改配置文件為 plugin:vue/recommended 。
這樣一下子，項目中的紅色波浪就多了，很多其實也可以通過 ESLint 的 CLI 進行自動修復，配合 VSCode 的保存自動修復功能非常好用，這里不過多介紹。
不過上面的問題，你也許可以通過文檔查到設置vue/no-unused-vars，直接將其禁用，比如在 rules 里面添加一行設置如下：
rules: { 'vue/no-unused-vars': 'off', }
可是並沒有起到作用，你可能會正好搜到另一份文檔https://eslint.vuejs.org/rules/no-unused-vars.html，設置了：
rules: { "vue/no-unused-vars": ["error", { "ignorePattern": "^_" }] }
也沒做用，那是當然的，因為上面這個配置針對 Vue3.x 的，可要看仔細頂部的說明。
This is a documentation for version
7.0.0-beta.2.
那怎么辦？不要慌，這里我提供了兩個較好方案。
-
將
scope換成{}，這個是最簡單快速的方案，例如以上示例的代碼片段可修改為：<el-table-column label="一個自定義的列" width="200"> <template slot-scope="{}"> {{otherData.name}} </template> </el-table-column>參閱：html attribute in vue : eslint raises error "defined but never used"
-
這個相對復雜些，並且需要配合 VSCode 設置，大致如下：
首先、ESLint 的配置依舊要用
'vue/no-unused-vars': 'off'，其次、編輯器 VSCode 也要進行配置，添加一條
"vetur.validation.template": false（前提是啟用了Vetur插件）
所以說第二條方案是推薦的，而紅色波浪並不是因為 ESLint 配置錯誤造成，而是 Vetur 內置服務檢測觸發，當然也許你會想到 Vetur 為什么沒有讀取 ESLint 的配置進行，這個我精力有限，暫時也沒辦法深入研究。
其實還有個毀滅性的操作，就是關閉 Vetur，哈哈哈，開個玩笑，用 VSCode 開發 Vue 項目，這個當然不能關啦。
結語
項目開發中經常遇到奇奇怪怪的問題，除了配置檢查（可能不同版本造成的配置錯誤）、還要注意插件、自定義編輯器設置等多方面因素進行問題排除。
當然最重要的還是要善於 Google 搜索，多看相關插件的 Issues，Stackoverflow。最后獻上幾個 Vue 規范的資料，大家沒事也多看看。
后面我會寫一篇關於 Vue-CLI 開發的項目規范配置文章，敬請期待。
轉 https://www.whidy.net/vue-eslint-rules-no-unused-vars-not-working/