πŸ”§ΠšΠ°ΠΊ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ Π² VS Code: простой руководство для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…

Для форматирования ΠΊΠΎΠ΄Π° Π² VS Code Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ "Prettier".

Π¨Π°Π³ΠΈ:

  1. УстановитС Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ "Prettier" ΠΈΠ· ΠΌΠ°Π³Π°Π·ΠΈΠ½Π° Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠΉ VS Code.
  2. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» с ΠΊΠΎΠ΄ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.
  3. НаТмитС ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Shift + Alt + F ΠΈΠ»ΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² мСню "ΠŸΡ€Π°Π²ΠΊΠ°" -> "Π€ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚", Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅.

print("ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠΈΡ€!")

Π”Π΅Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΎΡ‚Π²Π΅Ρ‚

Как Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ Π² VS Code

VS Code (Visual Studio Code) являСтся ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· самых популярных ΠΈ ΠΌΠΎΡ‰Π½Ρ‹Ρ… Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ² ΠΊΠΎΠ΄Π° с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ. Π•Π³ΠΎ Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π΄Π΅Π»Π°ΡŽΡ‚ Π΅Π³ΠΎ ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΌ Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ². Одна ΠΈΠ· самых Π²Π°ΠΆΠ½Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ Π² VS Code - это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ форматирования ΠΊΠΎΠ΄Π°. Π€ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΠΎΡΡ‚ΡŒ ΠΈ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΡΡ‚ΡŒ вашСго ΠΊΠΎΠ΄Π°, дСлая Π΅Π³ΠΎ Π±ΠΎΠ»Π΅Π΅ понятным ΠΈ Π»Π΅Π³ΠΊΠΈΠΌ для сопровоТдСния.

ИспользованиС встроСнных инструмСнтов форматирования

VS Code ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ нСсколько встроСнных инструмСнтов для форматирования ΠΊΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ Π² ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΌ стилС. НСкоторыС ΠΈΠ· этих инструмСнтов Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚:

  • Auto Indent: Данная функция автоматичСски устанавливаСт отступы Π² вашСм ΠΊΠΎΠ΄Π΅, ΠΎΡΠ½ΠΎΠ²Ρ‹Π²Π°ΡΡΡŒ Π½Π° Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΡ… настройках Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° ΠΈ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠΌ стилС форматирования. Для использования этой Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ сочСтаниС клавиш Shift + Alt + F ΠΈΠ»ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ "Format Document" Π² мСню "View".
  • Π ΡƒΡ‡Π½ΠΎΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ пространств ΠΈ отступов: Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ клавиши ΠΏΡ€ΠΎΠ±Π΅Π»Π° ΠΈ табуляции, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ пространства ΠΈ отступы Π² свой ΠΊΠΎΠ΄. Π₯ΠΎΡ€ΠΎΡˆΠ΅ΠΉ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΎΠΉ являСтся использованиС отступов Π² 2 ΠΈΠ»ΠΈ 4 ΠΏΡ€ΠΎΠ±Π΅Π»Π° для облСгчСния чтСния ΠΊΠΎΠ΄Π°.
  • Π€ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°: Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ ΠΊΠΎΠ΄Π°, Π° Π½Π΅ вСсь Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π½ΡƒΠΆΠ½Ρ‹ΠΉ ΠΊΠΎΠ΄ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ сочСтаниС клавиш Shift + Alt + F ΠΈΠ»ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ "Format Selection" Π² мСню "View".

ИспользованиС Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠΉ

VS Code прСдоставляСт ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ спСктр Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠΉ для форматирования ΠΊΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΈ возмоТности форматирования. НСкоторыС ΠΈΠ· популярных Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠΉ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚:

  • Prettier: Π­Ρ‚ΠΎ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ прСдоставляСт ΠΌΠΎΡ‰Π½Ρ‹Π΅ инструмСнты для форматирования ΠΊΠΎΠ΄Π° Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… языках программирования. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π° форматирования Π² Ρ„Π°ΠΉΠ»Π΅ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ ΠΈ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ автоматичСскоС Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΈ сохранСнии Ρ„Π°ΠΉΠ»Π°. УстановитС Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ "Prettier - Code formatter" ΠΈΠ· ΠΌΠ°Π³Π°Π·ΠΈΠ½Π° Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠΉ VS Code.
  • Beautify: Π Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ Beautify ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… языках программирования ΠΈ позволяСт Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π° форматирования. УстановитС Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ "Beautify" ΠΈΠ· ΠΌΠ°Π³Π°Π·ΠΈΠ½Π° Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠΉ VS Code.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΊΠΎΠ΄Π°

Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΊΠΎΠ΄Π° ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌ ΠΊ Π½ΠΈΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅.

function addNumbers(a, b) {
  return a + b;
}

Установка отступов ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ форматирования даст Π½Π°ΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄:

function addNumbers(a, b) {
    return a + b;
}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΊΠΎΠ΄ стал Π±ΠΎΠ»Π΅Π΅ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΌ ΠΈ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

VS Code прСдоставляСт Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ инструмСнты для форматирования ΠΊΠΎΠ΄Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ чистый ΠΈ понятный ΠΊΠΎΠ΄. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ встроСнныС инструмСнты ΠΈΠ»ΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ своСму вкусу. ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ±Π»Π΅Π³Ρ‡Π°Π΅Ρ‚ Ρ‡Ρ‚Π΅Π½ΠΈΠ΅ ΠΈ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅, Π½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ²Ρ‹ΡˆΠ°Π΅Ρ‚ Π²Π°ΡˆΡƒ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ Π² процСссС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

Π’ΠΈΠ΄Π΅ΠΎ ΠΏΠΎ Ρ‚Π΅ΠΌΠ΅

Π€ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Π² Visual Studio Code с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Prettier

5. Π€ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Π² Visual Studio Code.

#8 АвтоматичСскоС Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² VS Code

ΠŸΠΎΡ…ΠΎΠΆΠΈΠ΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ:

fatal: not Π² git-ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π΅: Ρ‡Ρ‚ΠΎ это?

Как эффСктивно пСрСнСсти всС классы ΠΈΠ· HTML Π² CSS Π² VS Code?

πŸ”§ΠšΠ°ΠΊ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ Π² VS Code: простой руководство для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…

πŸ”§ Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ origin git: ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ΅ руководство ΠΈ совСты