Как запустить программу C в Sublime Text 3?

Как установить Sublime Text для работы с C/C++

22 октября 2019

Время чтения: 10 минут

Sublime Text — текстовый редактор с большим набором дополнительных возможностей. Поддерживает различные языки программирования и умеет подсвечивать синтаксис кода. Имеет множество дополнительных расширений, с помощью которых можно добиться максимально комфортной и удобной работы и на время забыть, что используешь обычный текстовый редактор, а не интегрированную среду разработки вроде Visual Studio или Eclipse.

Помимо этого в редактор встроены самые разнообразные функции для работы с текстом, которых обычно не встретишь в простеньких редакторах вроде стандартного блокнота. Среди наиболее интересных функций — смена регистра, перестановка и сортировка строк, использование регулярных выражений, а также использование нескольких курсоров одновременно. В этой статье мы расскажем, как установить Sublime text на компьютер и настроить его для комфортной работы с языками C и C++.

Скачиваем установщик

Чтобы установить Sublime text на компьютер для начала необходимо скачать установочный файл. Для этого заходим на официальный сайт редактора и выбираем подходящую версию: www.sublimetext.com/3. Мы будем использовать версию для операционной ситсемы Windows 64 битной разрядности.

Запускаем установку

После того, как установочный файл загрузится, запускаем его. Появится окно с выбором пути установки приложения. Мы оставили его по умолчанию, но при большом желании можете изменить этот путь. После этого нажимаем кнопку next и ставим галочку в поле «Add to explorer context menu», если хотим, чтобы Sublime text можно было быстро найти в меню пуск:

После этого остаётся лишь нажать кнопку «Install» и немного подождать, пока установщик скопирует нужные файлы и поставит текстовый редактор на компьютер. По завершении установки остаётся лишь нажать кнопку «Finish» и можно приступать к написанию кода:

Устанавливаем package control

Package control — это менеджер различных дополнений для расширения возможностей текстового редактора прямо из него. С его помощью можно добавлять другие языки программирования, пакеты для автоматического дополнения кода, форматирования текста и многое другое. Чтобы его установить, запускаем Sublime, если ещё не сделали это раньше, щёлкаем в верхнем меню «Tools» и выбираем внизу пункт «Install package control». Текстовый редактор может на время подвиснуть, но уже скоро вы увидете сообщение об успешной установке:

Ставим пакеты для удобной работы с C и C++

Для удобной работы как с языками C и C++, так и любым другим текстом, мы рекомендуем поставить следующие пакеты:

All autocomplete — это пакет, добавляющий возможность автозаполнения. При наборе текста этот пакет показывает всплывающее окно с доступными для заполнения вариантами, что очень удобно, когда требуется набирать длинные слова, ведь для этого достаточно буквально нескольких нажатий. Главной особенностью этого пакета является, пожалуй, просмотр всех открытых в данный момент вкладок, благодаря чему имеется возможность использовать слова, которые написаны в других файлах.
C++ completions — это пакет, во многои схожий с all autocomplete, однако делающий особый упор именно на языке C++. Он позволяет в пару нажатий добавлять подключение библиотек, создание стандартных объектов, использование пространсва имён и многое другое.
C++ snippets — это набор шаблонов, которые активируются при наборе определённых последовательностей символов и способны вставлять целые конструкции кода, как, например, циклы, условные операторы, шаблон основной программы и тому подобное. При этом после вставки шаблона выделяются места, которые чаще всего используются при редактировании, чтобы пользователь мог как можно быстрее написать код, который ему нужен.

Чтобы добавить новый пакет в Sublime Text нужно запустить package control и выбрать install package:

All autocomplete

После выполнения команды install package пишем несколько символов названия пакеты, выбираем нужный из списка и просто щёлкаем по нему, что мгновенно запустит его установку. Процесс установки можно видеть в левой нижней части экрана. После её завершения можно сразу же переходить к установке следующего пакета.

C++ completions

Как и с предыдущим пакетом, открываем package control, выбираем команду install package, вписываем название пакета и устанавливаем его. В отличие от all autocomplete, это расширение по завершении установки откроет файл, в котором находится информация о пакете и о том, как его использовать:

C++ snippets

С этим пакетом всё полностью аналогично, и он также в конце покажет файл с иннормацией о себе.

В завершение

Теперь, когда sublime text установлен и настроен для работы с C/C++, можно приступать к написанию программ. Для этого создайте новый текстовый файл и измените его расширение с .txt на .c или .cpp, после чего откройте его в Sublime text. Поскольку саблайм является лишь текстовым редактором, а не IDE, то для сорбки приложения необходимо использовать компилятор, например, gcc. О том, как установить его в windows мы писали в статье как установить компилятор gcc / g++ для Windows.

