🌈 Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΌΡƒ Π² VS Code: просто ΠΈ быстро

Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΌΡƒ Π² VS Code?

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΌΡƒ Π² Visual Studio Code, слСдуйтС этим шагам:

  • ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ VS Code ΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² мСню "Π€Π°ΠΉΠ»".
  • Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΡƒΠ½ΠΊΡ‚ "Настройки".
  • Π”Π°Π»Π΅Π΅ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ "ЦвСтовая схСма".
  • Π’Π°ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ Ρ‚Π΅ΠΌΡƒ ΠΈΠ· списка.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€:

{
    "workbench.colorTheme": "Π’Π΅ΠΌΠ°"
}

Π—Π°ΠΌΠ΅Π½ΠΈΡ‚Π΅ "Π’Π΅ΠΌΠ°" Π½Π° имя ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠΉ Ρ‚Π΅ΠΌΡ‹ ΠΈΠ· доступного списка.

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

Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΌΡƒ Π² VS Code

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ расскаТСм Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΌΡƒ Π² Visual Studio Code. Π’ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ вашСй срСды Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π²Π°ΠΆΠ½ΠΎ для ΠΊΠΎΠΌΡ„ΠΎΡ€Ρ‚Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹, поэтому ΠΌΡ‹ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ рассмотрим процСсс измСнСния Ρ‚Π΅ΠΌΡ‹ Π² VS Code.

Π¨Π°Π³ 1: ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ настроСк

ΠŸΠ΅Ρ€Π²ΠΎΠ΅, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΌΡƒ Π² VS Code, - это ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ„Π°ΠΉΠ» настроСк. Для этого слСдуйтС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ шагам:

  1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Visual Studio Code.
  2. НаТмитС Π½Π° Π·Π½Π°Ρ‡ΠΎΠΊ с ΡˆΠ΅ΡΡ‚Π΅Ρ€Π΅Π½ΠΊΠΎΠΉ Π² Π½ΠΈΠΆΠ½Π΅ΠΉ Π»Π΅Π²ΠΎΠΉ части ΠΎΠΊΠ½Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ панСль настроСк.
  3. Π’ ΠΎΡ‚ΠΊΡ€Ρ‹Π²ΡˆΠ΅ΠΉΡΡ ΠΏΠ°Π½Π΅Π»ΠΈ настроСк Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΡƒΠ½ΠΊΡ‚ "Настройки".

ПослС выполнСния этих шагов откроСтся Ρ„Π°ΠΉΠ» настроСк, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ VS Code.

Π¨Π°Π³ 2: Π’Ρ‹Π±ΠΎΡ€ Ρ‚Π΅ΠΌΡ‹

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Ρ„Π°ΠΉΠ» настроСк ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ ΠΊ измСнСнию Ρ‚Π΅ΠΌΡ‹:

  1. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ Π² ΠΏΠΎΠ»Π΅ поиска "Π’Π΅ΠΌΠ°" (ΠΈΠ»ΠΈ "Theme" Π½Π° английском языкС), Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΉΡ‚ΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹, связанныС с Ρ‚Π΅ΠΌΠ°ΠΌΠΈ.
  2. Π’ ΠΎΡ‚ΠΊΡ€Ρ‹Π²ΡˆΠ΅ΠΌΡΡ спискС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² Π½Π°ΠΉΠ΄ΠΈΡ‚Π΅ ΠΎΠΏΡ†ΠΈΡŽ "Workbench β€Ί Color Theme".
  3. НаТмитС Π½Π° Π·Π½Π°Ρ‡ΠΎΠΊ ΠΊΠ°Ρ€Π°Π½Π΄Π°ΡˆΠ° рядом с этой ΠΎΠΏΡ†ΠΈΠ΅ΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ список доступных Ρ‚Π΅ΠΌ.

Π—Π΄Π΅ΡΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠ΄Π½Ρƒ ΠΈΠ· прСдустановлСнных Ρ‚Π΅ΠΌ ΠΈΠ»ΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ Ρ‚Π΅ΠΌΡƒ, Π½Π°ΠΆΠ°Π² Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ "Install Additional Color Themes" (ΠΈΠ»ΠΈ "Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅ Ρ‚Π΅ΠΌΡ‹" Π½Π° русском языкС), Ρ‡Ρ‚ΠΎ ΠΎΡ‚ΠΊΡ€ΠΎΠ΅Ρ‚ ΠΏΠ°Ρ€Ρƒ Ρ€Ρ‹Ρ‡Π°Π³ΠΈ, Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ для поиска ΠΈ установки Π½ΠΎΠ²Ρ‹Ρ… Ρ‚Π΅ΠΌ. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π»ΡŽΠ±ΡƒΡŽ Ρ‚Π΅ΠΌΡƒ, которая Π²Π°ΠΌ нравится, Π½Π°ΠΆΠ°Π² Π½Π° Π½Π΅Π΅.

Π¨Π°Π³ 3: ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ

ПослС Π²Ρ‹Π±ΠΎΡ€Π° Ρ‚Π΅ΠΌΡ‹ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ измСнСния. Для этого Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ дСйствия:

  1. НайдитС ΠΊΠ½ΠΎΠΏΠΊΡƒ "Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ" (ΠΈΠ»ΠΈ "Save" Π½Π° английском языкС) Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части Ρ„Π°ΠΉΠ»Π° настроСк.
  2. НаТмитС Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ "Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ" для примСнСния ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.
  3. Π—Π°ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» настроСк, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ ΠΊ основному Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌΡƒ ΠΎΠΊΠ½Ρƒ VS Code.

ПослС выполнСния этих шагов новая Ρ‚Π΅ΠΌΠ° Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π° ΠΊ Π²Π°ΡˆΠ΅ΠΌΡƒ VS Code. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ измСнСния, ΠΊΠΎΠ³Π΄Π° Π±ΡƒΠ΄Π΅Ρ‚Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с вашими Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°ΠΌΠΈ.

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

Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ дСмонстрируСт ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ‚Π΅ΠΌΡ‹ Π² VS Code:


// Ѐункция для измСнСния Ρ‚Π΅ΠΌΡ‹ Π² VS Code
function changeTheme(theme) {
    // Код для измСнСния Ρ‚Π΅ΠΌΡ‹
    // ...
}

// ИспользованиС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ
changeTheme("Dark");
    

Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρƒ нас Π΅ΡΡ‚ΡŒ функция changeTheme(), которая ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ имя Ρ‚Π΅ΠΌΡ‹ Π² качСствС Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Π°. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ эту Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ с ΠΈΠΌΠ΅Π½Π΅ΠΌ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠΉ Ρ‚Π΅ΠΌΡ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΌΡƒ Π² VS Code.

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

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΌΡƒ Π² VS Code. НС Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ доступныС Ρ‚Π΅ΠΌΡ‹ ΠΈ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ‚Ρƒ, которая Π»ΡƒΡ‡ΡˆΠ΅ всСго соотвСтствуСт вашим прСдпочтСниям.

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

How to change Color Theme in Visual Studio Code

Top 10 VS Code Themes 2023

How to make your own VS Code theme!

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

πŸ”’ Как ΠΎΡ‡ΠΈΡΡ‚ΠΈΡ‚ΡŒ Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°Π» Π² VS Code: ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ совСты ΠΈ инструкции πŸ”’

Π§Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΊΠΎΠΌΠ°Π½Π΄Π° git push? πŸ€”

🌈 Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΌΡƒ Π² VS Code: просто ΠΈ быстро