鐵人賽 Day2 -- Visual Studio Code 一鍵叫出HTML & 唯一好用快捷鍵

2021 iThome 鐵人賽

DAY 2

自我挑戰組

30天後能否自己做出一個簡單便利的訂便當系統(HTML、CSS、BootStrap、PHP、SQL、JavaScrip、JQuery)系列第 2 篇

13th鐵人賽

SKYDOG

2021-09-02 23:31:10

11110 瀏覽

分享至

下載完VSCode之後

Part1 : 我們可以在延伸模組的地方搜尋並安裝你所需要的模組

Part2 : 我們必須先來選擇我們的語法

可以在右上角新增檔案後->選取語言->HTML

Part3 : 一鍵快速叫出HTML架構

選擇好HTML語法後，打" ! + Tab "

就會馬上出現以下程式啦，是不是很方便呢!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

想當初用notepad++的我，每次都要一個一個慢慢打QQ

Part4 : 再來要來介紹一個快捷鍵，讓你寫Code更方便

其實快捷鍵一大堆，網路上也都查的到，但我覺得這個快捷鍵，是我唯一覺得最好用的，其他好像用滑鼠就可以解決

起因 : 在寫Code的時候一定會有很多名子一樣的東西都需要做變更(如下)
可是一個一個改實在太麻煩了該怎麼辦!!

<a href="" class="text">一個一個改好麻煩</a>
<a href="" class="text">一個一個改好麻煩</a>
<a href="" class="text">一個一個改好麻煩</a>
<a href="" class="text">一個一個改好麻煩</a>

這個快捷鍵就是 :

Ctrl + D

他的功用就是會為我們選取我們所要的，並可以一次進行修改

選取href
按下 Ctrl + D
即可直接對 herf 一次進行修改或者按左右鍵即可對該行程式碼的其他部分
一次進行修改
除了修改的部分之外，我覺得用 Ctrl + D 拿來找我要的 CSS 位置也滿方便的

例 : class="findme" 要找到他的 CSS 就直接選取 findme 按下 Ctrl + D 他就會自動跳到一樣有出現 findme 的位置啦。這個見仁見智，可能不是這樣用的，但我覺得這樣有時候也挺方便的哈哈

12.快到了，所以今天的鐵人賽就到這邊吧哈哈，我們鐵人賽Day3見!!

鐵人賽 Day1 -- HTML基本架構

鐵人賽 Day3 -- Div區塊到底是什麼 ? 能吃嗎 ?

系列文

30天後能否自己做出一個簡單便利的訂便當系統(HTML、CSS、BootStrap、PHP、SQL、JavaScrip、JQuery) 共 30 篇

RSS系列文訂閱系列文

9 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 則留言

Mao

iT邦研究生 5 級 ‧ 2021-09-12 23:44:31

跟你講一個更好用的，寫具有變數的程式語言，對變數名案 F2 修改名稱，所有變數都會跟著改。

此圖範例為，將變數 num 修改成 abc，注意最下面 console.log('num')是字串，所以不會修改到

回應
檢舉

登入發表回應

我要留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22132 篇

完賽人數

595 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

30天後能否自己做出一個簡單便利的訂便當系統(HTML、CSS、BootStrap、PHP、SQL、JavaScrip、JQuery)系列 第 2 篇