Программист, соосновательница programforyou.ru, рукодельница, всегда готова придти на помощь и помочь во всём разобраться

Языки программирования: Python, C, C++, Pascal

Выпускница МГТУ им. Н.Э. Баумана

Programforyou — это сообщество, в котором Вы можете подтянуть свои знания по программированию, узнать, как эффективно решать те или иные задачи, а также воспользоваться нашими онлайн сервисами.

Как скомпилировать и запустить C в sublime text 3?

Я хотел бы скомпилировать и запустить программу C в sublime text 3 на ubuntu 14.04. В настоящее время программа компилируется с gcc, используя sublime text 3, выполняющий команду (см. ниже код), но мне было интересно, возможно ли, чтобы выходные данные выполнения программы также появлялись на консоли sublime text.

Вот что мне в настоящее время нужно скомпилировать C-программу с sublime text 3

C_compile.sublime-build

Я пытался добавить && ./$ как это:

Но это дает мне такую ошибку:

Вот моя простая программа на языке Си, с которой я работаю:

Экс1-6.c

Я искал в Интернете решение, но предложенные ответы либо позволяют только компилировать (эта часть уже работает для меня), либо не работают. Любая идея, как исправить этот код, чтобы скомпилировать и запустить в sublime text 3 (Если это возможно). Спасибо

Изменить #1, Как предложено user2357112:

После изменения shell на true :

Вот что я получаю:

Редактировать #2, как предложил Юджин к:

Я попытался изменить cmd, чтобы запустить только программу:

Он успешно запускается и выводит вывод на консоль с некоторым кодом:

До сих пор cmd либо компилируется, либо запускается, но не делает то и другое вместе, надеюсь, что-то можно сделать, чтобы заставить его компилироваться и запускаться с помощью одной команды.

12 ответов:

Вы пробовали просто записать всю команду в одной строке?

Я полагаю (полу-спекуляция здесь), что ST3 принимает первый аргумент в качестве » программы «и передает другие строки в качестве»аргументов». https://docs.python.org/2/library/subprocess.html#subprocess.Popen

Для системы sublime build, реализующей команду меню Run:

перейдите в меню Инструменты — > система сборки — >новая система сборки.

Или

И вставить это:

*в этом примере используется компилятор GCC. Не стесняйтесь заменить gcc компилятором по вашему выбору.

Мы можем скомпилировать код C в Sublime Text и напечатать некоторое значение или строки, но он Не принимает ввод от пользователя. (Пока не узнаю. Я уверен в компиляции,но не в выводе из данного ввода.) Если вы используете Windows, вы должны установить переменные среды для Sublime Text и компилятора GCC.

Инструкция основана на посте «icemelon». Ссылка на сообщение:

Используйте ссылку ниже, чтобы узнать, как настроить переменную enviroment в вашей операционной системе:

Приведенная ниже инструкция была протестирована на системе Windows 8.1 и Sublime Text 3-build 3065.

1) Установите MinGW. 2) Добавьте путь к «MinGWbin»в» переменной окружения PATH».

» Система Свойства — > дополнительно — > окружение «переменные и там обновить «переменную PATH’.

3) затем проверьте переменную окружения PATH командой ниже в «командной строке»:

4) Добавить новые системы построения для возвышенного текста.

Моя версия кода ниже («C. sublime-build»).

Последняя сборка sublime даже допускает прямую команду вместо двойных кавычек. Попробуйте приведенный ниже код для системы сборки

После строгого охота за кодом сеанс через интернет, я, наконец, придумал решение, которое позволяет вам компилировать + запускать ваш C-код «вместе сразу» , в С99, в специальном окне терминала . Я знаю, некоторые люди не любят C99 . Мне тоже не нравятся некоторые люди.

В большинстве случаев Sublimeкомпилирует и запускает код, но в C90 или меньшей версии. Так что если Вы конкретно хотите, чтобы это был C99 , это путь.

Примечание: Кстати, я сделал это на машине с Windows, не могу гарантировать для других! Там, наверное, ничего не получится.

1. Создайте новую систему сборки в Sublime: Инструменты > Система Сборки > Новая Система Сборки.

2. Будет создан новый файл с именем untitled.sublime-build .

Скорее всего, Sublime откроет его для вас.

Если нет, перейдите к Предпочтения > Просмотр Пакетов > Пользователь

Если файл untitled.sublime-build есть ли , то откройте его , если его нет, то создайте его вручную и откройте его.

3. Скопируйте и вставьте приведенный ниже код в указанный выше файл untitled.sublime-build и сохраните его.

Закройте файл. Вы почти закончили!

