溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

詳解VS Code使用之Vue工程配置format代碼格式化

發(fā)布時(shí)間：2020-08-28 05:58:03 來源：腳本之家 閱讀：577 作者：胡不歸vac 欄目：web開發(fā)

編輯器另外一個(gè)很重要的功能就是代碼格式化了，VS Code默認(rèn)提供常見文件的格式化，如.js,.html等。

添加對(duì).vue文件的格式化支持

這里我們添加對(duì) .vue 文件的格式化支持。
1. 安裝 Vetur 插件
2. 在 VS Code 的設(shè)置中添加如下規(guī)則：

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

這里是設(shè)置 Vetur 默認(rèn)使用的格式化插件 prettier。 這樣對(duì)于.vue文件中的 html 和 javascript 代碼都有格式化支持了。

使用符合 ESLint 規(guī)范的格式化

1、使用 prettier 格式化 .js 文件

可以設(shè)置 prettier 在格式化的時(shí)候，讀取項(xiàng)目的 .eslintrc的配置，對(duì) js代碼進(jìn)行格式化。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

  1. 首先為 VS Code 安裝 prettier 插件
  2. 在 VS Code 的設(shè)置中添加如下配置
    1. json
    2. "prettier.eslintIntegration": true

2、對(duì).vue文件的格式化

prettier插件對(duì) .vue 文件格式化時(shí)，暫不能支持將 eslint規(guī)范應(yīng)用到 js代碼中。

但是我們可以先將其格式化，然后利用 ESLint 保存文件時(shí)自動(dòng)修復(fù)錯(cuò)誤的特性，修復(fù)一些諸如 分號(hào)，空格，縮進(jìn) 等錯(cuò)誤。

參考資料：

- Vetur

本文首發(fā)于我的github

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手