Как сделать из sublime text ide
Обновлено: 02.07.2024
Когда только начинаешь программировать и делать сайты, важно понимать, что вообще происходит. Вот изменил ты параметр объекта — а правильно или нет? Заработало это или нет? Красиво вышло или ужасно?
Чтобы разработчик сразу видел результат труда, боги создали для него 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 может показывать саму функцию, описание переменной или какие параметры передаются при вызове команды. Ещё это пригодится, если код достался вам по наследству от прошлого разработчика и нужно быстро понять, какие куски кода за что отвечают и как работают:
После установки и запуска расширения можно будет сразу видеть, как ваш 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 — лучший выбор. Он очень быстрый, и для него есть плагины почти на все случаи жизни.
Мы собрали 10 отличных плагинов для Sublime Text, которые расширяют его базовую функциональность и упрощают жизнь разработчику.
Local History – своего рода локальная система контроля версий, как Git. Он создает резервную копию текущего файла в папке каждый раз, когда вы нажимаете ctrl + s, а также умеет сравнивать резервные копии файлов с текущей, как Git-команда diff.
Sublime Text не имеет встроенный терминал для работы с такими инструментами как Gulp, Grunt, Webpack, npm и другими. Данный плагин позволяет настроить для открытия консоли горячую клавишу, а также задать текущий каталог в качестве корневого, а путь к текущему открытому файлу в качестве основного.
Этот плагин позволяет расширить опции выпадающего меню в боковой панели редактора. К примеру, он добавляет в меню пункт «Open with», с помощью которого можно будет открывать разные типы файлов в различных программах и даже назначать горячие клавиши для этого. Например, для всех файлов изображений в качестве стандартной программы можно задать Photoshop, а html-файлы открывать в разных браузерах.
SFTP позволяет редактировать, удалять, просматривать, синхронизировать, загружать и скачивать файлы с удаленного сервера – один из самых удобных пакетов для Sublime Text.
Этот пакет позволяет получить доступ к заранее определенным файлам с помощью горячих клавиш.
Этот пакет генерирует случайные данные, например дату (в формате DD/MM/YYYY), целые числа в заданном диапазоне, случайные буквы, случайный абзацы текста, url, случайные слова, адреса электронной почты, имена людей, фамилии, hex цвета, IPv4 и IPv6 адреса.
Gist - это часть Github, в которой вы можете поделиться своими фрагментами или блоками кода. А данное расширение позволяет делать это не выходя из Sublime Text. Вы можете создавать, изменять, удалять или просматривать все свои Gist-ы с помощью нескольких команд.
Как можно понять из названия, AdvancedNewFile позволяет создавать новые файлы. Создавать файлы или папки можно прямо в Sublime Text на любом уровне каталога проекта. Помимо настроек для стандартных путей, можно устанавливать расширения по умолчанию для новых файлов.
SublimeCodeIntel фактически превращает ваш Sublime Text в полноценную IDE. Он имеет множество настроек и функций автодополнения большого количества типов файлов. Этот плагин поддерживает JavaScript, SCSS, Python, HTML, Ruby, Python3, XML, Sass, HTML5, Perl, CSS, Twig, Less, Node.js, TemplateToolkit и PHP.
Monokai Extended – альтернативная и расширенная версия цветовой схемы Monokai, которая установлена по умолчанию в Sublime Text.
Расширения для Sublime Text облегчают разработку и сильно упрощают жизнь программисту, поэтому следующие, 10 плагинов, которые я подобрал специально для вас, просто необходимо установить, если хотите ускорить свою разработку.
Расширение подсказывает во всплывающем окне названия для переменных и функций и автоматически заполняет названия.
Плагин значительно облегчает и ускоряет работу с разметкой. К примеру, написав html и нажав tab, вы получите стандартный каркас для html документа.
Название говорит само за себя. Расширение позволяет удалять, загружать, просматривать, синхронизировать и скачивать файлы с удаленного сервера.
С помощью этого плагина у вас появится возможность выбирать цвет из круговой палитры в формате hex. Плагин открывается в отдельном окне и позволяет узнать цвет с любой точки на экране с помощью пипетки.
Плагин превращает Sublime Text в IDE со множеством настроек и функций авто-дополнения большого количества типов файлов. Плагин поддерживает большое количество языков, начиная от HTML5 и до PHP.
Расширение позволит вам вставлять макетные изображений, списки и таблице, на подобие lorem ipsum. К примеру, написав img и нажав tab, у вас появиться код со ссылкой на изображение.
Плагин позволит вам открыть определенные файлы для которых вы установили горячие клавиши.
Это дополнение расширяет опции выпадающего меню в боковой панели редактора. Дает возможность установить открытие html-файлов в разных браузерах, а для открытия всех изображений поставить любую другую программу.
Плагин, который будет особенно полезен для front-end разработчиков. При двойном клике на цвет кода, сам код будет окрашиваться цветом, который этот код описывает.
Расширение создает резервную копию файла в папке при каждом нажатии ctrl + s. Также умеет сравнивать резервные копии файлов, как это делает команда diff в Git.
И еще кое-что.
Если вам понравилась моя подборка, то подпишитесь на мой телеграмм канал @pushkproger, чтобы видеть таких постов больше!
видел такой плагин WebInspector он работает только для Javascript или можно также просматривать и другие языки?
А можете объяснить, за что отвечает этот плагин в Sublime text 3 - CS-Script?
При чем тут тег Android? Android Studio имеет столько же и даже больше плагинов, а некоторые из вышеперечисленных функций доступны с коробкиДля тех кто пишет про PHPStorm: мы Вас сердечно поздравляем, но не во всех организациях и не все фрилансеры могут позволить себе такое дорогое ПО
Autosave Files on Window Blur ещё добавил бы к списку
У меня PHPStorm) А в целом спасибо, полезная и нужная подборка.
Единственное необходимое "расширение" для саблайма: IntelliJ IDEA (WebStorm, PhpStorm, PyCharm и тд)
Ответ на пост «Не знал что погода так много весит»
Из цикла "Прилетают как-то инопланетяне", 1996-2017
Прилетают как-то инопланетяне.
Ну, дело обычное, не первый раз, я уже на крыльцо не выскакиваю, прилетели и прилетели. Припарковали тарелочку, в дверь позвонили. Зашли, щупальца тянут здороваться - усвоили наш обычай, значит. Слово за слово, как дела на Альфе на Центавре - хорошо все, сады цветут, дети растут.
А у тебя что нового, спрашивают. А у меня как раз комп на ремонте, говорю - пойдем, прикол покажу, пока чайник греется. Сел за комп, планетяне за спиной встали, смотрят через плечо, гугукают тихонько меж собой, вежливо так делают вид, что интересно им. Включаю комп, захожу в панель управления, удаляю Амиго и прочую дрянь от мэйлру. Открываю проводник, захожу в Програмфилес, пальцем в экран тычу - видели, папки от удаленных программ остались? Макафи там всякие, Авасты. Во, и в Аппликейшендате тоже остались. И в реестре мусора полно от них. Все руками удалять приходится, прикиньте. А за спиной слышу - что-то притихли планетяне, совсем. Поворачиваюсь - а на них ни морды, ни лица нет, бледные стали, ну, по-своему - бледно-зеленые.
Спрашиваю - что случилось, что я пропустил. Переглянулись они, один откашлялся и говорит - знаешь, у нас такой буйни уже давно нет, много тысяч лет. Как заметили, что информационная энтропия увеличивается, так и завели такой порядок - если после удаления программы остается мусор, весь коллектив разработчиков этой программы сразу к стенке ставим и лазерами мелко шинкуем. Без суда, вот так.
Sublime Text — текстовый редактор с большим набором дополнительных возможностей. Поддерживает различные языки программирования и умеет подсвечивать синтаксис кода. Имеет множество дополнительных расширений, с помощью которых можно добиться максимально комфортной и удобной работы и на время забыть, что используешь обычный текстовый редактор, а не интегрированную среду разработки вроде Visual Studio или Eclipse.
Помимо этого в редактор встроены самые разнообразные функции для работы с текстом, которых обычно не встретишь в простеньких редакторах вроде стандартного блокнота. Среди наиболее интересных функций — смена регистра, перестановка и сортировка строк, использование регулярных выражений, а также использование нескольких курсоров одновременно. В этой статье мы расскажем, как установить Sublime text на компьютер и настроить его для комфортной работы с языками C и C++.
Скачиваем установщик
Запускаем установку
После того, как установочный файл загрузится, запускаем его. Появится окно с выбором пути установки приложения. Мы оставили его по умолчанию, но при большом желании можете изменить этот путь. После этого нажимаем кнопку next и ставим галочку в поле "Add to explorer context menu", если хотим, чтобы Sublime text можно было быстро найти в меню пуск:
После этого остаётся лишь нажать кнопку "Install" и немного подождать, пока установщик скопирует нужные файлы и поставит текстовый редактор на компьютер. По завершении установки остаётся лишь нажать кнопку "Finish" и можно приступать к написанию кода:
Устанавливаем 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.
Языки программирования: Python, C, C++, Pascal
Выпускница МГТУ им. Н.Э. Баумана
Programforyou — это сообщество, в котором Вы можете подтянуть свои знания по программированию, узнать, как эффективно решать те или иные задачи, а также воспользоваться нашими онлайн сервисами.
Читайте также: