Как настроить sublime text 3 для javascript

Sublime text 3 плагины для разработки. Установка и настройка.

Для разработки существует множество редакторов и IDE, но на данный момент Sublime Text 3, один из самых популярных редакторов среди веб разработчиков. За что же его так любят? Первое это скорость работы, второе возможность установки плагинов и пакетов которые позволяют расширить родной функционал редактора.

В этой статье мы рассмотрим самые необходимые Sublime text 3 плагины которые помогут вам в работе. Первым делом нам необходимо установить Package Control (пакетный менеджер). Я описывал подробно этот процесс, а так же как установить плагины в прошлой статье о sublime.

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

Sublime text 3 плагин для форматирования кода HTML-CSS-JS Prettify

Часто во время работы мы не следим за правильным форматированием кода. Этот пакет, позволяет вам форматировать HTML, CSS, JavaScript код и JSON файлы. Устанавливается он как и все плагины. Вызовите Command Palette наберите prettify, выберите HTML-CSS-JS Prettify. Нет необходимости проводить настройку, сразу можно использовать.

• Вариант 1. Выделяем код и нажимаем правой кнопкой мыши на нем, так же можно просто кликнуть по вкладке редактора и выбираем HTML/CSS/JS Prettify → Prettify Code
• Вариант 2. Откройте файл с кодом, запустите консоль Sublime через меню View → Show Console и наберите view.run_command(«htmlprettify») .
• Вариант 3. Так же для быстрого форматирования можете использовать горячие клавиши Ctr + Shift + H

Emmet быстрое написание кода.

Плагин Emmet ускоряет написание кода с помощью горячих клавиш и сниппетов. Помимо Sublime Text, Emmet может работать и с другими редакторами, такими как — Notepad++, Coda, Eclipse, TextMate и д.р. Emmet устанавливается так же как и другие плагины.

Как работает плагин Emmet?

Приведу пару примеров. Например при написании в редакторе ul без <> и нажатия Tab будет автоматически развернут полный список. Если мы хотим добавить еще элементы li пишем так ul>li

Таким же методом можно написать div.my-class для назначения класса элементу.

Для первоначального создания страницы достаточно добавить ! и нажать Tab.

Sublime Text 3 плагины для проверки кода

Плагин Sublime Linter

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

С помощью плагинов которые работают на основе Sublime Linter вы можете легко проверить практически любой код. Если вы совершите ошибку в коде, Sublime Linter подсветит её небольшим красным или желтым кружком.

Вызовите Command Palette — Package Control : Install Package наберите linter, выберите SublimeLinter
Далее нам необходимо установить линтеры для javascript и php.

Плагин ESLint для javascript

ESLint написанный Николасом Закасом. Его основное отличие от других линтеров в том что он анализирует не текст программ, а предварительно сгенерированное AST-дерево, что дает ему больше возможностей для анализа.

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

Чтобы им воспользоваться нужно установить его через npm глобально с помощью команды npm install -g eslint для работы npm требуется установить Node.js.

Далее создаем конфигурационный файл с правилами .eslintrc и кладем его в С:\User\username\.eslintrc ,
username заменяем на ваше имя пользователя.

Файл вы можете настроить под себя, или использовать уже готовые конфигурации. Пример моего файла конфигурации:

Следующее действие это установка ESLint в Sublime Text. Установка происходит аналогично другим плагинам через Command Palette. В поле поиска плагинов печатаем eslint, в списке который появился вы должны увидеть SublimeLinter-contrib-eslint используйте клавиатуру или мышь чтобы выбрать его.

Далее переходим в «Preferences / Package Settings / ESLint / Settings — User» в меню, и вставляем следующее:

Плагин PHP CodeSniffer

PHP CodeSniffer — содержит в себе два скрипта, главный phpcs проверяет PHP (так же JavaScript и CSS) файлы на наличие нарушений для определенного стандарта кодирования.

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

Для установки Code Sniffer у Вас уже должен быть установлен PHP и Composer пакетный менеджер, как установить Composer вы можете прочитать на официальном сайте.

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

/.composer/vendor/bin/ также вы можете узнать значение которое вы должны установить с помощью команды composer global config bin-dir —absolute в командной строке.

Для установки через Composer используем команду:

composer global require «squizlabs/php_codesniffer=*»

Далее необходимо установить стандарт кодирования, в нашем случае это будет WordPress Coding Standards, для установки снова используем команду Composer:

composer create-project wp-coding-standards/wpcs —no-dev

Следующий шаг — установка пакета sublime-phpcs и phpcs-linter стандартным способом через Package Control : Install Package, для его работы обязательно необходим Sublime Linter.

После установки из command palette выбираем Preferences: SublimeLinter Settings — User и изменяем user.linters.phpcs.standard на php стандарт который вы выбрали WordPress, WordPress-VIP, и тому подобные.