4. Наконец переименуйте файл из untitled.sublime-build в myC.sublime-build , или вы могли бы как ну так проявите здесь свое творчество. Просто сохраните расширение файла таким же.

5. Наконец, задайте для текущей системы сборкиимя файла, которое вы написали на предыдущем шаге. В данном случае это так myC

Вуаля ! Compile + Run ваш C-код, используя C99 by инструменты > сборка , или просто нажав Ctrl + B

Лучше всего было бы просто использовать Makefile для вашего проекта, и ST3 автоматически определит систему сборки для вашего проекта. Например. Если вы нажмете shift + ctrl / cmd +B, вы увидите следующее:

Попробуйте написать сценарий оболочки с именем run.sh в вашем проекте foler

И сделать Build System , чтобы скомпилировать и выполнить его:

Не забудь $chmod +x run.sh

Делайте одно дело и делайте его хорошо:)

Используете ли вы sublime text в linux? Я получил ту же самую проблему, и она была решена! Вот мой c. sublime-build:

Код, который работал для меня на машине с Windows 10, используя Sublime Text 3

В Возвышенном Тексте 3. Попробуйте изменить приведенный выше код на этот, заметьте добавление «start».

Если вы кодируете язык C или C++. Я думаю, нам повезло, потому что мы могли бы использовать файл для ввода. Это так удобно и понятно. Я часто так делаю. Это аргумент для его реализации:

Обратите внимание, что inputfile должен находиться в одном каталоге с файлом исходного кода, r-это подставка для чтения.

Как скомпилировать и запустить C в sublime text 3?

вот что я в настоящее время должен скомпилировать программу C с sublime text 3

c_compile.sublime-build

Я пробовал добавлять && ./$ такой:

но это дает мне эту ошибку:

вот моя простая программа C, с которой я работаю:

Ex1-6.c

Я искал в Интернете решение, но предлагаемые ответы либо позволяют компилировать только (эти части уже работают для меня), либо не работают. Любая идея, как исправить этот код, чтобы скомпилировать и запустить в sublime text 3 (Если это возможно). Благодарить вы

редактировать #1, Как предложено user2357112:

после изменения shell to true :

вот что я получил:

редактировать #2, как предложил Евгений K:

Я попытался изменить cmd, чтобы запустить программу только:

он успешно работает и печатает вывод на консоли с некоторым кодом:

пока ЦМД либо компилирует или работает, но не делает оба вместе, надеюсь, что-то можно сделать, чтобы сделать его компилировать и запускать с помощью одной команды.

12 ответов

вы пробовали просто написать всю команду в одной строке?

Я считаю (полу-спекуляция здесь), что ST3 принимает первый аргумент как «программу» и передает другие строки как «аргументы». https://docs.python.org/2/library/subprocess.html#subprocess.Popen

для системы sublime build, реализующей команду меню Run:

перейдите в инструменты — >система сборки — >новая система сборки.

или

и вставить это:

*в этом примере используется компилятор GCC. Не стесняйтесь заменить gcc с компилятором по вашему выбору.

мы можем скомпилировать код C в Sublime Text и напечатать некоторое значение или строки, но это не признавайте входной сигнал от потребителя. (Пока не узнаю. Я уверен в компиляции, но не в выводе из данного ввода.) Если вы используете Windows, вы должны установить переменные среды для Sublime Text и компилятора GCC.

инструкция основана на посте «icemelon». Ссылка на сообщение:

используйте ссылку ниже, чтобы узнать, как настроить переменную среды в вашей ОС:

приведенная ниже инструкция была протестирована на системе Windows 8.1 и Sublime Text 3-build 3065.

1) Установите MinGW. 2) Добавьте путь к «MinGWbin» в » PATH переменная окружения.»

» системные свойства -> дополнительно -> переменные среды «и там обновить переменную «путь».

3) затем проверьте переменную среды PATH командой ниже в «командной строке»:

4) Добавьте новую систему сборки в текст Sublime.

моя версия кода ниже («C. sublime-build»).

последняя сборка sublime даже позволяет прямую команду вместо двойных кавычек. Попробуйте приведенный ниже код для системы сборки

после тщательного код-охота сеанс через интернет, я наконец придумал решение, которое позволяет compile + run ваш код C «в», в C99, в выделенное окно терминала. Я знаю, некоторые люди не любят C99. Мне тоже не нравятся некоторые люди.

в большинстве случаев Sublime компилируется и работает в код, но в C90 или меньшей версии. Так что если вы специально хочу, чтобы это был C99, это путь.

Примечание: кстати, я сделал это на машине Windows, не могу гарантировать для других! Возможно, там это не сработает.

