\\n\\n# Setting Up Your Code Editor\\n\\n## Introduction\\nIn this lesson, we'll set up the most fundamental tool in your development journey: your code editor. This is where you'll spend most of your time writing, testing, and debugging code, so it's crucial to get comfortable with it from the start.\\n\\n## What is an IDE?\\n\\n### Definition\\nAn IDE (Integrated Development Environment) is a software application that provides comprehensive facilities for software development. Think of it as your complete workshop for writing code.\\n\\n### Key Components\\n1. **Code Editor**\\n - Where you write and edit code\\n - Provides syntax highlighting\\n - Helps with code formatting\\n - Makes code easier to read and write\\n\\n2. **Compiler/Interpreter**\\n - Runs your code\\n - Translates your code into executable instructions\\n - Helps test your applications\\n\\n3. **Debugging Tools**\\n - Help find and fix errors\\n - Provide error messages and suggestions\\n - Make problem-solving easier\\n\\n## Setting Up Visual Studio Code\\n\\n### Why VS Code?\\n- Free and open-source\\n- Lightweight yet powerful\\n- Excellent community support\\n- Popular among developers\\n- Great for beginners and experts alike\\n\\n### Installation Steps\\n1. Visit [code.visualstudio.com](https://code.visualstudio.com)\\n2. Download the version for your operating system\\n3. Run the installer\\n4. Follow the installation prompts\\n\\n### Essential VS Code Features\\n\\n#### 1. Interface Navigation\\n- **File Explorer** (Ctrl/Cmd + Shift + E)\\n - Browse and manage your files\\n - Create new files and folders\\n - Navigate your project structure\\n\\n- **Search** (Ctrl/Cmd + Shift + F)\\n - Find text across all files\\n - Replace text globally\\n - Search with regular expressions\\n\\n- **Source Control** (Ctrl/Cmd + Shift + G)\\n - Track changes in your code\\n - Commit and manage versions\\n - Integrate with Git\\n\\n#### 2. Terminal Integration\\nTo open the integrated terminal:\\n- Use ``` Ctrl + ` ``` (backtick)\\n- Or View → Terminal from the menu\\n- Basic terminal commands:\\n ```bash\\n ls # List files (dir on Windows)\\n cd # Change directory\\n clear # Clear terminal\\n code . # Open VS Code in current directory\\n ```\\n\\n#### 3. Essential Extensions\\nInstall these extensions to enhance your development experience:\\n1. **ESLint**\\n - Helps find and fix code problems\\n - Enforces coding standards\\n - Improves code quality\\n\\n2. **Prettier**\\n - Automatically formats your code\\n - Maintains consistent style\\n - Saves time on formatting\\n\\n3. **Live Server**\\n - Runs your web pages locally\\n - Auto-refreshes on save\\n - Great for web development\\n\\n### Important Keyboard Shortcuts\\n```\\nCtrl/Cmd + S # Save file\\nCtrl/Cmd + C # Copy\\nCtrl/Cmd + V # Paste\\nCtrl/Cmd + Z # Undo\\nCtrl/Cmd + Shift + P # Command palette\\nCtrl/Cmd + P # Quick file open\\n```\\n\\n## Writing Your First Code\\nLet's create and run a simple HTML file:\\n\\n1. Create a new file (`index.html`)\\n2. Add basic HTML content:\\n ```html\\n

Hello World!

