vscode中prettier插件怎么使用? vscode中prettier的用法
我要評(píng)論prettier是一款優(yōu)秀的代碼格式化工具，并不關(guān)心你的語(yǔ)法是否正確，只關(guān)心你的代碼格式，比如是否使用單引號(hào)，語(yǔ)句結(jié)尾是否使用分號(hào)等等，它可以把格式錯(cuò)亂的代碼轉(zhuǎn)化為符合標(biāo)準(zhǔn)的漂亮代碼，prettier支持格式化的語(yǔ)言有：JavaScript，TypeScript，F(xiàn)low，JSX，JSON，CSS，SCSS，Less，HTML，Vue，Angular，GraphQL，Markdown，YAML。
prettier也開發(fā)了一款vscode的插件，本文介紹如何在vscode中使用prettier
Visual Studio Code(代碼編輯器) v1.99.3 64位 中文免費(fèi)綠色版
- 類型：編譯工具
- 大小：143MB
- 語(yǔ)言：簡(jiǎn)體中文
- 時(shí)間：2025-04-17
打開vscode，如果沒有安裝prettier插件，請(qǐng)先安裝，安裝方法是點(diǎn)擊“Extension”圖標(biāo)，然后搜索 “prettier”，找到官方插件并安裝
準(zhǔn)備一段示例代碼，如下圖是一段格式比較混亂的html代碼
在打開示例代碼的vscode窗口中，使用快捷鍵“CTRL + Shift + P”打開vscode命令框，在框中輸入“format”關(guān)鍵字，可以看到有2個(gè)選項(xiàng)
1. Format Document （快捷鍵 Shift+Alt+F）對(duì)整個(gè)文檔做格式化
2. Format Selection （快捷鍵Ctrl+K, Ctrl+F）對(duì)選擇代碼做格式化
可以根據(jù)需要選擇其中一個(gè)選項(xiàng)
我們選擇“Format Document”后，可以看到代碼發(fā)生了變化，示例代碼變得美觀整潔，如下圖所示
另外，我們還可以選中部分代碼，然后點(diǎn)擊右鍵，在右鍵菜單中也會(huì)有2個(gè)選項(xiàng)，同樣可以對(duì)現(xiàn)有代碼做格式化，用起來(lái)很方便
1. Format Document （Shift+Alt+F）
2. Format Selection （Ctrl+K, Ctrl+F）
以上就是vscode中prettier插件的使用方法，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注腳本之家。
相關(guān)推薦：
vscode如何刪除項(xiàng)目? vscode關(guān)閉項(xiàng)目的技巧
vscode怎么打包vue項(xiàng)目? vscode中vue項(xiàng)目打包流程
VSCode快速移動(dòng)光標(biāo)的雙快捷鍵? VSCode設(shè)置alt單擊可移動(dòng)光標(biāo)的技巧
相關(guān)文章
vscode插件怎么刪除？vscode中經(jīng)常需要安裝各種插件，很多插件并不常用，想要?jiǎng)h除不常用的插件，該怎么卸載插件呢？下面我們就來(lái)看看完全卸載vscode插件的技巧2021-12-22
vscode怎么編寫Maude程序? Maude插件在vscode的用法
vscode怎么編寫Maude程序？vscode中想要編寫Maude文件，需要使用Maude插件來(lái)實(shí)現(xiàn)，下面我們就來(lái)看看Maude插件在vscode的用法2021-12-22
vscode插件Markdown PDF插件轉(zhuǎn)換PDF錯(cuò)誤該怎么辦?
Markdown PDF插件轉(zhuǎn)換PDF錯(cuò)誤該怎么辦？VSCode中的插件Markdown PDF轉(zhuǎn)換PDF時(shí)Chromium下載失敗，提示Failed to download Chromium! 該怎么辦呢？下面我們就來(lái)看看詳細(xì)的解2021-12-17
VSCode中LeetCode插件怎么安裝并使用? LeetCode插件安裝教程
VSCode中LeetCode插件怎么安裝并使用？VSCode中想要安裝LeetCode插件，該怎么安裝，安裝后該怎么使用呢？下面我們就來(lái)看看LeetCode插件安裝教程2021-10-18
VSCode文件圖標(biāo)主題怎進(jìn)行美化? vscode文件圖標(biāo)插件的用法
VSCode文件圖標(biāo)主題怎進(jìn)行美化？VSCode項(xiàng)目創(chuàng)建了很多文件，想要美化一下文件的圖標(biāo)，方便查找和區(qū)分，該怎么美化呢？我們需要一個(gè)插件，下面我們就來(lái)看看vscode文件圖標(biāo)插2021-09-22
vscode怎么安裝插件? vscode插件的安裝的圖文教程
vscode怎么安裝插件？vscode中經(jīng)常需要安裝各種插件，該怎么搜索并安裝需要的插件呢？下面我們就來(lái)看看vscode插件的安裝的圖文教程2021-09-22
盤一盤那些提效/創(chuàng)意的vscode插件(小結(jié))
這篇文章主要介紹了盤一盤那些提效/創(chuàng)意的vscode插件(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)2020-10-13
不同設(shè)備間怎么快速同步vscode插件/配置信息?
不同設(shè)備間怎么快速同步vscode插件/配置信息？在不同的電腦上安裝vscode后，想要同步插件和配置信息，該怎么同步呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2020-07-13
VSCODE怎么安裝CSS Peek插件快速查看CSS定義?
VSCODE怎么安裝CSS Peek快速查看CSS定義？VSCODE中想要查看定位CSS定義，該怎么操作呢？我們需要添加一個(gè)擴(kuò)展程序，下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2020-06-09
vscode怎么安裝REST API插件并測(cè)試？vscode中有很多插件，想要安裝REST API插件，在測(cè)試 REST API (作為HTTP Client)的時(shí)候用的到，下面我們就來(lái)看看詳細(xì)的教程，需要的朋2020-01-07
