vscode一格式化就報錯？各種風格問題各種報錯煩不勝煩，教你如何用好vue的eslint風格配置

Achilles 發布于2019-08-22 16:16 / 2727人閱讀

摘要：格式化安裝插件如果題主認真讀了的的話，應該可以寫出下面的配置了。用來格式化和提示格式錯誤。在編碼過程中提示格式錯誤，養成良好的編碼習慣。

前言

感覺搭建一個舒服的前端開發環境，十分的重要定制化的格式化，編輯器自帶的格式化各種報錯，手動改真的會死人，因此搭建一個編輯器環境必不可少，現在要講的是vscode中如何定制vue

vs code的配置文件:

format相關:搜索format，你會看到很多默認的格式化配置項。

更改format配置你可以選擇想要更改的內容，復制到右邊進行更改，當然，有些配置項是裝好插件才會出來的。后面所說的設置配置文件都是修改右邊這里哦～

安裝插件:非常簡單咯，點擊左側圖標，然后輸入你想搜索的名字就好了。當然有些插件可能沒有被官方采納。你也可以去github上下載。

所以:你想要一個什么樣的格式化基本上都可以實現，閱讀一下不同插件的github里面的readme就可以了。

1 ESLint格式化

安裝插件：ESLint

如果題主認真讀了ESLint的Readme的話，應該可以寫出下面的配置了。不過我還是寫一下好了。
用來格式化和提示格式錯誤。設置文件類型:

設置配置:

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

2 在Vue項目中的ESLint

安裝插件：Vetur

其實在工作中，我們往往不喜歡常常去按保存鍵，或者在保存之前想先格式化一下再繼續寫。因此，我采用了下面的方式：默認自帶了格式化的功能，快捷鍵是shift+option+f（mac）。主要用來格式化復制粘貼的代碼。ESLint 在編碼過程中提示格式錯誤，養成良好的編碼習慣。

設置文件類型:

設置配置：

{
  "vetur.format.defaultFormatter.html": "prettier" //這是vue中html的格式化
  "workbench.startupEditor": "welcomePage",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "editor.quickSuggestions": {
    "strings": true
  },
  "editor.tabSize": 2,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    {
      "language": "html",
      "autoFix": true
    }
  ]
}

3 JS中的格式化

安裝插件：Javascript Standard Style

設置文件類型:

4 廢話少說，裝好上面三個插件，大家可以參考我的配置，直接復制進去就行了

{
    "editor.fontSize": 19,
    "workbench.colorTheme": "Monokai",
    "workbench.startupEditor": "welcomePage",
    "editor.tabSize": 2,
    "eslint.autoFixOnSave": true,
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "editor.quickSuggestions": {
        "strings": true
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue",
        {
            "language": "html",
            "autoFix": true
        }
    ],
    "files.autoSave": "afterDelay",
    "vetur.format.defaultFormatter.html": "prettier"  
}

[原文]參考

GPU云服務器云服務器 java開始就報錯不勝煩騰訊云服務器各種問題 vim配置c語言風格

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

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

梳理前端開發使用eslint-prettier檢查和格式化代碼

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

yangrd 2019-08-22 17:01 評論0 收藏0
手把手教你如何用Crawlab構建技術文章聚合平臺(二)

摘要：上一篇文章手把手教你如何用構建技術文章聚合平臺一介紹了如何使用搭建的運行環境，并且將與集成，對掘金進行技術文章的抓取，最后可以查看抓取結果。本篇文章將繼續講解如何利用編寫一個精簡的聚合平臺，將抓取好的文章內容展示出來。上一篇文章《手把手教你如何用Crawlab構建技術文章聚合平臺(一)》介紹了如何使用搭建Crawlab的運行環境，并且將Puppeteer與Crawlab集成，對掘金、...

zhunjiee 2019-07-31 10:11 評論0 收藏0
一分鐘教你學會配置eslint，還在為風格單雙引號，對象末位逗號要不要，引用各種報錯而煩惱？(建議收

摘要：最全的配置大全，我已經加了詳細中文注釋，只需要找到自己想要的配置就可以了，強烈建議收藏用法非常簡單，找到下的添加對象即可比如我要把規則原本單引號要變為雙引號，那加上注意這個規則如果違反了規則情況下，這里的數字表示不不處理，表示警告，表示錯誤最全的eslint配置大全，我已經加了詳細中文注釋，只需要找到自己想要的配置就可以了，強烈建議收藏！用法非常簡單，找到.eslintrc.js下...

劉東 2019-08-22 16:05 評論0 收藏0
vscode 配置eslint 開發vue的相關配置

摘要：參考詳情請參考此插件允許和修復文件中包含的內聯腳本。這是因為中發生了許多內部更改，包括支持預處理器中自動固定的新。請確保在你的配置中使用了該插件自身的配置代碼規范解決報錯問題如何在vscode中用JavaScript Standard Style風格去驗證 vue文件實際上JavaScript Standard Style有一個FAQ, 說明了如何使用。但是有一點非常重要的作者沒有...

haobowd 2019-08-02 16:15 評論0 收藏0
vscode 配置eslint 開發vue的相關配置

摘要：參考詳情請參考此插件允許和修復文件中包含的內聯腳本。這是因為中發生了許多內部更改，包括支持預處理器中自動固定的新。請確保在你的配置中使用了該插件自身的配置代碼規范解決報錯問題如何在vscode中用JavaScript Standard Style風格去驗證 vue文件實際上JavaScript Standard Style有一個FAQ, 說明了如何使用。但是有一點非常重要的作者沒有...

lifesimple 2019-08-23 17:13 評論0 收藏0