1. Создайте новую систему сборки в Sublime: Инструменты > Система Сборки > Новая Сборка Система.

2. Новый файл под названием untitled.sublime-build будет создан.

скорее всего, Sublime откроет его для вас.

если нет, перейдите к Настройки > Просмотр Пакетов > Пользователь

если файл untitled.sublime-build здесь, потом открыть, если это нет, тогда создать ее вручную и открыть.

3. Скопируйте и вставьте приведенный ниже код в указанном выше untitled.sublime-build файл и сохраните его.

закрыть файл. Вы почти закончили!

4. Наконец переименуйте файл из untitled.sublime-build to myC.sublime-build , или вы могли бы также показать свое творчество здесь. Просто держите расширение файла таким же.

5. Наконец установить текущая Построить Систему к имени файла, которое вы написали на предыдущем шаге. В этом случае это myC

вуаля ! Compile + Run ваш код C с помощью C99 by Инструменты > Создать , или просто нажать Ctrl + B

лучшим способом было бы просто использовать Makefile для вашего проекта, и ST3 автоматически обнаружит систему сборки для вашего проекта. Например. Если вы нажмете shift + ctrl / cmd +B, вы увидите это:

попробуйте написать сценарий оболочки с именем run.sh в вашем проекте foler

и сделает Build System чтобы скомпилировать и выполнить его:

не забудьте $chmod +x run.sh

сделайте одну вещь и сделайте ее хорошо:)

вы используете sublime text в linux? Я получил ту же проблему, и она была решена! Вот мой c.sublime-build:

код, который работал для меня на машине Windows 10 с использованием Sublime Text 3

В Sublime Текст 3. Попробуйте изменить приведенный выше код на этот, обратите внимание на добавление «пуск».

Если вы кодируете язык C или c++. Я думаю, нам повезло, что мы могли бы использовать файл для ввода. Это так удобно и понятно. Я часто так делаю. Это аргумент для его реализации :

обратите внимание, что inputfile должен находиться в том же каталоге с файлом исходного кода, r-это подставка для чтения.

Как скомпилировать и запустить C в sublime text 3?

Я хотел бы скомпилировать и запустить программу C в sublime text 3 на ubuntu 14.04. В настоящее время программа компилируется с помощью gcc с использованием sublime text 3, выполняющего команду (см. код ниже), но мне было интересно, можно ли получить вывод выполнения программы также на консоли sublime text.

Вот что мне сейчас нужно скомпилировать C программу с sublime text 3

c_compile.sublime-build

Я пробовал добавить && ./$ вот так:

Но это дает мне эту ошибку:

Вот моя простая программа C, с которой я работаю:

Ех1-6.c

Редактировать #1, как полагают user2357112:

После изменения shell на true :

Вот что я получаю:

Редактировать #2 как полагает Евгений к:

Я попробовал изменить cmd только для запуска программы:

Он успешно запускается и выводит вывод на консоль с некоторым кодом:

До сих пор cmd либо компилируется, либо запускается, но не делает того и другого вместе, надеюсь, что-то можно сделать, чтобы заставить его компилироваться и запускаться с помощью одной команды.

12 ответов

Я совершенно новичок в программировании. Я понятия не имею, как скомпилировать & и запустить простую программу C в Sublime Text 2. (В колледже меня попросили использовать Turbo C++ 3.0, но я обнаружил, что IDE довольно древний.) Я использую Windows 8 (x64). Вот ошибка, которую я получил, когда.

Сейчас я изучаю C в колледже, и учителя сказали мне использовать codeblocks как IDE, но, на мой взгляд, codeblocks немного уродлив, и именно поэтому я выбрал Sublime Text 2, лучший текстовый редактор IDE/. На данный момент я пишу свой код через sublime, сохраняю его, а затем компилирую через mac.

Вы пробовали просто записать всю команду в одной строке?

Я считаю (полу-спекуляция здесь), что ST3 принимает первый аргумент как «program» и передает другие строки в качестве «arguments». https://docs.python.org/2/библиотека/подпроцесс.html#subprocess.Popen

Для системы сборки sublime, реализующей команду меню Выполнить :

Или

И вставьте это:

В примере *This используется компилятор GCC. Не стесняйтесь заменить gcc компилятором по вашему выбору.

Мы можем скомпилировать код C в Sublime Text и напечатать некоторое значение или строки, но он не принимает ввод от пользователя. (Пока я не узнаю. Я уверен в компиляции, но не в выводе из заданных входных данных.) Если вы используете Windows, вы должны установить переменные среды для Sublime Text и компилятора GCC.

После тщательного поиска кода в Интернете я, наконец , придумал решение, которое позволяет вам скомпилировать + запустить ваш код C «together at once» в C99 в выделенном окне terminal . Я знаю, некоторым людям не нравится C99 . Мне тоже не нравятся некоторые люди.

