網頁開發 網頁設計

[教學] Visual Studio Code 內建原始碼格式化功能,一鍵快速讓亂七八槽的HTML與JS碼,變得條理有致

2019/01/02

梅問題-[教學] Visual Studio Code 內建原始碼格式化功能,一鍵快速讓亂七八槽的HTML與JS碼,變得條理有致
  由於現在網頁的複雜度愈來愈高,已無法再像以前,透過Adobe Dreamweaver即見即所得的方式,進行網頁的編輯,因此大部分的時候,都得用手KEY,才能讓網頁達到理想中的效果,雖然大家知道,在編輯原始碼,可透過Tab鍵,進整理原始碼,但不得不說的是,有時在趕件時,雖然原始碼有縮排,但卻會一下前一下後,看起來有點混亂,因此先前梅干曾分享過Sublime Text的HTML格式化外掛,讓雜亂的HTML的原始碼,也能快速變得整整齊齊的。

最近跳到微軟所推出的VS Code時,也已慢慢感受到VS Code強大的編輯功能,但遇到HTML碼雜亂,與壓縮過的HTML碼,那還真是跟天書一樣,而VS Code竟然有個超強大功能,那就是內建了原始碼格式化功能,除了可將雜亂或壓縮過的HTML還原外,就連Javascript也可以,因此想知道,如何使用VS Code來格式化原始碼的朋友,現在就一塊來看看吧!


Step1
無論是壓縮過還是亂七八糟的HTML原始碼,當透過VS Code開啟後,將所有的碼全選起來。
梅問題-[教學] Visual Studio Code 內建原始碼格式化功能,一鍵快速讓亂七八槽的HTML與JS碼,變得條理有致
Step2
接著神奇的時刻要到了,再按下鍵盤的Alt+Shift+F鍵,立馬就可將HTML變成條理有致,同時原始碼也會排的漂漂亮亮的。
梅問題-[教學] Visual Studio Code 內建原始碼格式化功能,一鍵快速讓亂七八槽的HTML與JS碼,變得條理有致
Step3
接下來Javascript也一樣,開啟後再全選。
梅問題-[教學] Visual Studio Code 內建原始碼格式化功能,一鍵快速讓亂七八槽的HTML與JS碼,變得條理有致
Step4
一樣的再按下Alt+Shift+F鍵,立即就可將Javascript碼還原,是不是感到超好用的呀!且內建就有,完全不用再加裝任何的套件。
梅問題-[教學] Visual Studio Code 內建原始碼格式化功能,一鍵快速讓亂七八槽的HTML與JS碼,變得條理有致