📌 Guide to Using VS Code from Start to Pro 🚀

📌 Guide to using VS Code from scratch to pro 🚀

🔹 VS Code?

VS Code (Visual Studio Code) is the most popular code writing tool because it is fast, free, and supports multiple languages such as HTML, CSS, JavaScript, Python, PHP, and more.

✅ Support Extensions

✅ Easy to use with Auto Complete (Intel)

✅. Built-in Git and Debugger support.

1️⃣ Install the VS Code on the computer.

🔹 Download and install

📌 Download from the official website 👉 /

✅ Supports Windows, macOS and Linux.

🔹 Install Step (Windows / Mac)

1. Download VS Code file from the web

2.Install the program by following the instructions (Next > Next > Install)

3. Open the VS Code program

2️⃣ Default Settings VS Code

🔹 Change the VS Code to Thai

1.Press Ctrl + Shift + X (or click the Extensions menu on the left)

2. Search for "Thai Language Pack for VS Code"

3. Press Install and restart the program.

🔹 Open Dark Mode (Black Theme)

1.Go to File > Preferences > Color Theme

2. Select Dark + (default dark) or your favorite theme.

🔹 Set Auto Save (Auto Save)

1. Go to File > Preferences > Settings

2. Find "Auto Save" and select After Delay

3️⃣ Start building a new project.

🔹 Create a folder for code

1. Open VS Code

2. Press File > Open Folder...

3. Select the folder you want to store code

🔹 Create a new file.

1. Press File > New File or press Ctrl + N.

2. Type the code and press Ctrl + S to save.

3.Name a file such as index.html, style.css or script.js.

4️⃣ Start writing HTML + CSS + JavaScript code.

🔹 example index.html. file

< html lang = "th" >

< head >

< meta charset = "UTF-8" >

< meta name = "viewport" content = "width = device-width, initial-scale = 1.0" >

< title > My First Web < / title >

< link rel = "stylesheet" href = "style.css" >

< / head >

< body >

< h1 > Hello! This is my web. 🚀 < / h1 >

< button onclick = "sayHello ()" > Press this button < / button >

< script src = "script.js" > < / script >

< / body >

< / html >

🔹. Example file style.css

Body {

Background-color: lightblue;

Font-family: Arial, sans-serif;

Text-align: center;

}

Button {

padding: 10px 20px;

font-size: 16px;

Background-color: green;

Color: white;

Border: none;

Cursor: pointer;

}

Button: hover {

Background-color: darkgreen;

}

🔹. File sample script.js

sayHello () function {

alert ("Hello! Welcome 🚀");

}

5️⃣ Open the web on Browser with Live Server.

🔹 Normally, if index.html is turned on directly, JavaScript using fetch () or various APIs is not supported.

🔹 Live Server is recommended to open the professional web.

🔹 How to install Live Server

1.Press Ctrl + Shift + X and search "Live Server"

2. Press Install

3.Open the index.html file and right click. Select "Open with Live Server."

✅ The web page opens in an automatic browser and updates immediately when editing the code.

6️⃣ Install Extensions to Know

🔹 Press Ctrl + Shift + X to open Extensions and search.

🔹 Press Install to install

🔹 Recommended Extension for HTML + CSS + JavaScript

✅ Live Server → Auto Open Web

✅ Prettier - Code formatter → Arrange the code beautifully

✅ HTML CSS Support → Display CSS Write Time Instructions

✅ JavaScript (ES6) Snippets → Add Auto Complete for JavaScript

✅ Auto Rename Tag → Help Auto Rename HTML Tags

7️⃣ Use VS Code with Git (store code on GitHub)

🔹 Git allows saving all versions of code changes.

🔹 VS Code has built-in Git. No Terminal required.

🔹 How to use Git in the VS Code

1.Open the VS Code and create a new project

2.Press Ctrl + Shift + G to open Source Control (Git).

3. Press Initialize Repository

4. Press Commit Changes to save the changes.

5. To upload to GitHub, install GitHub Extension.

📌 If using GitHub, apply at /

8️⃣ Customize the VS Code to run faster.

🔹. Close the Welcome Page.

1. Go to File > Preferences > Settings

2. Search for "workbench. startupEditor"

3. Choose "none."

🔹 Closed Minimap (small code map)

1. Go to File > Preferences > Settings

2. Search for "editor. Minimap.enable."

3. Turn off the "false" value

🔹 Use Snippets to help type code faster.

✅ Type HTML: 5 and then press Tab to create an automatic HTML structure.

✅ Type div and press Tab to create < div > < / div > quickly.

📌 Summary of VS Code usage from scratch

✅ Install VS Code from /

✅ Set up language, theme, Auto Save to make it easier to work.

✅ Create index.html file, style.css, script.js

✅ Use Live Server to view the results on the browser.

✅ Install Extensions that make writing code easier.

✅ use Git and GitHub to store and share code.

🔥 Open the VS Code and create your first web! 🚀