В большинстве случаев Sublime компилирует и запускает код, но в C90 или меньшей версии. Так что , если вы специально хотите, чтобы это был C99, это правильный путь.

NOTE : Кстати, я сделал это на машине Windows, не могу гарантировать для других! Вероятно, там это не сработает.

1. Создайте новую систему сборки в Sublime: Инструменты > Система сборки > Новая система сборки. ..

2. Будет создан новый файл с именем untitled.sublime-build .

Скорее всего, Sublime откроет его для вас.

Если нет, перейдите в Настройки > Обзор пакетов > Пользователь

Если файл untitled.sublime-build есть , откройте его , если его нет , создайте его вручную и откройте .

3. Скопируйте и вставьте приведенный ниже код в вышеупомянутый файл untitled.sublime-build и сохраните его.

Закройте файл. Вы почти закончили!

4. Наконец , переименуйте свой файл с untitled.sublime-build на myC.sublime-build , или вы можете также показать свое творчество здесь. Просто сохраните расширение файла таким же.

5. Наконец , установите для текущей системы сборки имя файла, которое вы написали на предыдущем шаге. В этом случае это myC

Вуаля ! Скомпилируйте + запустите код C с помощью C99 с помощью Инструментов > Сборка или просто нажав Ctrl + B

Я уже успешно установил плагин TypeScript на Sublime Text 3. После установки плагина в меню добавляется система сборки. Вы можете просто использовать Command + B для создания файла .ts. Я хочу скомпилировать .ts в .js и запустить результирующий js-файл с помощью node xxx.js в одной команде Command.

Я знаю, что мы можем скомпилировать программу как C++ с помощью компилятора g++. Но компилятор g++ по умолчанию имеет версию 98. Чтобы запустить его как C++ 14, нам нужно добавить -std=c++14 в terminal. Sublime Text считается ценным редактором для конкурентного программирования из-за его легкого.

Инструкция основана на посте «icemelon». Ссылка на сообщение:

Используйте ссылку ниже, чтобы узнать, как настроить переменную среды на вашем OS:

Приведенная ниже инструкция была протестирована на системе Windows 8.1 и Sublime Text 3 — build 3065.

1) Установите MinGW. 2) Добавьте путь к «MinGWbin» в переменной среды «PATH».

«System Properties -> Advanced -> Environment» переменных и там обновляют переменную «PATH».

3) Затем проверьте переменную среды PATH с помощью команды ниже в «Командной строке»:

4) Добавьте новую систему сборки в Sublime Text.

Моя версия кода ниже («C.sublime-build»).

Последняя сборка sublime даже позволяет использовать прямую команду вместо двойных кавычек. Попробуйте приведенный ниже код для системы сборки

Лучшим способом было бы просто использовать файл Makefile для вашего проекта, и ST3 автоматически определит систему сборки для вашего проекта. Например. Если вы нажмете shift + ctrl/cmd +B, вы увидите это:

попробуйте написать сценарий shell с именем run.sh в папке проекта

и сделайте Build System , чтобы скомпилировать и выполнить его:

не забудь $chmod +x run.sh

сделайте одну вещь и сделайте это хорошо:)

Код, который работал для меня на машине Windows 10 с использованием Sublime Text 3

Вы используете sublime text на linux? У меня была та же проблема, и она была решена! Вот мой c.sublime-build:

В Sublime Text 3. Try, изменив приведенный выше код на этот, обратите внимание на добавление «start».

Если вы кодируете язык C или C++. Я думаю, что нам повезло, потому что мы могли бы использовать файл для ввода. Это так удобно и понятно. Я часто так делаю. Это аргумент для его реализации :

Обратите внимание, что inputfile должен находиться в том же каталоге, что и файл исходного кода, r-это подставка для чтения.

Как писать код и сразу видеть результат

Обзор инструментов крутых программистов.

Когда только начинаешь программировать и делать сайты, важно понимать, что вообще происходит. Вот изменил ты параметр объекта — а правильно или нет? Заработало это или нет? Красиво вышло или ужасно?

Чтобы разработчик сразу видел результат труда, боги создали для него IDE — integrated development environment, по-русски — среду разработки. Это программа, в которой программист пишет код, ловит ошибки и наблюдает результат.

Чисто технически работать можно и без IDE: писать код в блокноте и просматривать его в специальных программах или браузере. Но это бывает медленно и требует дополнительных телодвижений. Лучше научиться пользоваться IDE и писать в сто раз быстрее.

