> 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="/files/yFJcUA81j9KavLQE1PkH" alt=""><figcaption></figcaption></figure>

## Автотести

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

![](/files/I5jkIdNV9FjS9Qf74uEJ)

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

![](/files/z9KhAS52XJvtQMZLGHnC)

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

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

<figure><img src="/files/pLyhrEtSkoSzUo5Mp54n" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/Lf7ivUsyI3JcRSu0Efnb" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/tDQamUGwuQsJMYLo3yC8" alt=""><figcaption><p> </p></figcaption></figure>

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

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

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

![](/files/KY4mPXySKc9clQ2KjYUM)

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

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

<figure><img src="/files/nIxGWNjGe3lzIeo9aM9A" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/wYRNZMCa88YnzVqQDD3w" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/IIv9nA2p4ihPYVY3s0ZS" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/IYItK9oHxrtjagpZmGAY" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/RJ0o4EMr6HgpWTJp7euy" alt=""><figcaption></figcaption></figure>

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

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

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

![До автотестів](/files/oGnwV01fakOHT4SUvKrH)

![Після автотестів](/files/5RGigambMSYyaxsa7qPt)

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

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

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

![](/files/k9upRQrCo0Um7qOfDVZv)

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

<figure><img src="/files/xxw5g4nsseUGvXwu9BuT" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/HRNnNAsuwgLaHX2HHVSh" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/6vPeILK3qknOpx8ShUrU" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/eoScRWlYIZHzV5hUzNNR" alt=""><figcaption></figcaption></figure>

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

## Зум

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

![](/files/lvKiCmxw22AoIx9yyiWB)

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

<figure><img src="/files/r6yeOIKpqVbp0QtaMaWA" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/lsW9tXMYqc4DT1vxsU8J" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/6qvL9u6IGsUhqyseLS93" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/BeWoy2nVAAIUkEcOi1pm" alt=""><figcaption></figcaption></figure>

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

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

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

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