YouTip

Visual Studio Code (VS Code for short) is a free, open-source code editor developed by Microsoft. It supports multiple programming languages and provides features such as syntax highlighting, intelligent code completion, code refactoring, and debugging.\\n\\nVS Code has a built-in terminal, allowing you to run command-line tools such as npm and yarn directly in the editor, making project building and management more convenient.\\n\\nIf you want a richer Vue.js development environment, you can install the Volar and Volar for TypeScript extensions, which provide Vue.js intelligent hints.\\n\\n> If you are not familiar with VS Code or haven't installed it yet, you can refer to: (#).\\n\\n### Why Choose VS Code for React Development?\\n\\n* **Intelligent Completion**: Perfect support for JSX, React Hooks, Props, and more.\\n* **Rich Plugins**: One-click installation of ESLint, Prettier, code snippets, and more to boost productivity.\\n* **Integrated Terminal**: Run commands like `npm run dev` directly in the editor.\\n* **Debugging Tools**: Built-in debugger combined with React DevTools for an excellent experience.\\n* **Cross-Platform**: Perfect support for Windows, macOS, and Linux.\\n* **Free and Open Source**: Maintained by Microsoft with an active community.\\n\\n* * *\\n\\n## Download and Install VS Code\\n\\n* Visit the official website: [https://code.visualstudio.com/](https://code.visualstudio.com/)\\n\\n* Click the big **Download** button and select your operating system:\\n\\n * Windows: Download the .exe installer\\n * macOS: Download the .dmg (drag to Applications)\\n * Linux: Choose .deb or .rpm depending on your distribution\\n\\n* Installation process:\\n\\n * Windows/macOS: Double-click the installer and follow the prompts (Next/Continue).\\n * Recommended: Check "Add to PATH" and "Register as code editor" (for convenient command-line access).\\n\\n* Verify installation:\\n\\n * Open VS Code, and you will see the welcome screen.\\n * Windows users can test by running `code --version` in the command line.\\n\\n### Open Your React Project\\n\\n1. Open VS Code.\\n\\n2. Method 1: Menu **File → Open Folder**, select your project folder (e.g., `my-first-react-app`).\\n\\n3. Method 2 (Recommended): In the terminal, navigate to the project directory, then open with one command:\\n\\ncd my-first-react-app code .\\n(The `code .` command opens the current folder directly in VS Code)\\n\\nNow you see the file explorer on the left, displaying the project structure (such as src, public, etc.).\\n\\n!(#)\\n\\n### Install Essential Extensions\\n\\nVS Code's power lies in its extensions. Click the **Extensions** icon in the left activity bar (four squares), or use the shortcut `Ctrl+Shift+X` (macOS: `Cmd+Shift+X`) to open the Extensions Marketplace.\\n\\nSearch and install the following extensions (click Install):\\n\\n!(#)\\n\\n* **ESLint** (Author: Microsoft)\\n\\n * Real-time code linting, officially recommended by React.\\n * Errors will be highlighted in red after installation.\\n\\n* **Prettier - Code: formatter** (Author: Prettier)\\n\\n * Automatically formats code for consistent style.\\n\\n* **ES7+ React/Redux/React-Native snippets** (Author: dsznajder)\\n\\n * Code snippet tool! Quickly generate components with shortcuts.\\n * Common snippets:\\n * `rafce` → Generate arrow function component + export default\\n * `rfc` → Generate function component\\n * `useState` → Quickly generate useState\\n\\n* **Path Intellisense** (Author: Christian Kohler)\\n\\n * Auto-completion for import paths (super useful when importing).\\n\\n* **Bracket Pair Colorizer 2** or built-in bracket coloring (VS Code 1.60+ has built-in support)\\n\\n * Different colors for brackets, easier to read nested JSX.\\n\\n* **GitLens** (Optional, but highly recommended)\\n\\n * Git enhancement, view code commit history.\\n\\n**React-Specific Recommendations** (Optional advanced):\\n\\n* **Tailwind CSS IntelliSense** (if using Tailwind)\\n* **React Developer Tools** (browser extension already installed, not needed here)\\n\\nAfter installation, restart VS Code (or press `Ctrl+Shift+P` → Reload Window).\\n\\n### Configure VS Code to Enhance React Development Experience\\n\\nPress `Ctrl+Shift+P` (macOS: `Cmd+Shift+P`) to open the Command Palette, type "Preferences: Open Settings (JSON)" to open `settings.json`.\\n\\nCreate `.vscode/settings.json` in the project root (recommended for project-level configuration), and add the following content:\\n\\n{ // Auto-format on save "editor.formatOnSave": true, // Default formatter: Prettier "editor.defaultFormatter": "esbenp.prettier-vscode", // ESLint auto-fix "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }, // Apply Prettier to JSX/TSX files "": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, // Show line numbers, indentation guides "editor.rulers": , "editor.guides.indentation": true}\\nSave to take effect. Now every time you save code, Prettier will automatically format, and ESLint will automatically fix common issues.\\n\\n**Verification**: Deliberately write some non-standard code (e.g., missing semicolons), save and see if it auto-fixes.\\n\\n### Actually Writing React Code: Creating a Component from Scratch\\n\\nIn the left Explorer, right-click the `src` folder → New Folder → create `components` folder.\\n\\nRight-click `components` → New File → create `Greeting.jsx`.\\n\\nUse code snippets to quickly generate a component:\\n\\n* Type `rafce` (react arrow function component export)\\n* Press Tab to auto-generate the template:\\n\\nimport React from 'react'const Greeting = () => { return ( )}export default Greeting\\nModify into a complete component (demonstrating state and Props):\\n\\n## Example\\n\\nimport{ useState } from 'react';\\n\\nconst Greeting =({ name ='Stranger'})=>{\\n\\nconst[count, setCount]= useState(0);\\n\\nreturn(\\n\\n\\n\\n);\\n\\n};\\n\\nexport default Greeting;\\n\\nIn `src/App.jsx`, import and use:\\n\\n## Example\\n\\nimport Greeting from './components/Greeting.jsx';\\n\\n// Add in return:\\n\\n\\n\\nSave all files (Ctrl+S), switch to the browser, and hot reload automatically shows the new component!\\n\\n**Experience Highlights**:\\n\\n* When typing `useState`, intelligent completion will suggest.\\n* When importing path `./components/Greeting.jsx`, Path Intellisense will auto-complete.\\n* After saving, Prettier automatically formats indentation.\\n* If there are errors, ESLint will highlight them in red in the problems panel (bottom).\\n\\n### Integrated Terminal and Debugging Tips\\n\\n**Built-in Terminal**: Menu Terminal → New Terminal, or Ctrl+` (backtick).\\n\\n* Directly run `pnpm dev`, server output will be here.\\n\\n**Debugging React Code**:\\n\\n1. Install browser extension **React Developer Tools** (if not already installed).\\n2. In VS Code, press F5 to start debugging (requires launch.json configuration first, but for beginners use browser DevTools).\\n3. In browser F12 → Components tab to view your Greeting component's Props and state.\\n\\n**Common Shortcuts** (Must memorize):\\n\\n* Ctrl + S: Save\\n* Ctrl + /: Comment line\\n* Alt + ↑/↓: Move line\\n* Ctrl + D: Multi-cursor select same word\\n* Ctrl + Shift + P: Command Palette (universal)\\n\\n### Mini Exercise: Build a Card Component\\n\\n1. Create `components/Card.jsx`, use `rafce` to generate.\\n2. Implement a card component that receives three Props: title, content, imageUrl.\\n3. Use in App.jsx twice, displaying different content.\\n4. Add some inline styles to beautify.\\n\\nAfter completion, your page will have multiple beautiful cards!\\n\\n### Step 1: Create Card.jsx Component\\n\\n1. In the `src` folder, right-click → New Folder → create `components` folder (if not already exists).\\n\\n2. Right-click `components` folder → New File → create `Card.jsx`.\\n\\n3. In `Card.jsx`, type `rafce` (press Tab to auto-generate template), then modify to the following code:\\n\\n## Card.jsx File Code:\\n\\nimport React from 'react';\\n\\nconst Card =({ title, content, imageUrl })=>{\\n\\nreturn(\\n\\n\\n\\n);\\n\\n};\\n\\nexport default Card;\\n\\n**Explanation**:\\n\\n* Using destructured Props: `{ title, content, imageUrl }`.\\n* Inline styles for beautification: rounded corners, shadows, responsive images, spacing, etc., making the card look modern and professional.\\n* Conditional image rendering: If no `imageUrl`, image is not displayed (achieved with `&&`).\\n\\n#### Step 2: Modify App.jsx, Use Card Component Twice\\n\\nOpen `src/App.jsx`, replace content with the following code (keeps some original structure, removes default counter, focuses on card display):\\n\\n## src/App.jsx File Code:\\n\\nimport'./App.css';\\n\\nimport Card from './components/Card.jsx';\\n\\nfunction App(){\\n\\nreturn(\\n\\n\\n\\n);\\n\\n}\\n\\nexport default App;\\n\\n**Explanation**:\\n\\n* Import `Card` component.\\n* Use `` twice, passing different Props.\\n* Outer div of App uses flex layout, allowing multiple cards to arrange horizontally (responsive wrapping).\\n* Image URLs use official public images (React's small icon and Vite's Logo), no local resources needed, loaded directly online.\\n\\n!(#)\\n\\n#### Step 3: Run and View the Result\\n\\n1. Save all files (Ctrl+S).\\n2. If the development server is not running, execute in VS Code terminal: npm run dev\\n3. Open http://localhost:5173 in browser, you will see two (or more) beautiful cards, centered, with images, titles, and content!\\n\\n**Effect Preview (Text Description)**:\\n\\n* Cards have shadows and rounded corners, looking like Material Design style.\\n* Images occupy full width at the top, text has comfortable spacing.\\n* Light gray background, white cards, visually clear.