Выбор среды разработки (IDE) — дело вкуса и привычки. Какие-то из них — универсальные, другие заточены под конкретные языки программирования. IDE часто похожи по своим возможностям и позволяют увеличивать функциональность за счёт внешних дополнений.

Visual Studio Code

Программу можно скачать с официального сайта. Несмотря на то, что VS Code делает Микрософт, это бесплатный продукт с открытым исходным кодом, доступный на всех платформах. Благодаря этому и своим возможностям VS Code стал одной из самых популярных сред для разработки в мире.

VS Code распознаёт почти все существующие языки программирования, самостоятельно или с помощью плагинов, и форматирует их соответствующим образом. Кроме этого, у него глубокая поддержка HTML, CSS, JavaScript и PHP — он проследит за парными тегами, закрытыми скобками и ошибками в командах.

Вот самые интересные возможности VS Code.

Умное автодополнение. Программа анализирует, какую команду вы хотите ввести, и предлагает закончить фразу за вас, с подсказками и объяснением. Удобно, если вы забыли порядок следования переменных или как точно звучит нужная команда:

Выполнение скриптов по шагам. Иногда нужно иметь возможность выполнить скрипт не сразу, а по шагам, например, чтобы понять, не зациклилась ли наша программа. Для этого используйте встроенный дебаггер — это программа, которая следит за кодом, ищет в нём ошибки и позволяет выполнять его поэтапно.

Множественное выделение и поиск. Чтобы поменять много одинаковых значений переменных или найти все одинаковые слова или команды, VS Code использует свой алгоритм обработки. Благодаря этому редактировать код становится проще, а замена функций или переменных происходит быстрее.

Мультикурсор помогает вводить одинаковые значения сразу на нескольких строках

Найденные одинаковые слова и команды можно тут же заменить на другие

Навигация по коду и описания функций. Когда пишешь большую программу, легко забыть то, что делал в начале — как работает функция или какого типа переменная используется в этом месте. Чтобы этого избежать, VS Code может показывать саму функцию, описание переменной или какие параметры передаются при вызове команды. Ещё это пригодится, если код достался вам по наследству от прошлого разработчика и нужно быстро понять, какие куски кода за что отвечают и как работают:

Сразу после установки VS Code не умеет показывать результаты работы кода, когда мы делаем веб-страницы. Это можно исправить с помощью расширения Live HTML Previewer. Для этого заходим в раздел «Extensions», щёлкая на последнем значке на панели слева или нажимая Ctrl+Shift+X, и начинаем писать «Live HTML Previewer» в строке поиска.

После установки и запуска расширения можно будет сразу видеть, как ваш HTML-код и CSS влияют на внешний вид и поведение страницы. Это особенно удобно, когда строишь сайт с нуля и хочешь сразу понимать, что происходит.

WebStorm

Среда разработки для JavaScript от компании jetBrains стоит денег, но есть пробный период в 30 дней. Вполне хватит, чтобы попробовать и понять, нужна эта программа или нет.

Автоподстановка. Некоторые IDE с автоподстановкой тормозят и не предлагают сразу все варианты переменных или команд — но не WebStorm. Здесь всё работает с первой буквы и понимает, когда надо предложить переменную, а когда команду или служебное слово:

Встроенная система задач. Полезно, когда в работе много проектов и нужно по каждому помнить, что ты хотел в нём сделать. Здесь это реализовано сразу и доступно для любого файла:

Проверка ошибок. WebStorm умеет сам проверять код на ошибки и пояснять каждую из них. Не всегда это работает идеально, но когда работает — экономит кучу времени:

Чтобы сразу видеть, что получается на странице, нам понадобится плагин LiveEdit. По умолчанию он выключен, но его можно включить или поставить отдельно в любое время. После активации нужно будет в настройках плагина поставить галочку «Update application in Chrome on changes in» — она как раз отвечает за обновление информации в браузере Chrome. Теперь можно писать код и сразу видеть результат:

Sublime Text 3

Бесплатный редактор, который назойливо предлагает занести денег разработчикам. Про Sublime Text у нас есть отдельная и более подробная статья — почитайте, там тоже интересно.

Sublime Text — потрясающе мощный текстовый редактор. Его сила — в скорости работы, он одинаково быстро обработает простую веб-страничку или программу на сто тысяч строк кода. Подсветка синтаксиса всех возможных языков программирования, автоподстановка, умное закрытие тегов — всё это доступно сразу после установки.

Пример разметки HTML-кода в Sublime Text

Вот что ещё умеет программа сразу после установки:

показывать разными цветами команды и переменные в популярных языках программирования;
автоматически завершать команды;
выделять сразу все одинаковые слова;
сворачивать код для удобства чтения;
использовать любые горячие клавиши, какие только понадобятся;
разделять рабочую область на несколько окон, в каждой из которых можно редактировать свой код.

