成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Achilles / 2734人閱讀

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

前言

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

vs code的配置文件:

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


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


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

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

1 ESLint格式化 
安裝插件：ESLint

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

設(shè)置配置:

{
  "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

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

設(shè)置文件類型:

設(shè)置配置：

{
  "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

設(shè)置文件類型:

4 廢話少說，裝好上面三個插件，大家可以參考我的配置，直接復(fù)制進去就行了 
{
    "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"  
}

[原文]參考

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94188.html

相關(guān)文章

  • 梳理前端開發(fā)使用eslint-prettier檢查和格式化代碼

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

    yangrd 評論0 收藏0

  • 手把手教你如何用Crawlab構(gòu)建技術(shù)文章聚合平臺(二)

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

    zhunjiee 評論0 收藏0

  • 一分鐘教你學會配置eslint，還在為風格單雙引號，對象末位逗號要不要，引用各種報錯而煩惱？(建議收

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

    劉東 評論0 收藏0

  • vscode 配置eslint 開發(fā)vue的相關(guān)配置

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

    haobowd 評論0 收藏0

  • vscode 配置eslint 開發(fā)vue的相關(guān)配置

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

    lifesimple 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<