πŸ”§ Как ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Π² VS Code: ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ΅ руководство с ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ

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

Для отформатирования Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° Π² VS Code, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²ΡΡ‚Ρ€ΠΎΠ΅Π½Π½ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ "Π€ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚". Π’ΠΎΡ‚ ΠΊΠ°ΠΊ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ:

  1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.
  2. НаТмитС Ctrl + Shift + P (ΠΈΠ»ΠΈ Cmd + Shift + P Π½Π° Mac), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ панСль ΠΊΠΎΠΌΠ°Π½Π΄.
  3. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ "Π€ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚" ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΡƒΡŽ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ.
  4. VS Code автоматичСски ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ ваш Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Π² соотвСтствии с настройками форматирования.

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сочСтаниС клавиш Shift + Alt + F Π² качСствС быстрого способа ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚.

НС Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ свои прСдпочтСния форматирования Π² настройках VS Code, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ форматировался Π² соотвСтствии с вашими прСдпочтСниями.

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

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

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

VS Code ΠΈΠΌΠ΅Π΅Ρ‚ встроСнныС инструмСнты для форматирования ΠΊΠΎΠ΄Π°. Одним ΠΈΠ· Π½ΠΈΡ… являСтся автоматичСскоС Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΈ сохранСнии Ρ„Π°ΠΉΠ»Π°. Когда Ρ‚Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΡΠ΅ΡˆΡŒ Ρ„Π°ΠΉΠ», VS Code ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π° форматирования ΠΊ Ρ‚Π²ΠΎΠ΅ΠΌΡƒ ΠΊΠΎΠ΄Ρƒ автоматичСски. Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ полСзная функция, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Ρ‚Ρ‹ моТСшь Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ строку Π² Ρ„Π°ΠΉΠ» настроСк settings.json Ρ‚Π²ΠΎΠ΅Π³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°:

"editor.formatOnSave": true

ПослС этого ΠΏΡ€ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ сохранСнии Ρ„Π°ΠΉΠ» Π±ΡƒΠ΄Π΅Ρ‚ автоматичСски Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² соотвСтствии с Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΌΠΈ ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌΠΈ.

2. ИспользованиС Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠΉ для форматирования

Π’Ρ‚ΠΎΡ€ΠΎΠΉ способ форматирования Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° Π² VS Code - использованиС Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠΉ. Π Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ - это Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ инструмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°ΡΡˆΠΈΡ€ΡΡŽΡ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ VS Code. БущСствуСт мноТСство Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для форматирования ΠΊΠΎΠ΄Π°. Π’ΠΎΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· Π½ΠΈΡ…:

  • Prettier - Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ для форматирования ΠΊΠΎΠ΄Π° Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… языках программирования.
  • ESLint - популярноС Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ для ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ ΠΈ форматирования ΠΊΠΎΠ΄Π° JavaScript.
  • Live Share - Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ позволяСт совмСстно Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π°Π΄ ΠΊΠΎΠ΄ΠΎΠΌ ΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ.

Установи Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Ρ‚Π²ΠΎΠΈΡ… Π½ΡƒΠΆΠ΄, ΠΈ слСдуй инструкциям ΠΏΠΎ Π΅Π³ΠΎ использованию. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ сочСтания клавиш ΠΈΠ»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ Π² контСкстном мСню.

3. НастраиваСмыС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ форматирования

VS Code Ρ‚Π°ΠΊΠΆΠ΅ позволяСт Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ форматирования Π² соотвСтствии со своими прСдпочтСниями. Для этого создай Ρ„Π°ΠΉΠ» .editorconfig Π² ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠΌ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π΅ Ρ‚Π²ΠΎΠ΅Π³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»Π° форматирования для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ языка программирования. НапримСр, Π²ΠΎΡ‚ содСрТимоС Ρ„Π°ΠΉΠ»Π° .editorconfig, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π° форматирования для языка Python:

root = true

[*]
indent_style = space
indent_size = 4

Π‘ΠΎΠ·Π΄Π°ΠΉ свой Ρ„Π°ΠΉΠ» .editorconfig ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»Π° форматирования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‚ Ρ‚Π²ΠΎΠΈΠΌ прСдпочтСниям.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΡ ΠΏΠΎ бСзопасности

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

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

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

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

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

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

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

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

πŸ”§ Как ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°Π» ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π² VS Code?

πŸ”§ Как ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Π² VS Code: ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ΅ руководство с ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ

πŸ”§ Как ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ VS Code Π½Π° Linux Manjaro: ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ΅ руководство πŸ“š

πŸ’» Как ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ PHP Π² VS Code: ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ Π³ΠΈΠ΄ ΠΈ пошаговая инструкция

Как Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ JS ΠΊΠΎΠ΄ Π² VS Code: ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ совСты ΠΈ подсказки