Вторая суперспособность, которая превращает Sublime Text из простого текстового редактора в универсальное решение, — плагины. По принципу действия они такие же, как и в других программах из обзора, но они совершенно не влияют на скорость работы. Когда начинаешь плотно работать с Sublime Text, может показаться, что у него есть плагины для всего. Нужно редактировать одновременно один и тот же код, но в разных панелях — пожалуйста, написать быстро HTML-код — само собой, проверить код на ошибки и недочёты — без проблем.

Emmet сокращает время на написание кода, подставляя вместо стандартных команд целые куски готового кода

JavaScript & NodeJS Snippets упрощает написание кода на JavaScript и работает по тому же принципу, что и Emmet

SublimeCodeIntel помогает быстро разобраться в коде со множеством функций. Если щёлкнуть на название любой функции, плагин сразу покажет вам её описание.

Так как эта статья — для начинающих программистов, которым важно сразу видеть изменения в коде, то посмотрим, как это делает Sublime Text.

Сразу после установки он этого делать не умеет, но нам поможет плагин LiveReload. Он показывает все изменения в браузере, как только мы сохраняем рабочий файл с кодом. Это не так изящно, как в VS Code, но в случае с Sublime Text простительно. Дело в том, что привыкнув однажды писать в нём код, сложно пересесть на что-то другое, что работает с той же скоростью. Установка LiveReload состоит из двух компонентов — плагин для Sublime Text и расширение для браузера.

После установки давайте посмотрим, что у нас получилось. Создадим файл tested.html в Sublime Text, разметим его внутри стандартным шаблоном как HTML-документ, а рядом откроем окно браузера.

В реальном времени мы не увидим на странице те изменения, которые вносим в код, как это было в VS Code. Но если нажать Ctrl+S, чтобы сохранить все данные, то браузер моментально показывает то, что мы сделали.

Если вы серьёзно настроены программировать, присмотритесь к Visual Studio Code. Почти со всем он справляется сам или с плагинами, не нужно подключать дополнительно браузеры или сторонний софт.

Любите, чтобы после установки были доступны почти все нужные функции? Попробуйте WebStorm — платную, но мощную среду разработки.

Если вам важна скорость работы в любых ситуациях, то Sublime Text — лучший выбор. Он очень быстрый, и для него есть плагины почти на все случаи жизни.

Как настроить Sublime Text 3

TimeWeb.com/ru/community/article/e6/e69dd8ca8f387a1fe3fcc43687cbc548.jpg» />

Sublime Text 3 – это текстовый редактор, разработанный для верстальщиков и программистов. Он позволяет работать с кодом разных языков программирования: от Erlang до C++. Свою популярность он получил благодаря кроссплатформенной поддержке и расширенным настройкам, которые позволяют пользователю легко «играть» с параметрами программы. Вариаций довольно много – можно изменить и внешний вид, и дополнить функционал с помощью различных плагинов.

Что еще есть в Sublime Text 3 и как со всем этим работать – поговорим в сегодняшней статье.

Инструменты Sublime Text 3

Текстовый редактор Sublime обладает большим функционалом, который упрощает написание кода и его компиляцию. Из особенностей выделяют следующее:

Goto Anything – удобная функция, позволяющая быстро получить доступ к нужным файлам.
Сопоставление скобок – позволяет быстро определить неправильное сопоставление. Редактор напрямую выделяет соответствующие наборы скобок.
Множественное выделение – полезная функция, позволяющая быстро изменять код в нескольких местах.
Мощный Python API, благодаря которому Sublime обходит многих конкурентов. Он дает возможность достигать высокой производительности за счет дополнительных плагинов.
Раздельное редактирование – благодаря этой функции можно разделять окно на несколько столбцов, например, один назначить под HTML, другой – под CSS, третий – под JavaScript.
Сочетание клавиш – позволяет присваивать комбинацию клавиш к различным функциям.

Настройка Sublime Text 3

Первым делом рассмотрим настройки внешнего вида, а затем перейдем к горячим клавишам и установке плагинов.

Изменяем внешний вид

По умолчанию Sublime поставляется с черной темой, которая подойдет каждому, но если нужны изменения, то никто не запрещает их сделать.

Переходим в меню «Preferences» и выбираем «Color Scheme…».TimeWeb.com/media/articles/0001/03/48c8beca5c5e008be8754b3159340a2058c2c384.png» />
В результате перед нам отобразится дополнительное меню с предустановленными вариациями. Например, возьмем цветовую схему «Mariana».TimeWeb.com/media/articles/0001/03/e848e4decaecf4ee0cb10aa0e242584b4a728041.png» />

