vscode 中 vue項目使用eslint插件 檢查代碼

前言

本文章項目由vue-cli3創建

vscode版本1.36.1

eslint1.9.0

在網上找了一大堆文章，不知是什么原因，沒有一篇可以直接使用的

折騰了許久，直接按eslint插件的說明，竟然可以了，本方法在2台電腦上試過成功。

步驟

首先在vscode里安裝eslint

 

進插件詳情頁，按說明，先全局安裝eslint包

 

然后需要創建eslintrc配置文件

在VSCODE里面，CTRL+SHIT+P, 復制 粘貼Create ESLint configuration 這行文字，然后回車

 

在底部彈出了終端窗口
會問幾個設置問題，看着辦選擇，找一篇看它都問了些什么
https://blog.csdn.net/Gabriel_wei/article/details/90269165

 

然后需要安裝幾個東西，輸入y 回車

 這樣就安裝完成了：

回資源管理器，可以看到多了這個文件

 

然后你會看見，期待的滿屏惡心紅波浪已經出現了，但只是js生效，vue不生效：

 

 又是一翻折騰，因為技術文章有時效性，可能很多配置都是舊的，折騰了不少時間

在項目目錄建個.vscode目錄，里面建settings.json，針對本項目的配置，放入這些東西：

{
    "editor.tabSize": 4,
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ]
}

 

 這下子，連vue文件也出線惡心的紅波浪線了。

規則設置方面隨便找一篇照着用即可。。