\\n ```\\n3. Save the file (Ctrl/Cmd + S)\\n4. Open in browser or use Live Server\\n\\n## Best Practices\\n\\n### 1. File Organization\\n- Keep related files together\\n- Use clear, descriptive names\\n- Create separate folders for different projects\\n\\n### 2. Regular Saving\\n- Save frequently (Ctrl/Cmd + S)\\n- Watch for the unsaved dot indicator\\n- Enable auto-save if preferred\\n\\n### 3. Terminal Usage\\n- Get comfortable with basic commands\\n- Use the integrated terminal\\n- Practice navigation and file operations\\n\\n## Troubleshooting Common Issues\\n\\n### 1. Installation Problems\\n- Ensure you have admin rights\\n- Check system requirements\\n- Use official download sources\\n\\n### 2. Extension Issues\\n- Keep extensions updated\\n- Disable conflicting extensions\\n- Restart VS Code after installation\\n\\n### 3. Performance\\n- Don't install too many extensions\\n- Regular restart of VS Code\\n- Keep your system updated\\n\\n## Next Steps\\n\\n1. **Practice Navigation**\\n - Create and manage files\\n - Use the integrated terminal\\n - Try keyboard shortcuts\\n\\n2. **Customize Your Editor**\\n - Explore themes\\n - Adjust font size\\n - Configure auto-save\\n\\n3. **Prepare for Next Lesson**\\n - Keep VS Code open\\n - Get comfortable with the interface\\n - Practice basic operations\\n\\n## Additional Resources\\n- [VS Code Documentation](https://code.visualstudio.com/docs)\\n- [Keyboard Shortcuts Reference](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf)\\n- [VS Code Tips and Tricks](https://code.visualstudio.com/docs/getstarted/tips-and-tricks)\\n\\nRemember: Your code editor is your primary tool as a developer. Take time to get comfortable with it, and don't worry about mastering everything at once. Focus on the basics we covered in the video, and you'll naturally learn more features as you need them.\\n\\nHappy coding! 🚀\",\"created_at\":1740871522,\"id\":\"d3ac1f40bf07c045e97c43b6cbdf6f274de464d1c9d5a5c04d04d50fc12156c0\",\"kind\":30023,\"pubkey\":\"f33c8a9617cb15f705fc70cd461cfd6eaf22f9e24c33eabad981648e5ec6f741\",\"sig\":\"380c060f8536549749f5d81bb052f218491b76f10544eaf3c255be3a21fad5bdeb65d89e9d28290b16d48134fc898008b14f6dc390a92cb23933ccdfb30dcc86\",\"tags\":[[\"title\",\"Setting up your Code Editor\"],[\"summary\",\"In this lesson, we'll set up the most fundamental tool in your development journey: your code editor. This is where you'll spend most of your time writing, testing, and debugging code, so it's crucial to get comfortable with it from the start.\"],[\"image\",\"https://plebdevs-bucket.nyc3.cdn.digitaloceanspaces.com/images/starter-thumbnail-1.png\"],[\"d\",\"f93827ed-68ad-4b5e-af33-f7424b37f0d6\"],[\"t\",\"video\"],[\"t\",\"document\"],[\"t\",\"beginner\"],[\"r\",\"https://docs.google.com/presentation/d/1TC2BcHMa8zHVfAafwgXGEhUS5beTHUp5UsaPwWYty2w/edit?usp=sharing\"]]}\n\nREAL EXAMPLE VIDEO RESOURCE FREE NOSTR:\n\n{\"content\":\"

\",\"created_at\":1751292222,\"id\":\"abd1b6682aaccbaf4260b0da05db07caa30977f663e33eb36eacc56d85e62fa7\",\"kind\":30023,\"pubkey\":\"f33c8a9617cb15f705fc70cd461cfd6eaf22f9e24c33eabad981648e5ec6f741\",\"sig\":\"6057c73905eb00f8560926367db3126d73ad72efb2439ee5ddb34ae294f64881787194a23bcf2c9a7b8e837f7d1e207138928fd2895315f47c6338ee460a79c9\",\"tags\":[[\"d\",\"6e138ca7-fa4f-470c-9146-fec270a9688e\"],[\"title\",\"Build a Lightning Wallet in 20 Minutes\"],[\"summary\",\"Build a Lightning Wallet in just about 20 mins leveraging the FREE Voltage MutinyNet Lightning Node's to make it easier than ever to build on Bitcoin & Lightning and make REAL payments on a REAL network.\"],[\"image\",\"https://plebdevs-bucket.nyc3.cdn.digitaloceanspaces.com/images/build-lightning-wallet-20-mins.png\"],[\"i\",\"youtube:plebdevs\",\"V_fvmyJ91m0\"],[\"t\",\"lightning\"],[\"t\",\"workshop\"],[\"t\",\"video\"],[\"published_at\",\"1751292222\"],[\"r\",\"https://tinyurl.com/20-min-lightning\"],[\"r\",\"https://github.com/AustinKelsay/20-min-lightning-workshop\"]]}\n\nREAL EXAMPLE DOCUMENT RESOURCE FREE NOSTR:\n\n{\"content\":\"# Setting Up a React App from Scratch: A Minimal Guide\\n\\n## Prerequisites\\n\\n- Node.js and npm installed on your machine\\n- A text editor of your choice\\n\\n## Step 1: Create a New Project Directory\\n\\n```bash\\nmkdir my-react-app\\ncd my-react-app\\n```\\n\\n## Step 2: Initialize the Project\\n\\n```bash\\nnpm init -y\\n```\\n\\nThis creates a package.json file with default values.\\n\\n## Step 3: Install Dependencies\\n\\n```bash\\nnpm install react react-dom\\nnpm install --save-dev parcel @babel/preset-react\\n```\\n\\n## Step 4: Create Project Structure\\n\\nCreate the following files and directories:\\n\\n```\\nmy-react-app/\\n├── src/\\n│ ├── index.html\\n│ └── index.js\\n└── package.json\\n```\\n\\n## Step 5: Set Up HTML\\n\\nIn src/index.html, add the following content:\\n\\n```html\\n\\n\\n\\n \\n \\n My React App\\n\\n\\n

