Разработка React с VSCode

Visual Studio Code (VS Code) — это бесплатный редактор кода с открытым исходным кодом, разработанный Microsoft. Он поддерживает множество языков программирования и предоставляет такие функции, как подсветка синтаксиса, интеллектуальное автодополнение кода, рефакторинг кода и отладка.

В VS Code есть встроенный терминал, позволяющий запускать такие инструменты командной строки, как npm и yarn, прямо в редакторе, что делает сборку и управление проектом удобными.

Если вы хотите получить более полноценную среду разработки Vue.js, можно установить расширения Volar и Volar for TypeScript, которые обеспечивают интеллектуальные подсказки для Vue.js.

Если вы ещё не знакомы с VS Code или не установили его, можете обратиться к:Учебник VSCode。

Почему стоит выбрать VS Code для разработки на React?

Умное автодополнение: Идеальная поддержка JSX, React Hooks, Props и т. д.

Богатый набор плагинов: Установка ESLint, Prettier, фрагментов кода и т. д. в один клик для повышения эффективности.

Встроенный терминал: Запуск прямо в редакторе`npm run dev`и другие команды.

Инструменты отладки: Встроенный отладчик + React DevTools в одном — опыт божественного уровня.

Кроссплатформенность: Windows, macOS и Linux полностью поддерживаются.

Бесплатно и с открытым исходным кодом: Поддерживается Microsoft, активное сообщество.

Скачивание и установка VS Code

Посетите официальный сайт:https://code.visualstudio.com/
Нажмите большую кнопкуDownload, выберите вашу операционную систему:
- Windows: Скачайте установщик .exe
- macOS: Скачайте .dmg (перетащите в Applications)
- Linux: выберите .deb или .rpm в зависимости от вашего дистрибутива
Процесс установки:
- Windows/macOS: дважды щёлкните установщик и нажимайте Next/Continue до конца.
- Рекомендуется: отметьте «Add to PATH» и «Register as code editor» (для удобного открытия из командной строки).
Проверьте установку:
- Откройте VS Code, и вы увидите приветственный экран.
- Пользователи Windows могут ввести следующее в командной строкеcode --versionдля тестирования.

Откройте ваш проект React

Откройте VS Code.
Способ 1: менюFile → Open Folder, выберите папку вашего проекта (например,my-first-react-app）。
Способ 2 (рекомендуется): В терминале перейдите в каталог проекта, затем откройте одним щелчком:
```
cd my-first-react-app
code .
```
（code .Команда откроет текущую папку непосредственно в VS Code.)

Теперь вы видите проводник файлов слева, отображающий структуру проекта (например, src, public и т. д.).

Установите необходимые плагины (расширения)

Сила VS Code заключается в его расширениях. Нажмите на значокExtensions(четыре квадрата) на левой панели действий или нажмите сочетание клавишCtrl+Shift+X（macOS: Cmd+Shift+X), чтобы открыть магазин расширений.

Найдите и установите следующие расширения (нажмите «Установить»):

ESLint(Автор: Microsoft)
- Линтинг кода в реальном времени, официально рекомендованный React.
- После установки он будет отмечать ошибки в вашем коде красным.
Prettier - Code formatter(Автор: Prettier)
- Автоматически форматирует код, чтобы поддерживать единообразный стиль.
ES7+ React/Redux/React-Native snippets(Автор: dsznajder)
- Мощный инструмент для сниппетов кода! Введите сокращение, чтобы быстро создавать компоненты.
- Общие сниппеты:
  - rafceСгенерировать компонент в виде стрелочной функции + export default
  - rfcСгенерировать функциональный компонент
  - useStateБыстро сгенерировать useState
Path Intellisense(Автор: Christian Kohler)
- Автоматическое дополнение путей импорта (суперполезно при импорте).
Bracket Pair Colorizer 2Или встроенная раскраска скобок (встроена в VS Code 1.60+)
- Цветовая маркировка скобок облегчает чтение вложенного JSX.
GitLens(Необязательно, но настоятельно рекомендуется)
- Расширение возможностей Git, просмотр истории коммитов.

Рекомендации для React(Необязательно, для продвинутых):

Tailwind CSS IntelliSense(Если используете Tailwind)
React Developer Tools(Расширение для браузера уже установлено, здесь не требуется)