Для работы PHP Code Beautifier and Fixer необходимо прописать в переменную path путь к файлу phpcbf.bat который лежит в your_path_to_wpcs\vendor\bin\

И в пользовательские настройки ( Preferences — Package Settings — PHP Code Sniffer — Settings — User ) добавить:

Для запуска в Command Palette пишем fixer из списка выбираем PHP Сoding Standards Fixer: Fix this file (PHP Code Beautifier).

Второй вариант это использовать горячие клавиши, заходим в Preferences — Package Settings — PHP Code Sniffer — Key Bindings — User и добавляем:

Это основные Sublime text 3 плагины которые я рекомендую вам установить, конечно это не окончательный список, количество плагинов зависит от ваших потребностей и предпочтений. А какие вы используете? Напишите в комментариях.

Если статья оказалась вам полезной поделитесь ей с друзьями. Это поможет развитию проекта. И обязательно подпишитесь в наши сообщества в социальных сетях.

Источник

Быстрая настройка Sublime Text 3 для верстки сайтов

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

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

Сегодня мы рассмотрим максимально быструю настройку Sublime Text, самые популярные среди верстальщиков плагины для ускорения верски и установим одну из лучших и комфортных тем оформления редактора One Dark Material Theme.

По умолчанию Sublime Text выглядит довольно печально:

Установка Package Control в Sublime Text

Для начала необходимо настроить Package Control. Для этого нажимаем хоткей Ctrl+Shift+P. Во всплывающем окне набираем Install Package Control и выбираем соответствующий пунк. Через несколько секунд Package Control будет установлен, о чем вы получите соответствующее уведомление.

Если вы пользователь MacOS, необходимо нажать на клавиатуре Cmd+Shift+P.

Package Control необходим для того, чтобы вы могли устанавливать дополнения и плагины в Sublime Text 3 из репозитория пакетов.

Установка плагинов в Sublime Text

Далее необходимо установить нужные для работы плагины. Мы рассмотрим установку самых популярных среди верстальщиков плагины, которые значительно упрощают разработку. Вы также можете поэкспериментировать с другими плагинами в Package Control, может быть вам понравятся и другие из огромного количества доступных пакетов.

Для установки плагинов в Sublime Text через Package Control необходимо вызвать меню, как мы это делали ранее: Ctrl+Shift+P. Затем вводим команду «Install Package» и выбираем нужный пакет из списка.

Самые популярные плагины для Sublime Text:

• Emmet — ускоряет написание HTML и CSS кода до скорости света. Урок по Emmet;
• AutoFileName — дополняет код при написании путей до файлов в верстке;
• Gist — подключает в Sublime Text возможность использовать сервис сниппетов кода GitHub Gist. Урок по Gist;
• Sass — плагин для подсветки Sass синтаксиса в Sass и Scss файлах. Раскрывает Emmet в Sass файлах.
• terminus — плагин встроенного терминала Sublime Text.
• W3​CValidators — мощный набор валидаторов для HTML разметки, CSS, SVG и т.д.

Установка внешнего оформления Sublime Text

Мне очень нравится тема оформления One Dark Material Theme и подсветка кода соответствующей цветовой гаммой. Это наиболее сбалансированные, достаточно контрастные, но не слишком резкие цвета для комфортной работы в редакторе.

Дя установки цветового оформления One Dark нам необходимо доустановить следующие пакеты через Package Control:

• One Dark Color Scheme — цветовая схема для подсветки кода;
• One Dark Material — Theme — тема оформления UI Sublime Text.

Установка плагина вручную

Некоторые плагины более не обновляются в Package Control или просто там не фигурируют. Кое-какие из этих плагинов имеют жизненную необходимость при работе с кодом и их приходится устанавливать вручную.

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

Для установки BufferScroll вручную, перейдите на GitHub страницу плагина, скачайте и распакуйте его в любое удобное место на вашем диске. Далее в Sublime Text выбираем пункт меню Preferences > Browse Packeges. Откроется папка пользовательских данных на вашем диске. Скопируйте сюда папку, содержащую файлы Buffer Scroll и перезапуститие Sublime Text. Теперь плагин работает.

Тонкая настройка редактора, пресет моих настроек

Переходим к настройкам Sublime Text.

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

Код пресета для пользовательских настроек (Preferences.sublime-settings | Preferences > Settings) — отдельно:

Код пресета для пользовательских клавиатурных сокращений (Default (Windows).sublime-keymap | Preferences > Key Bindings) — отдельно:

Теперь при выделении и по нажатию Alt+Shift+F ваш код будет автоматически выравниваться отступами с соответствующей иерархией вложенности элементов.

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

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

Для того, чтобы сделать бэкап всех ваших настроек и быстро развернуть Sublime Text на другом рабочем месте, достаточно скопировать папку

