---
# System prepended metadata

title: VS Code 產生程式碼片段

---

# VS Code 產生程式碼片段
1. [snippet generator](https://snippet-generator.app/?description=bootstrap+%E7%92%B0%E5%A2%83%E5%BB%BA%E7%AB%8B&tabtrigger=bs5&snippet=%3C%21doctype+html%3E%0A%3Chtml+lang%3D%22en%22%3E%0A%0A%3Chead%3E%0A++%3C%21--+Required+meta+tags+--%3E%0A++%3Cmeta+charset%3D%22utf-8%22%3E%0A++%3Cmeta+name%3D%22viewport%22+content%3D%22width%3Ddevice-width%2C+initial-scale%3D1%22%3E%0A%0A++%3C%21--+Bootstrap+CSS+--%3E%0A++%3Clink+href%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fbootstrap%405.0.1%2Fdist%2Fcss%2Fbootstrap.min.css%22+rel%3D%22stylesheet%22%0A++++integrity%3D%22sha384-%2B0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7%2BAMvyTG2x%22+crossorigin%3D%22anonymous%22%3E%0A%0A++%3Ctitle%3EHello%2C+world%21%3C%2Ftitle%3E%0A%3C%2Fhead%3E%0A%0A%3Cbody%3E%0A++%3Ch1%3EHello%2C+world%21%3C%2Fh1%3E%0A%0A++%3C%21--+Optional+JavaScript%3B+choose+one+of+the+two%21+--%3E%0A%0A++%3C%21--+Option+1%3A+Bootstrap+Bundle+with+Popper+--%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fbootstrap%405.0.1%2Fdist%2Fjs%2Fbootstrap.bundle.min.js%22%0A++++integrity%3D%22sha384-gtEjrD%2FSeCtmISkJkNUaaKMoLD0%2F%2FElJ19smozuHV6z3Iehds%2B3Ulb9Bn9Plx0x4%22%0A++++crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E%0A%0A++%3C%21--+Option+2%3A+Separate+Popper+and+Bootstrap+JS+--%3E%0A++%3C%21--%0A++++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2F%40popperjs%2Fcore%402.9.2%2Fdist%2Fumd%2Fpopper.min.js%22+integrity%3D%22sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i%2BtQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p%22+crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E%0A++++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fbootstrap%405.0.1%2Fdist%2Fjs%2Fbootstrap.min.js%22+integrity%3D%22sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2%2Bxf0Uwh9KtT%22+crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E%0A++++--%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E&mode=vscode)

Step1
首先開啟VS Code，接著選擇 「喜好設定 / 使用者程式碼片段」的選項。
![](https://i.imgur.com/4j24Ssz.png)

![](https://i.imgur.com/rIknnnp.png)
Step2
接著輸入HTML。
![](https://i.imgur.com/UoE1aZs.png)
選擇html，再按ENTER鍵
Step3
這時會開啟html.json，而這個速碼的格式就是json，因此只需依照它的格式，進行填寫就可以了。
![](https://i.imgur.com/9xAZJqX.png)




打bs5