\\n \\n\\n\\n```\\n\\n## Step 6: Create React Entry Point\\n\\nIn src/index.js, add the following content:\\n\\n```javascript\\nimport React from 'react';\\nimport ReactDOM from 'react-dom/client';\\n\\nconst App = () => {\\n return

Hello, React!

;\\n};\\n\\nconst root = ReactDOM.createRoot(document.getElementById('root'));\\nroot.render();\\n```\\n\\n## Step 7: Configure Babel\\n\\nCreate a .babelrc file in the project root:\\n\\n```json\\n{\\n \\\"presets\\\": [\\\"@babel/preset-react\\\"]\\n}\\n```\\n\\n## Step 8: Update package.json Scripts\\n\\nAdd the following scripts to your package.json:\\n\\n```json\\n\\\"scripts\\\": {\\n \\\"start\\\": \\\"parcel src/index.html\\\",\\n \\\"build\\\": \\\"parcel build src/index.html\\\"\\n}\\n```\\n\\n## Step 9: Run the Development Server\\n\\n```bash\\nnpm start\\n```\\n\\nYour app should now be running at http://localhost:1234.\\n\\n## Step 10: Build for Production\\n\\nWhen you're ready to deploy:\\n\\n```bash\\nnpm run build\\n```\\n\\nThis will create a dist folder with your optimized production build.\\n\\n---\\n\\nCongratulations! You've set up a React app from scratch using Parcel. This setup provides a lightweight and modern development environment with minimal overhead.\",\"created_at\":1731696272,\"id\":\"758149694299ce464c299f9b97a2c6a3e94536eeeeb939fa981d3b09dbf1cf11\",\"kind\":30023,\"pubkey\":\"f33c8a9617cb15f705fc70cd461cfd6eaf22f9e24c33eabad981648e5ec6f741\",\"sig\":\"4389b364746a27a0c650adb14ab043475eb66cfde20ccaa00d029d91c06a9863469e7e1db0627ece0f205122cad5d34efd77bf668fef77e34404b9cb925a8220\",\"tags\":[[\"d\",\"e25f3d3b-f28b-4edd-a325-380564e6db7d\"],[\"title\",\"Setting Up a React App from Scratch: A Minimal Guide\"],[\"summary\",\"This guide will walk you through setting up a React app manually, using Parcel as a bundler for its simplicity and efficiency.\"],[\"image\",\"https://miro.medium.com/v2/resize:fit:1200/1*jfpk9Pld9ZGh9f68NMb-Cg.jpeg\"],[\"t\",\"guide\"],[\"t\",\"document\"],[\"published_at\",\"1731696272\"],[\"r\",\"https://parceljs.org/recipes/react/\"]]}\n","created_at",1764775605,"id","8727ffe6d9ffd94e3828ca01bc3d9a69333938bbcd001eeb33b349b7cd0e4db5","kind",30023,"pubkey","6260f29fa75c91aaa292f082e5e87b438d2ab4fdf96af398567b01802ee2fcd4","sig","120771a94379f5b51ff4df8b8efb42c16b94632602f658b6d81689441f29f62c9537a3ed1b57c79667a731db7b378e93c78c8c14baf00572cc4ddfe132d1a2a3","tags",[28,29,30,31,32,33,34,35],[49,50],[47,48],[45,46],[43,44],[41,42],[39,12],[39,40],[36,37,38],"r","https://nostr.com","best","t","document","image","https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.pinimg.com%2Foriginals%2F65%2Fc4%2F99%2F65c499aab4e523727eb6925ac49fcf1d.jpg&f=1&nofb=1&ipt=ef8ae099333a325d89acdff7af2f7adec976207c203904b8acc504ec6e44d715","published_at","1764775605","summary","content data models testing testing testing","title","Replay doc - content","d","9f7a9d7e-a107-4182-96cf-1eeaa722a58a"]

asdsadasf

Replay doc - content