> For the complete documentation index, see [llms.txt](https://shpp.gitbook.io/zero/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shpp.gitbook.io/zero/arrangements/sh++-ide.md).

# Ш++ IDE

Код задач Zero ми радимо писати в нашому редакторі: [https://js.ide.shpp.me](https://js.ide.shpp.me/).

Він ідеально відповідає задачам курсу, а головне - працює "з коробки". Не потрібно нічого встановлювати: просто відкриваєте сторінку в браузері й одразу пишете код. 

## Запуск програми

Щоб запустити написану програму — тисніть "Запустити". Код виконається - і... все :slight\_smile:

<figure><img src="https://2283236175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUxylxLjNGD6e20lNBE%2Fuploads%2FgPOceY4KRPdkxJQcehBe%2Fimage.png?alt=media&amp;token=2ae7e88a-7e42-4a47-a88c-d53f042c1f54" alt=""><figcaption></figcaption></figure>

## Автотести

Коли вирішили задачу — можете протестувати ваше рішення. Для цього потрібно обрати задачу в переліку вгорі:

![](https://2283236175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUxylxLjNGD6e20lNBE%2Fuploads%2FUYHyfg7qPWW5JKeIADaD%2Fimage.png?alt=media\&token=4df9eb73-5028-4100-aeb2-b4b3ffedb96a)

І тиснемо "Протестувати": так побачите, чи вірно працює ваша програма

![](https://2283236175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUxylxLjNGD6e20lNBE%2Fuploads%2FFHyssTg6qQ9oLZZtQd8O%2Fimage.png?alt=media\&token=726f5382-a01e-4382-9864-b9b8b9650f1d)

**Зверніть увагу**: якщо обираєте задачу — посилання на неї має автоматично додатись в перший рядок кода (як комент).

**Про всяк випадок**: задачі — в кінці кожного розділу після теорії. Також вони є прямо в боковому меню. Наприклад:

<figure><img src="https://2283236175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUxylxLjNGD6e20lNBE%2Fuploads%2FZMI36okYn4ayLjtoW6vd%2Fimage.png?alt=media&amp;token=a3c9fac4-894f-461b-9f7c-8ca5fbcc7599" alt=""><figcaption></figcaption></figure>

А ось вони ж у меню вибору тестів Ш++ IDE (відповідно розділені на частини):

<figure><img src="https://2283236175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUxylxLjNGD6e20lNBE%2Fuploads%2FaN1DH2vXbMeGfrwqsX9I%2Fimage.png?alt=media&amp;token=12c7240c-98b1-4618-b632-90809b739f55" alt=""><figcaption></figcaption></figure>

Автотести є для більшості задач, але не для всіх. Якщо для даної задачі автотести не передбачені, з'явиться таке повідомлення:

<figure><img src="https://2283236175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUxylxLjNGD6e20lNBE%2Fuploads%2FkoKlVGnHdDVG4u6DJh6a%2Fimage.png?alt=media&amp;token=7d04f91a-da89-4aab-a1dc-438880fcfa24" alt=""><figcaption><p> </p></figcaption></figure>

Наразі таких задач лише дві, тому не переймайтесь: без тестів протягом курсу ви не залишитесь.

### Якщо рішення вірне

Якщо ваша програма пройшла всі закладені тести і жодного разу не видала помилку, на консолі з'явиться відповідне повідомлення, а також код "еталонного" рішення. Його можна порівняти із власним кодом та моментельно отримати "неявні поради" щодо оптимізації :wink:

![](https://2283236175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUxylxLjNGD6e20lNBE%2Fuploads%2FGXJla2h7TNXcjw3EDUQm%2Fimage.png?alt=media\&token=c0fd1c88-0a4e-4ce0-94fb-3e093b18def5)

### Якщо рішення невірне

Якщо хоч один тест із переліку не проходить - тестування зупиняється, а на консоль виводиться інформація про те, який саме тест провалився найпершим. Під ним буде два блока: що видав ваш код на цьому тесті, та як мало бути:

<figure><img src="https://2283236175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUxylxLjNGD6e20lNBE%2Fuploads%2FypWOVkj5WI0aL1p39d7G%2Fimage.png?alt=media&amp;token=8dace0a3-bfd4-432a-bfe2-e1b2ed75ee16" alt=""><figcaption></figcaption></figure>

Уважно порівняйте результат з "еталоном" і робіть висновки, де помилились, та що саме в коді треба виправляти :wink:

## Невидимі символи

Якщо ви були уважними, то помітили сірі символи, яких немає ані в коді, ані на консолі в звичайному режимі запуску коду, але які з'являються на провалених тестах.

<figure><img src="https://2283236175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUxylxLjNGD6e20lNBE%2Fuploads%2F4PxapWTNYVCKYgYeyXaJ%2Fimage.png?alt=media&amp;token=3d5b32a8-07c5-47b4-aae6-ae6449ca2c38" alt=""><figcaption></figcaption></figure>

&#x20;Ц&#x435;**·**&#x442;очк&#x438;**·**&#x43C;і&#x436;**·**&#x441;ловами та **↵** в кінці кожного рядка.

<figure><img src="https://2283236175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUxylxLjNGD6e20lNBE%2Fuploads%2FT9fKOccER3U8oHCs7x0T%2Fimage.png?alt=media&amp;token=3efa2465-c527-41b0-abc0-bde71d2796fe" alt=""><figcaption></figcaption></figure>

Це візуалізація пробілів та переносів рядка. Тести перевіряють, чи виведені на консоль символи збігаються з "еталоном". А пробіли та переноси - це теж символи, хоч і невидимі. Тож, якщо ваш код виводить на консоль більше чи менше пробілів / переносів, ніж треба за умовою задачі - тест провалиться.

<figure><img src="https://2283236175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUxylxLjNGD6e20lNBE%2Fuploads%2F7ebzS1Lbn5hUmj5Jq9To%2Fimage.png?alt=media&amp;token=fdf53b0e-5768-4f41-8ee1-70e7d4193be0" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2283236175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUxylxLjNGD6e20lNBE%2Fuploads%2FhWjX8TGvrApUaai0JjjC%2Fimage.png?alt=media&amp;token=71b1a042-e73c-4ede-be11-8565a8115f42" alt=""><figcaption></figcaption></figure>

Оскільки побачити пробіли та переноси рядків не можна, Ш++ IDE візуалізує їх для вас у тому разі, якщо тест не пройшов. Завдяки цьому, якщо проблема буде саме в невидимих символах, ви легко це побачите.

## Автоформатування

Коли запускатимете автотести, код автоматично відформатується за прийнятим у Ш++ стилем: IDE  прибере зайві пробіли, рознесе "здвоєні" команди по окремим рядкам і т.д.

![До автотестів](https://2283236175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUxylxLjNGD6e20lNBE%2Fuploads%2F5o3hSqgyvTLWZ2Wl7ejC%2Fimage.png?alt=media\&token=c839f7a0-2ad3-44cc-9736-01645d610335)

![Після автотестів](https://2283236175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUxylxLjNGD6e20lNBE%2Fuploads%2FBmgd88EFTxHsUA71uy1w%2Fimage.png?alt=media\&token=8720b3f0-50fa-447a-ba83-fb7819afe8b5)

Автоформатування виправляє лише взаємне розташування елементів, але не чіпає їх "нутрощі". Рядки в лапках залишаться без змін, і на консоль виводитиметься те ж, що і до автоформатування, тому воно ніяк не вплине на проходження тестів.

## Посилання на код

Якщо вам знадобиться допомога з кодом, або ви захочете скинути рішення на рев'ю — цей код треба показати. Оскільки весь код зберігається локально в cookies, ви не зможете просто скинути посилання на [https://js.ide.shpp.me](https://js.ide.shpp.me/) - на іншому комп'ютері за цим посиланням буде інший код. Тому ми додали кнопку "поділитись посиланням".

![](https://2283236175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUxylxLjNGD6e20lNBE%2Fuploads%2FjF2l5Xid0lQk5Y3MOFOC%2Fimage.png?alt=media\&token=3aaf6259-0b47-4735-8754-9000ffb44bad)

Коли ви тиснете її - наш бот заливає ваш код на наше сховище і генерує URL.

<figure><img src="https://2283236175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUxylxLjNGD6e20lNBE%2Fuploads%2FCt86PeryUQ0zoCMKBTtm%2Fimage.png?alt=media&amp;token=f41bbf5e-5c82-46f2-8a8e-fada3b011c8c" alt=""><figcaption></figcaption></figure>

При цьому він автоматично копіюється у ваш буфер обміну, його можна одразу вставляти в повідомлення. За цим посиланням буде сторінка IDE з кодом.

<figure><img src="https://2283236175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUxylxLjNGD6e20lNBE%2Fuploads%2FiNcQOtqSlDx5ftrf0Ef1%2Fimage.png?alt=media&amp;token=c43f84a4-b800-4cca-bdf6-ee8388da4d16" alt=""><figcaption></figcaption></figure>

І от цей URL вже можна скидати іншим: відкривши його, людина бачитиме той код, який ви зберегли.

### Обмеження при створенні посилань

Вам потрібно обрати задачу, код до якої ви написали - інакше IDE не дозволить створити посилання:&#x20;

<figure><img src="https://2283236175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUxylxLjNGD6e20lNBE%2Fuploads%2F8favkDDpQdS0Gh0jhBwB%2Fimage.png?alt=media&amp;token=faeab628-fd13-4ed5-b7a8-6e15a753652a" alt=""><figcaption></figcaption></figure>

Також, щоб люди не забували тестувати власний код, коли скидають його на рев'ю, IDE автоматично тестує і автоформатує його, коли створює посилання. І якщо тести не пройшли - видає таке попередження:

<figure><img src="https://2283236175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUxylxLjNGD6e20lNBE%2Fuploads%2FL1q9Su6THVywZQHb2DE2%2Fimage.png?alt=media&amp;token=dde2a686-29c1-415c-a04e-2ddce10e9d79" alt=""><figcaption></figcaption></figure>

Ви можете створити посилання і для неробочого коду - наприклад, якщо застрягли або не можете зрозуміти, де помилка, і треба показати комусь код. Але це нагадування допомагає уникнути ситуацій, коли студент забув обрати задачу або протестувати код. Тому воно є :wink:

## Зум

Якщо шрифт для вас занадто маленький, або навпаки — завеликий, можна змінити розмір цими кнопками

![](https://2283236175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUxylxLjNGD6e20lNBE%2Fuploads%2FgGpkMpvhGOrxFdUkRCnu%2Fimage.png?alt=media\&token=f790c594-b5f9-4323-81e5-e7f84b7e5586)

Вони працюють незалежно: у консолі - свій розмір, у полі для коду - свій.

<figure><img src="https://2283236175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUxylxLjNGD6e20lNBE%2Fuploads%2FzNM62Srz4NFRtbSUU3du%2Fimage.png?alt=media&amp;token=7dbdfb43-0a6e-4d55-818e-92820c1f6c89" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2283236175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUxylxLjNGD6e20lNBE%2Fuploads%2Fgxse6PxLl1OGenEUxuYH%2Fimage.png?alt=media&amp;token=d9c99cbc-bbca-4b7f-86e6-56599e1a4e50" alt=""><figcaption></figcaption></figure>

Тобто пропорції ви обираєте окремо для кожної половини, і це доволі зручно.

## Про підлітковий курс

Пункт про підлітковий курс прибирає кнопку автотестів.&#x20;

<figure><img src="https://2283236175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUxylxLjNGD6e20lNBE%2Fuploads%2FgS4NllSDfA72UpQ6zX11%2Fimage.png?alt=media&amp;token=08abba3a-c6a2-4321-9c60-b1ea31ad9b73" alt=""><figcaption></figcaption></figure>

А замість посилання на задачу додає посилання на Google Doc для підліткового курсу

<figure><img src="https://2283236175-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MUxylxLjNGD6e20lNBE%2Fuploads%2FAigxKPn4iEwRYorA5LFN%2Fimage.png?alt=media&amp;token=d5cc41eb-888f-4be5-83c7-8be15d7c4f49" alt=""><figcaption></figcaption></figure>

У підлітків задачі схожі, але не ідентичні. А IDE у всіх одна й та сама. Тому цей "костиль" потрібен, щоб ніхто не плутався.

## Збереження коду

Якщо ви перезавантажите браузер - код в редакторі збережеться. Майже завжди. "Майже" - бо він зберігається у вас на комп'ютері, і ви можете випадково видалити файли коду разом зі службовими файлами браузера.

Тому, якщо ви хочете зберегти код гарантовано - краще дублюйте його на [Pastebin](https://pastebin.com/), [Replit](https://replit.com), [JSFiddle](https://jsfiddle.net/) чи будь-який інший сервіс на ваш смак. Або створіть посилання на власний код і зробіть закладку в браузері.