На этом настройки не ограничиваются – мы также можем изменить шрифт текста и его размер, добавить новые темы и многое другое.

Сделать это можно через «Preferences» -> «Settings». Слева находятся значения по умолчанию – их менять не нужно. А вот справа расположены пользовательские настройки, которые можно изменять и дополнять.

TimeWeb.com/media/articles/0001/03/fed966c747f08b43d9d8bdfd1f64b9a10dc756b6.png» />

«color_scheme» – здесь прописывается цветовая тема (можно выбрать из существующих и добавить собственную);
«font_face» – позволяет изменить шрифт текста на любой, что есть в системе;
«font_size» – предназначена для увеличения или уменьшения размера текста;
«font_options» – устанавливает/удаляет жирность или курсив текста;
«word_separators» – разделители слов;
«line_numbers» – настройка нумерации слов;
«gutter» – включает или отключает отображение номеров строк и закладок («канавка»);
«margin» – настраивает отступ от «канавки»;
«fold_buttons» – позволяет отключить треугольные стрелки, отображаемые в «канавке».

Например, мы можем установить следующие значения:

TimeWeb.com/media/articles/0001/03/ef74602b3d61c3b0b6dbe6096032c007e3f0c829.png» />

Для сохранения изменений не забудьте воспользоваться комбинацией клавиш «CTRL+S».

Настраиваем горячие клавиши

Мы привыкли использовать комбинации клавиш, чтобы скопировать, вставить или выделить весь текст. В Sublime Text можно установить свои пользовательские комбинации.

Например, нам нужно, чтобы комбинация «CTRL+C» не копировала текст, а вырезала его. Для этого необходимо перейти в «Preferences» -> «Key Bindings».

TimeWeb.com/media/articles/0001/03/5a54b99ce408af8e7c6c6869882b73770844bda3.png» />

Затем в правом столбце нужно прописать нужную комбинацию клавиш и указать ей значение «cut». В конце сохранияемся комбинацией клавиш «CTRL+S».

TimeWeb.com/media/articles/0001/03/e32997faab85138e7938ffa4e7906e4e3378de72.png» />

Аналогичным образом вы можете изменять другие комбинации либо добавлять собственные.

Русифицируем Sublime Text с помощью плагина

Как мы уже говорили ранее, основная фишка Sublime – плагины, с помощью которых можно менять функционал программы. Для их установки используется дополнительная утилита Package Control, которая позволяет находить и инсталлировать разные плагины.

Для примера давайте русифицируем программу с помощью плагина LocalizedMenu:

Открываем Sublime Text и используем комбинацию клавиш «CTRL+SHIFT+P». В отобразившемся окне вводим «Package Control: Install Package» и кликаем по первому запросу.TimeWeb.com/media/articles/0001/03/1728b77884d672e3015efc3e9a3db2c75a9a174a.png» />
В результате перед нами отобразится новое поисковое окно, через которое можно найти различные плагины. В нашем случае нас интересует «LocalizedMenu» – вводим запрос и устанавливаем расширение.TimeWeb.com/media/articles/0001/03/3e38017bbd7eed6a65499dfce74260f17d66639b.png» />
После установки плагина ничего не поменяется, так как плагин не русифицирует программу, а предлагает различные варианты ее перевода. Чтобы установить русский язык, перейдем в «Preferences» -> «Languages» -> «Русский».TimeWeb.com/media/articles/0001/03/92a06c31e7942a76da779002b89a6becf0f9906f.png» />

Вот такими несложными действиями у нас получилось установить один из тысячи плагинов. Вы можете добавлять любые расширения, которые есть в пакете Sublime.

Разделяем экран

Еще одна интересная функция, о которой я уже говорил – разделитель экрана. Ей часто пользуются веб-разработчики для удобства перемещения между HTML и CSS. Активировать ее можно следующим образом:

Переходим в «Вид» -> «Разделение экрана». Перед нами отобразится несколько вариантов разделения экрана, для примера разорвем страницу на 2 столбца.TimeWeb.com/media/articles/0001/03/b669130f3ddfa780148f56d3db980e3931ae24c6.png» />
В итоге получим следующее:TimeWeb.com/media/articles/0001/03/1f3b8fc1096b194962da5216c3fac0fd0502abdd.png» />
В каждом столбце мы также можем добавлять несколько вкладок:TimeWeb.com/media/articles/0001/03/9fa4603587d07ba996c83b90c8707a86d63be756.png» />

На этом настройка Sublime Text завершена – теперь вы можете использовать программу в полной мере. Чтобы вам было еще проще, ниже я рассмотрю некоторые плагины, которые заметно упрощают работу с кодом.