«C:\Users\<Ваш пользователь>\AppData\Roaming\Sublime Text 3″
в потаенное резервное место на вашем диске или на флешку, а затем разместить у другого юзера или на другом компьютере в этой-же директории под пользователем.

Также дополнительно на ваше усмотрение можно отключить миникарту справа и скрыть меню. Это можно сделать перейдя в меню View > Hide Minimap и View > Hide Menu. Показать меню можно нажатием клавишы Ctrl на клавиатуре.

Премиум уроки от WebDesign Master

Создание сайта от А до Я. Комплексный курс

Создание современного интернет-магазина от А до Я

Источник

Настройка проверки синтаксиса «налету» HTML, CSS, JS, PHP в Sublime Text 3 на Windows 7

Всем привет. У Sublime Text 3 есть замечательный плагин Sublime Linter, который позволяет делать проверку кода на наличие синтаксических ошибок. Промучился я как-то с настройкой этого SublimeLinter, аж три дня. Но всё таки мои мучения прошли не зря и теперь Sublime на лету проверяет синтаксис в HTML, CSS, PHP и JS файлах. Вроде бы всё подробно расписано на различных форумах, а он в некоторых случаях не работает — и всё, хоть убей. Поэтому я и пишу эту статью, чтобы охватить всё и сразу.

ВНИМАНИЕ! Статья описывает настройку Sublime Text 3 (далее ST3) на Windows 7 x64 Professional.

1. Представим что вы уже установили ST3 на свой Win 7 и установили Package Control.

2. Теперь необходимо поставить дополнительные пакеты в ST3. Идем в Preferences -> Package Control -> Install Packages
И устанавливаем следующие пакеты:

— SublimeLinter
— SublimeLinter-html-tidy
— SublimeLinter-csslint
— SublimeLinter-jsl
— SublimeLinter-jshint
— SublimeLinter-php
— SublimeLinter-phplint
— LESS
— JSHint

3. Настройка проверки ошибок синтаксиса HTML
3.1. Скачиваем tidy.exe и кладем его в любую понравившуюся вам папку.
3.2. Добавляем путь до этой папки! с tidy.exe в переменную серды пользователя windows (PATH), настройки которой, находятся в Мой компьютер -> Свойства -> Дополнительные параметры системы -> Переменные среды… -> Выбираем переменную «PATH» -> Жмем «Изменить» добавляем путь.
ВНИМАНИЕ! Обратите внимание на точку с запятой «;» после каждого пути и не забудьте её прописать, а так же обратите внимание на обратный \ слеш.

4. Настройка проверки ошибок синтаксиса CSS
4.1. Скачиваем и устанавливаем node.js
4.2. Добавляем путь до папки (до папки!) с node.js в PATH (путь примерно следующий: C:\Users\User_name\AppData\Roaming\npm )! Незабываем про точку с запятой.
4.3. Устанавливаем csslint. Для этого — запускаем командую строку Windows от имени админа и пишем: npm install -g csslint

5. Настройка проверки ошибок синтаксиса JavaScript
5.1. Если не делали пункты 4.1. и 4.2. — то делаем.
5.2. Устанавливаем jslint и jshint, для этого выполняем ту же самую операцию что и в пункте 4.3. только пишем вместо csslint — jslint и jshint соответственно.

6. Настройка проверки ошибок синтаксиса PHP
6.1. Вот с этиим вобще гемор. Лично я долго искал проблему, почему же не работает подсветка.
6.2. (UPDATE) Дело в том, что многие (в том числе и я) в качестве локального сервера ставят себе Denwer. И черт его знает почему (не вдавался в подробности), но PHP денвера не воспринимается ST3, хоть убей. Он может выводить ошибки PHP в консоль ST3, но подсветки синтаксиса так и не будет.
P.S. Я специально добавил этот пункт, т.к. на многих форумах пишут, что ставим PHP, настраиваем пакеты ST3 и будет вам счастье. Но счастья не происходит, т.к. пункт с установкой PHP обычно сразу опускается из-за надежды на работоспособность(пригодность) denwer-a.

6.3. Поэтому, сразу идем сюды и скачиваем PHP. Установка PHP — просто разархивируйте архив в любую папку и пропишите путь до этой папки в PATH (пункт 3.2.)
6.4. Если у вас был прописан в PATH путь до папки с PHP денвера, то обязательно удалите его.

7. Файл конфигурации SublimeLinter.sublime.settings

НЕОБХОДИМО ПОПРАВИТЬ ПУТИ К tidy.exe и php.exe

8. Перезапускаем Sublime. Profit.

Еще! Бывает что некоторые забывают про режим debug mode у Sublimelinter. Чтобы его включить, жмем правой кнопкой мыши в любое место области редактирования ST3 -> SublimeLinter -> Debug Mode

Источник