Visual Studio Code(簡稱 VS Code)是一個使用 Monaco Editor 作為其底層的免費原始碼程式碼編輯器,會選擇作為開發用軟體,有以下幾個優點
安裝流程可以依照官方文件
列幾個特別、好用的快捷鍵 詳細請見官方文件Ctrl + D
快速選取下一個同名變數Ctrl + H
取代Ctrl + P
選取檔案Ctrl+ Shift+ L
一次選取檔案內所有相同文字Ctrl + Shift + K
整行刪除Ctrl + Alt + ↑/↓
垂直選取Alt + 左鍵
多重選取Alt + ↑/↓
程式碼整行搬動F2
重新命名變數名稱
學習可以增加開發速度,以下列一些基本的應用官方文件
子元素 Child : >
|舉例 div>ul>li
+tab ,會變成 ↓
<div>
<ul>
<li></li>
</ul>
</div>
同一層 Sibling : +
|舉例 div+p+bq
+tab ,會變成 ↓
<div></div>
<p></p>
<blockquote></blockquote>
重複 Multiplication : *
|舉例 ul>li*5
+tab ,會變成 ↓
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
群組 Grouping : ()
|舉例 (div>dl>(dt+dd)*3)+footer>p
+tab ,會變成 ↓
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
Class : .
、ID : #
|舉例 div#header+div.page+div#footer.class1.class2.class3
+tab ,會變成 ↓
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
Class加變數 Item numbering : $
|舉例 ul>li.item$*5
+tab ,會變成 ↓
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
標籤內文字 Text : {}
|舉例 a{Click me}
+tab ,會變成 ↓
<a href="">Click me</a>
Dark Reader 網頁啟用黑夜模式 愛護你的眼睛
JSON Formatter 看API不再眼花
Wappalyzer - Technology profiler可以看網頁使用什麼樣的語言、技術
使用情況 ↓
Wappalyzer - Technology profiler 漂亮的截圖整個頁面