После установки перезапустите VS Code (или нажмитеCtrl+Shift+P → Reload Window）。

Настройте VS Code, чтобы улучшить разработку на React

нажмитеCtrl+Shift+P（macOS: Cmd+Shift+P), чтобы открыть палитру команд, введите "Preferences: Open Settings (JSON)", чтобы открытьsettings.json。

Создайте в корневом каталоге проекта.vscode/settings.json(рекомендуется конфигурация на уровне проекта), добавьте следующее:

{
  // 保存时自动格式化
  "editor.formatOnSave": true,
  // 默认使用 Prettier 格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // ESLint 自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // JSX/TSX 文件也应用 Prettier
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // 显示行号、缩进指南
  "editor.rulers": [80],
  "editor.guides.indentation": true
}

Вступает в силу после сохранения. Теперь каждый раз при сохранении кода Prettier будет автоматически форматировать, а ESLint — автоматически исправлять распространённые проблемы.

Проверьте: намеренно напишите нестандартный код (например, без точек с запятой), сохраните его и посмотрите, исправится ли он автоматически.

Практика написания кода на React: создание компонента с нуля

В левой панели Explorer щёлкните правой кнопкой мышиsrcпапку → New Folder → создатьcomponentsпапка.

Клик правой кнопкойcomponents→ New File → создатьGreeting.jsx。

Используйте сниппет кода, чтобы быстро создать компонент:

Typerafce（экспорт React-компонента в виде стрелочной функции）
Нажмите Tab, чтобы автоматически сгенерировать шаблон:

import React from 'react'

const Greeting = () => {
  return (
    <div>Greeting</div>
  )
}

export default Greeting

Преобразуйте его в полноценный компонент (демонстрируя состояние и Props):

Пример

import { useState } from 'react';

const Greeting = ({ name = 'Stranger' }) => {
const [count, setCount] = useState(0);

return (
<div style={{ padding: '20px', border: '1px solid #ccc' }}>
<h2>Привет,{name}！</h2>
<p>Вы нажали{count}раз</p>
<button onClick={() => setCount(count + 1)}>
Нажми меня+1
</button>
</div>
);
};

export default Greeting;

Вsrc/App.jsxимпортируйте и используйте его в:

Пример

import Greeting from './components/Greeting.jsx';

// Добавьте это в return:
<div>
<Greeting name="Example" />
<Greeting /> {/* Использовать имя по умолчанию */}
</div>

Сохраните все файлы (Ctrl+S), переключитесь в браузер, и горячая перезагрузка автоматически отобразит новый компонент!

Ключевые возможности：

При вводеuseState, интеллектуальное автодополнение будет предлагать подсказки.
При импорте путей./components/Greeting.jsx, Path Intellisense будет автоматически дополнять.
После сохранения Prettier автоматически форматирует отступы.
Если есть ошибки, ESLint пометит их красным на панели «Проблемы» (внизу).

