React के लिए VS Code Setup
In this page:
Recommended VS Code Extensions
React work के लिए, ES7+ React/Redux/React-Native snippets extension handy JSX shortcuts जोड़ता है, और built-in JavaScript/TypeScript support पहले से बिना extra setup के JSX syntax समझता है।
उदाहरण: Installing the React Snippets Extension
# Install from the terminal (VS Code's `code` command must be on PATH)
code --install-extension dsznajder.es7-react-js-snippets
# Or from VS Code: Ctrl+Shift+X (Cmd+Shift+X on Mac), search
# "ES7+ React/Redux/React-Native snippets", click Install⚠️ Run this in your own terminal or Node.js environment.
Auto-Format on Save Enable करना
Prettier का VS Code extension install करना और 'Format on Save' enable करना हर बार जब आप file save करते हैं आपके JSX/JS को automatically एक consistent style में reformat करता है।
उदाहरण: Setting Up Prettier and Format on Save
$ code --install-extension esbenp.prettier-vscode
// .vscode/settings.json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
// .prettierrc
{
"semi": true,
"singleQuote": true,
"tabWidth": 2
}⚠️ Run this in your own terminal or Node.js environment.
Built-in Terminal Use करना
VS Code का integrated terminal (View > Terminal) आपको editor window छोड़े बिना npm run dev जैसे npm commands run करने देता है।
उदाहरण: Opening the Terminal and Starting the Dev Server
# Open the integrated terminal
# Windows/Linux: Ctrl + `
# Mac: Cmd + `
$ npm run dev
VITE v5.0.0 ready in 320 ms
➜ Local: http://localhost:5173/⚠️ Run this in your own terminal or Node.js environment.
- एक ESLint extension install न करना, type करते समय helpful warnings miss करना।
- Prettier setup skip करना और inconsistent code formatting में end up होना।
- Auto-save enable न करना, testing करते समय lost preview updates की ओर ले जाना।
- VS Code React development के लिए सबसे popular editor है।
- ESLint extension editor में directly code-quality issues surface करता है।
- Prettier extension code को consistently auto-format करता है।
- ES7+ React snippets जैसे extensions common component patterns लिखने की speed बढ़ाते हैं।
Applicable नहीं -- editor setup एक development-time concern है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: