πŸ”§ΠšΠ°ΠΊ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² VS Code?

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

Для ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ автоматичСского форматирования Π² VS Code:

  1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ настройки Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°.
  2. НайдитС ΠΎΠΏΡ†ΠΈΡŽ "Editor: Format On Save" ΠΈ смСнитС Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½Π° "false".
  3. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ настройки.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ VS Code Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ваш ΠΊΠΎΠ΄ автоматичСски ΠΏΡ€ΠΈ сохранСнии.

"editor.formatOnSave": false

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

Как ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² VS Code

VS Code - это удобная ΠΈ мощная интСгрированная срСда Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ (IDE), ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰Π°Ρ Π³ΠΈΠ±ΠΊΡƒΡŽ настройку форматирования ΠΊΠΎΠ΄Π°. Однако, Π² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях, Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ автоматичСскоС Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ стили ΠΈΠ»ΠΈ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ форматирования. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ рассмотрим нСсколько способов ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² VS Code.

1. ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ форматирования для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π°

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π°, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ .vscode/settings.json Ρ„Π°ΠΉΠ»ΠΎΠΌ Π² ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠΉ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ этот Ρ„Π°ΠΉΠ», Ссли ΠΎΠ½ Π½Π΅ сущСствуСт, ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π² Π½Π΅Π³ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΡŽ:

{
    "editor.formatOnSave": false
}

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΏΡ€ΠΈ сохранСнии Ρ„Π°ΠΉΠ»Π° Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ.

2. ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ форматирования для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ языка программирования

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ языка программирования, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ настройки языка. Для этого:

  • ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡƒΠ³Π»Ρƒ ΠΎΠΊΠ½Π° VS Code ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ "Π’Π΅ΠΊΡƒΡ‰ΠΈΠΉ язык: ..." > "Настройка языкового Ρ„Π°ΠΉΠ»Π°"
  • Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π½ΡƒΠΆΠ½Ρ‹ΠΉ язык программирования
  • Π’ ΠΎΡ‚ΠΊΡ€Ρ‹Π²ΡˆΠ΅ΠΌΡΡ Ρ„Π°ΠΉΠ»Π΅ настройки, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΡŽ:
{
    "editor.formatOnSave": false
}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΏΡ€ΠΈ сохранСнии Ρ„Π°ΠΉΠ»ΠΎΠ² с этим языком программирования.

3. ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ форматирования для всСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ для всСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΎΠ±Ρ‰ΠΈΠ΅ настройки VS Code. Для этого:

  • ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню "Π€Π°ΠΉΠ»" Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ "Preferences" > "Настройки" (ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ сочСтаниС клавиш Ctrl + ,).
  • ΠžΡ‚ΠΊΡ€ΠΎΠ΅Ρ‚ΡΡ Ρ„Π°ΠΉΠ» настроСк VS Code.
  • Π’ ΠΎΡ‚ΠΊΡ€Ρ‹Π²ΡˆΠ΅ΠΌΡΡ Ρ„Π°ΠΉΠ»Π΅ настройки, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΡŽ:
{
    "editor.formatOnSave": false
}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΏΡ€ΠΈ сохранСнии Ρ„Π°ΠΉΠ»ΠΎΠ² Π² Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅.

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

VS Code ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ эти Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ ΠΈ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΈΡ… Π² соотвСтствии со своими потрСбностями форматирования.

НапримСр, для ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ форматирования HTML:

  • УстановитС ΠΈ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΡƒΠΉΡ‚Π΅ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ "Prettier - Code formatter" ΠΎΡ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° Prettier.
  • ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» настроСк VS Code ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΡŽ:
{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[html]": {
        "editor.defaultFormatter": ""
    }
}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ HTML Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ.

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

Π’ Π΄Π°Π½Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ рассмотрСли нСсколько способов ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² VS Code: ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π°, для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ языка программирования ΠΈ для всСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, Π° Ρ‚Π°ΠΊΠΆΠ΅ использованиС Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠΉ.

НадСюсь, данная информация ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ VS Code Π² соотвСтствии с вашими потрСбностями форматирования.

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

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

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

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

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

Π˜Π·ΡƒΡ‡Π°Π΅ΠΌ всС ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ ΠΊΠΎΠΌΠΌΠΈΡ‚Π° Π² Git: Ρ€Π°Π·Π±ΠΎΡ€

πŸ”§ΠšΠ°ΠΊ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² VS Code?

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ» .gitignore для управлСния Git