Встроенный терминал и советы по отладке
Встроенный терминал: Меню Terminal → New Terminal, илиCtrl+`(обратный апостроф).

Запуск напрямую`pnpm dev`, вывод сервера находится прямо здесь.

Отладка кода React：

Установите расширение для браузераReact Developer Tools(если ещё не установлено).

В VS Code нажмите F5, чтобы начать отладку (сначала нужно настроить launch.json, но новичкам пока лучше использовать DevTools браузера).

В браузере нажмите F5 → вкладка Components, чтобы просмотреть Props и state вашего компонента Greeting.

Основные сочетания клавиш(обязательно запомнить):

Ctrl + S: Сохранить

Ctrl + /: Закомментировать строку

Alt + ↑/↓: Переместить строку

Ctrl + D: Мультикурсорное выделение слова

Ctrl + Shift + P: Палитра команд (универсальная)

Мини-упражнение: Создайте компонент Card

Создайтеcomponents/Card.jsx, используйтеrafceдля генерации.
Реализуйте компонент card, который принимает три пропса: title, content и imageUrl.
Используйте его дважды в App.jsx, чтобы отобразить разное содержимое.
Добавьте несколько inline-стилей, чтобы украсить.

После завершения на вашей странице будет несколько красивых карточек!

Шаг 1: Создайте компонент Card.jsx

ВsrcВ папке щёлкните правой кнопкой мыши → New Folder → создайтеcomponentsпапку (если её ещё нет).
Клик правой кнопкойcomponentsпапка → New File → создатьCard.jsx。
ВCard.jsxВведите вrafce(Нажмите Tab, чтобы автоматически сгенерировать шаблон), затем измените его на следующий код:

Код файла Card.jsx:

import React from 'react';

const Card = ({ title, content, imageUrl }) => {
return (
<div
style={{
width: '300px',
border: '1px solid #ccc',
borderRadius: '12px',
overflow: 'hidden',
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
margin: '20px auto',
backgroundColor: '#fff',
fontFamily: 'Arial, sans-serif',
}}
>
{imageUrl && (
<img
src={imageUrl}
alt={title}
style={{
width: '100%',
height: '200px',
objectFit: 'cover',
}}
/>
)}
<div style={{ padding: '20px' }}>
<h3 style={{ margin: '0 0 10px 0', color: '#333' }}>{title}</h3>
<p style={{ margin: 0, color: '#666', lineHeight: '1.5' }}>
{content}
</p>
</div>
</div>
);
};

export default Card;

Объяснение：

Использование деструктурированных пропсов:{ title, content, imageUrl }。
Улучшение инлайн-стилей: скруглённые углы, тени, адаптивные изображения, отступы и т.д., что делает карточки современными и профессиональными.
Условный рендеринг изображения: если нетimageUrl, то изображение не отображается (с использованием&&реализации).

Шаг 2: Измените App.jsx, чтобы использовать компонент Card дважды

Opensrc/App.jsx, и замените содержимое следующим кодом (сохраняя часть исходной структуры, удаляя стандартный счётчик и сосредоточившись на отображении карточек):

Код файла src/App.jsx:

import './App.css';
import Card from './components/Card.jsx';

function App() {
return (
<div
style={{
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'center',
padding: '40px',
backgroundColor: '#f0f0f0',
minHeight: '100vh',
}}
>
{/* Первая карточка: О React */}
<Card
title="Что такое React?"
content="React — это JavaScript-библиотека для создания пользовательских интерфейсов, разработанная Facebook. Она использует компонентный подход, делая код проще для повторного использования и поддержки."
imageUrl="https://react.dev/images/uwu.png"
/>

{/* Вторая карточка: О Vite */}
<Card
title="Преимущества Vite"
content="Vite — это инструмент сборки фронтенда нового поколения. Его сервер разработки запускается чрезвычайно быстро и поддерживает горячую замену модулей (HMR). Это оптимальный выбор для современных проектов на React."
imageUrl="https://vite.dev/logo-without-border.svg"
/>

{/* Можете добавить третью, чтобы попробовать! */}
</div>
);
}

export default App;

Объяснение：

ИмпортCardкомпонент.
Используйте<Card />дважды, передавая разные props.
Внешний div компонента App использует flex-раскладку для горизонтального размещения нескольких карточек (с адаптивным переносом).
URL-адреса изображений используют официальные публичные изображения (маленькая иконка React и логотип Vite). Локальные ресурсы не нужны; они загружаются напрямую из интернета.

Шаг 3: Запуск и просмотр результата

Сохраните все файлы (Ctrl+S).
Если сервер разработки не запущен, выполните в терминале VS Code:
```
npm run dev
```
Откройте http://localhost:5173 в браузере, и вы увидите две (или больше) красивые карточки, расположенные по центру, с изображениями, заголовками и содержимым!

Предварительный просмотр эффекта (текстовое описание)：

Карточки имеют тени и скруглённые углы, что напоминает стиль Material Design.
Изображение занимает всю ширину сверху, а у текстового блока комфортные отступы.
Фон светло-серый, карточки белые, визуальное оформление чёткое.

Другие расширения

Практический проект на React

Разработка React с VSCode

Скачивание и установка VS Code

Откройте ваш проект React

Установите необходимые плагины (расширения)

Настройте VS Code, чтобы улучшить разработку на React

Практика написания кода на React: создание компонента с нуля

Пример

Пример

Мини-упражнение: Создайте компонент Card

Шаг 1: Создайте компонент Card.jsx

Код файла Card.jsx:

Шаг 2: Измените App.jsx, чтобы использовать компонент Card дважды

Код файла src/App.jsx:

Шаг 3: Запуск и просмотр результата