本文將為大家詳細介紹“vscode下vue文件格式化的方法”，內(nèi)容步驟清晰詳細，細節(jié)處理妥當，而小編每天都會更新不同的知識點，希望這篇“vscode下vue文件格式化的方法”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識吧。

創(chuàng)新互聯(lián)公司服務項目包括寶清網(wǎng)站建設(shè)、寶清網(wǎng)站制作、寶清網(wǎng)頁制作以及寶清網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，寶清網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到寶清省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

vscode有什么用

Visual Studio Code 是一個運行于 OS X，Windows和 Linux 之上的，針對于編寫現(xiàn)代 web 和云應用的跨平臺編輯器，它為開發(fā)者們提供了對多種編程語言的內(nèi)置支持，并且正如 Microsoft 在Build 大會的 keynote 中所指出的，這款編輯器也會為這些語言都提供了豐富的代碼補全和導航功能。

我相信基本上每一個在vscode上面碼Vue代碼的都會下載Vetur插件用來格式化等操作，今天Vetur更新了 0.14.2 版本，最近在使用的時候，感覺格式化總是出問題，去Vetur上面看了下，發(fā)現(xiàn)Vetur的配置做了下面的改動，看到幾個社區(qū)都沒有人說明，我就先說下，默認的格式化配置是：

{
 "vetur.format.defaultFormatter.html": "prettyhtml",
 "vetur.format.defaultFormatter.css": "prettier",
 "vetur.format.defaultFormatter.postcss": "prettier",
 "vetur.format.defaultFormatter.scss": "prettier",
 "vetur.format.defaultFormatter.less": "prettier",
 "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
 "vetur.format.defaultFormatter.js": "prettier",
 "vetur.format.defaultFormatter.ts": "prettier"
}

不需要修改的話就不管他，我的建議是跟著使用默認的格式化工具就行

默認的html格式化工具變?yōu)閜rettyhtml

下面是原來使用js-beautify-html格式化的配置，現(xiàn)在官方已經(jīng)不推薦了，我準備跟著變?yōu)閜rettyhtml

原來的：

"vetur.format.defaultFormatterOptions": {
 "js-beautify-html": {
  "wrap_line_length": 160,
  "wrap_attributes": "auto",
  "end_with_newline": false
 }
 },

新的配置：

"vetur.format.defaultFormatterOptions": {
 "prettyhtml": {
  // 單行超過160個長度的時候開始換行顯示各種參數(shù)和事件
  "printWidth": 160
 }
 },

關(guān)于prettier的設(shè)置規(guī)則改變

1.項目的根目錄不能有 .prettierrc 、 .prettierrc.js 等配置文件，否則會覆蓋掉vscode上面的配置

2.新的配置項寫法變化： 原來只能設(shè)置全局js的配置的：

"prettier.singleQuote": true,
 "prettier.disableLanguages": [ "vue" ]

可以設(shè)置vue文件里面的，和js文件不沖突：

// js文件
 "prettier.singleQuote": true,
 "prettier.disableLanguages": [ "vue" ]，
 // vue文件里面的js
 "vetur.format.defaultFormatterOptions": {
 "prettier": {
  "singleQuote": true,
  "proseWrap": "never",
  "printWidth": 130
 }
 },

和html的格式化寫在一起就是：

"vetur.format.defaultFormatterOptions": {
 "prettyhtml": {
  "printWidth": 160
 },
 "prettier": {
  "singleQuote": true,
  "proseWrap": "never",
  "printWidth": 130
 }
 },

如果你能讀到這里，小編希望你對“vscode下vue文件格式化的方法”這一關(guān)鍵問題有了從實踐層面最深刻的體會，具體使用情況還需要大家自己動手實踐使用過才能領(lǐng)會，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文題目：vscode下vue文件格式化的方法
網(wǎng)站地址：http://www.chinadenli.net/article30/piigpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、面包屑導航、網(wǎng)站設(shè)計、服務器托管、商城網(wǎng)站、App設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)