https://github.com/amarnarayandwivedi/mlsagit
test repo
https://github.com/amarnarayandwivedi/mlsagit
Last synced: 7 months ago
JSON representation
test repo
- Host: GitHub
- URL: https://github.com/amarnarayandwivedi/mlsagit
- Owner: AmarNarayanDwivedi
- Created: 2024-12-20T17:13:36.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-12-28T12:36:15.000Z (10 months ago)
- Last Synced: 2025-01-20T09:13:39.630Z (9 months ago)
- Size: 2.93 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Introduction to VS Code for Developers
# Introduction to VS Code for Developers
This guide introduces key features of Visual Studio Code (VS Code) for developers. It covers topics like setting up the editor, working with files, using Emmet for HTML templates, customizing settings, and installing extensions.
---
## 1: Downloading VS Code
1. Go to [Visual Studio Code website](https://code.visualstudio.com/).
2. Download the version suitable for your operating system.
3. Install the application by following the instructions provided.
4. Open VS Code after installation to begin working with your code.
---
## 2: Accessing Files in VS Code
1. **Open a File:**
- Go to `File > Open File` or use the shortcut `Ctrl+O` (`Cmd+O` on macOS).
2. **Explorer Sidebar:**
- Click on the Explorer icon on the sidebar or use `Ctrl+Shift+E` to open the file explorer.
3. **Open Folder:**
- Go to `File > Open Folder` or use `Ctrl+K Ctrl+O` to open an entire folder in VS Code.
---
## 3: Sidebar of VS Code
The sidebar in VS Code provides access to important panels:
- **Explorer:** File and folder navigation.
- **Search:** Quickly search for text in files.
- **Source Control:** Git integration and version control.
- **Extensions:** Install and manage extensions.
- **Run/Debug:** Run and debug your code.
---
## 4: Creating a File in VS Code
1. **Create New File:**
- Use `Ctrl+N` (`Cmd+N` on macOS) to create a new file.
2. **Save File:**
- Save the file by clicking `File > Save` or pressing `Ctrl+S` (`Cmd+S` on macOS).
3. **Naming Files:**
- Save the file with appropriate extensions, e.g., `.html`, `.js`, `.css`.
---
## 5: Supported File Types in VS Code
VS Code supports a wide range of file types and extensions, including but not limited to:
- **HTML** (.html)
- **CSS** (.css)
- **JavaScript** (.js)
- **Python** (.py)
- **JSON** (.json)
- **Markdown** (.md)
- **TypeScript** (.ts)
You can install extensions for even more languages and file formats.
---
## 6. Creating an HTML File Template with "!" (Emmet)
In Visual Studio Code, you can use the Emmet abbreviation `!` to quickly generate an HTML5 boilerplate template.
### Steps:
1. Open VS Code and create a new file (`Ctrl+N` or `Cmd+N` on macOS).
2. Type `!` in the file.
3. Press `Tab` (or `Enter` in some setups) to expand it into a full HTML5 template.
### Example Template Generated by Emmet:
```html
Document
```
### Adding Classes and IDs:
Once you have the HTML template, you can quickly add **classes** and **IDs** to HTML elements. Here's how they are used:
- **Classes** are used to apply the same style to multiple elements.
- **IDs** are unique and can be used to identify specific elements for styling or scripting.
#### Example with Classes and IDs:
```html
Welcome to My Website
This is a sample paragraph inside a container.
```
### 7: Working with Classes and IDs, and Using Multicursors
### Creating and Using Classes & IDs in HTML:
- **Classes**: Use classes to apply styles to multiple elements. A class can be shared by many elements in the HTML.
- **IDs**: Use IDs for unique identification of an element. IDs must be unique within the page and are commonly used for styling specific elements or selecting elements in JavaScript.
#### Example with Classes and IDs:
```html
Welcome to My Website
This is a sample paragraph inside a container.
```
## 8: Live Server Extension and Themes
### Install Live Server Extension:
1. Open the Extensions Marketplace by pressing `Ctrl+Shift+X` (Windows/Linux) or `Cmd+Shift+X` (macOS).
2. In the search bar, type **Live Server**.
3. Click **Install** on the Live Server extension to add it to your VS Code setup.
### Launch Live Preview:
- After the installation, you can launch a live preview of your HTML file by:
1. Right-click on an HTML file in your workspace.
2. Select **"Open with Live Server"**.
- This will open the HTML file in your default browser, automatically refreshing the page whenever you make changes to the file.
### Themes and Material Icon Extensions:
1. **Material Theme**:
- A popular, sleek, and modern theme for a clean and visually appealing interface.
- To install, search for "Material Theme" in the Extensions Marketplace and click **Install**.
2. **Material Icon Theme**:
- Adds Material Design-inspired icons to the file explorer for better organization and a more intuitive workspace.
- To install, search for "Material Icon Theme" in the Extensions Marketplace and click **Install**.
Both extensions can be easily installed from the Extensions Marketplace for a personalized and enhanced editor experience.
---