VsCode 配置Eslint格式化代碼（vue）以及常用插件

laznrbfe 發布于2019-08-22 17:05 / 870人閱讀

摘要：配置插件擴展商店搜索，點擊安裝，并重新加載配置，打開文件首選項設置在用戶設置中插入配置代碼支持此時，就可以在項目中檢測代碼了檢測比較嚴格，若希望按照格式化代碼，進行以下操作安裝插件，這是上一個代碼提示，語法高亮等功能的流行插件安裝后在默認配

配置eslint

插件擴展商店搜索 eslint，點擊安裝，并重新加載；

配置eslint，打開文件==>首選項==>設置；

在用戶設置中插入配置代碼(支持vue):

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

此時，eslint就可以在項目中檢測代碼了

eslint檢測比較嚴格，若希望vue按照eslint格式化代碼，進行以下操作：

安裝插件Vetur，這是vscode上一個vue.js代碼提示，語法高亮等功能的流行插件；

安裝后在默認配置可以看到，vetur默認采用prettier格式化；

安裝插件prettier,但他的格式化并不和eslint一樣，所以在用戶配置中添加以下配置；

//分號
"prettier.semi": false,
//單引號包裹字符串
"prettier.singleQuote": true,
//html格式化依賴  默認為none
"vetur.format.defaultFormatter.html": "js-beautify-html",
//函數前加空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
//沒有下邊這個 上邊不生效
"vetur.format.defaultFormatter.js": "vscode-typescript",

vue擴展推薦

Vue VSCode Snippets

Vue 2 Snippets

上面是兩個很好用的vue代碼片段

Better Comments 高亮你注釋的擴展比如：

css peek css轉到定義

file peek file到定義

GPU云服務器云服務器 vue插件服務器配置以及價格騰訊云創建服務器以及配置配置云服務器以及網站上線

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94852.html

VsCode 配置Eslint格式化代碼（vue）以及常用插件

摘要：配置插件擴展商店搜索，點擊安裝，并重新加載配置，打開文件首選項設置在用戶設置中插入配置代碼支持此時，就可以在項目中檢測代碼了檢測比較嚴格，若希望按照格式化代碼，進行以下操作安裝插件，這是上一個代碼提示，語法高亮等功能的流行插件安裝后在默認配配置eslint 插件擴展商店搜索 eslint，點擊安裝，并重新加載；showImg(https://segmentfault.com/img...

jollywing 2019-08-29 15:20 評論0 收藏0
VsCode 配置Eslint格式化代碼（vue）以及常用插件

摘要：配置插件擴展商店搜索，點擊安裝，并重新加載配置，打開文件首選項設置在用戶設置中插入配置代碼支持此時，就可以在項目中檢測代碼了檢測比較嚴格，若希望按照格式化代碼，進行以下操作安裝插件，這是上一個代碼提示，語法高亮等功能的流行插件安裝后在默認配配置eslint 插件擴展商店搜索 eslint，點擊安裝，并重新加載；showImg(https://segmentfault.com/img...

sean 2019-08-02 10:23 評論0 收藏0
梳理前端開發使用eslint-prettier檢查和格式化代碼

摘要：梳理前端開發使用檢查和格式化代碼問題痛點在團隊的項目開發過程中，代碼維護所占的時間比重往往大于新功能的開發。使用格式化所有代碼。參考文檔如何花分鐘解決產生的各種錯誤的記憶現場原文轉載梳理前端開發使用檢查和格式化代碼線上猛如虎，線下慫如鼠梳理前端開發使用eslint-prettier檢查和格式化代碼問題痛點在團隊的項目開發過程中，代碼維護所占的時間比重往往大于新功能的開發。因此編...

yangrd 2019-08-22 17:01 評論0 收藏0
vscode常用插件【全了】

摘要：插件集待補充。。。同時，它還包含了用于轉換為格式和生成數據模式的選項用于壓縮合并和文件的應用程序。它提供了大量自定義的設置，以及自動壓縮保存并導出為文件的選項。修改文本的更多命名格式，包括駝峰命名下劃線分隔命名，命名以及命名等切換漂亮的主題插件集待補充。。。 20180903 文件【Path Intellisense】自動補全路徑瀏覽器【Open-In-Browser】在...

kyanag 2019-08-30 13:57 評論0 收藏0
vscode常用插件【全了】

摘要：插件集待補充。。。同時，它還包含了用于轉換為格式和生成數據模式的選項用于壓縮合并和文件的應用程序。它提供了大量自定義的設置，以及自動壓縮保存并導出為文件的選項。修改文本的更多命名格式，包括駝峰命名下劃線分隔命名，命名以及命名等切換漂亮的主題插件集待補充。。。 20180903 文件【Path Intellisense】自動補全路徑瀏覽器【Open-In-Browser】在...

xcc3641 2019-08-26 11:42 評論0 收藏0