如何解決vscode格式化不見(jiàn)了的問(wèn)題

這篇文章給大家分享的是有關(guān)如何解決vscode格式化不見(jiàn)了的問(wèn)題的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

vscode格式化不見(jiàn)了怎么辦？

三步搞定 vscode 代碼格式化

相關(guān)推薦：vscode入門(mén)教程

一、安裝以下幾個(gè) vscode 擴(kuò)展程序：

ESLint

Prettier - Code formatter

Vetur

如圖：

二、打開(kāi) settings 文件

打開(kāi)方式：

先按步驟打開(kāi) setting 界面，

Code --> preferences -->setting （也可以快捷鍵 command + ,（mac） 直接打開(kāi)）

現(xiàn)在看到的是界面配置模式，點(diǎn)擊右上角的紅色區(qū)域按鈕（如下圖），可以打開(kāi) settings.json 文件。

三、將下面配置添加到 setting.json 文件中

注： 此配置支持 CSS、HTML、JS 和 Vue 等文件的格式化。大家可以參考，然后結(jié)合自己的需求去配置。

如果沒(méi)有特殊需求，也可以拿去直接用。

{
  // tab 大小為2個(gè)空格
  "editor.tabSize": 2,
  // 100 列后換行
  "editor.wordWrapColumn": 100,
  // 保存時(shí)格式化
  "editor.formatOnSave": true,
  // 開(kāi)啟 vscode 文件路徑導(dǎo)航
  "breadcrumbs.enabled": true,
  // prettier 設(shè)置語(yǔ)句末尾不加分號(hào)
  "prettier.semi": false,
  // prettier 設(shè)置強(qiáng)制單引號(hào)
  "prettier.singleQuote": true,
  // 選擇 vue 文件中 template 的格式化工具
  "vetur.format.defaultFormatter.html": "prettyhtml",
  // 顯示 markdown 中英文切換時(shí)產(chǎn)生的特殊字符
  "editor.renderControlCharacters": true,
  // 設(shè)置 eslint 保存時(shí)自動(dòng)修復(fù)
  "eslint.autoFixOnSave": true,
  // eslint 檢測(cè)文件類(lèi)型
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue"
      "autoFix": true
    }
  ],
  // vetur 的自定義設(shè)置
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true,
      "semi": false
    }
  }
}

保存配置，現(xiàn)在就搞定了，快試試是不是可以保存格式化代碼了。

感謝各位的閱讀！關(guān)于“如何解決vscode格式化不見(jiàn)了的問(wèn)題”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！