vscode中prettier插件怎么使用? vscode中prettier的用法

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