Sublime text javascript плагины

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

📝 Collection of plugins for Frontend Web Development

jfilter/Sublime-Text-Plugins-for-Frontend-Web-Development

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Sublime Text 3 Plugins for Frontend Web Development

Sublime is great and for many still the best text editor available. But out of the box, it lacks some features that modern competitors have already built-in. Plugins help to stay ahead but it’s a hassle to keep up with all of them. In order to help you, I compiled a list of plugins I use for my daily frontend web development.

If you know plugins that should be on this list, just open an issue. 😉

This list was shared by (among others):

These plugins are kind of ‘meta’ because they are not concerned with writing code.

• Package Control: This package enables you to install other packages. Since build 3124, you can install it within Sublime via Tools ➡ Install Package Control.
• AdvancedNewFile: A better way to create new files. For instance, it automatically creates a folder when needed.
• SideBarEnhancements: Adds features such as renaming to the sidebar.
• A File Icon: Add icons to the files in the sidebar.
• ProjectManager: Organizing project files by putting them in a central location.
• TodoReview: Scans files for TODO s and more.
• FindKeyConflicts: Key conflicts are inevitable when you use a lot of plugins.
• Editor Config: Maintain consistent coding styles between different editors.
• Sync Settings: Keep Sublime settings in sync via Github-Gist.
• Package Syncing: Keep all you settings, packages etc in sync via Dropbox and co
• SFTP: Transfer files to a server via FTPS and SFTP. The plugin is like Sublime Nagware. You can use it for free but get a reminder to buy a licence.
• TerminalView: A Linux/macOS plugin for Sublime Text 3 that allows for terminals inside editor views.

• All Autocomplete: Indexes all open files for auto-completion.
• BracketHighlighter: Improves the already built-in highlighting.
• Terminal: Open Terminal with current working directory set to the directory of the open file on a hot key.
• AlignTab: Align your code by : , = , => , % , «, | or your own RegEx.
• GitGutter: Displays modified lines in the gutter (left to the line numbers).
• Git: Includes some git commands.
• GitSavvy: Full git and GitHub integration.
• Gitignore: Fetches templates for the .gitignore provided by Github.
• Local History: Keep a local history of your files.
• DashDoc: Open current selection in Dash on a hot key.
• Text Pastry: Extend the power of multiple selections with features such as incremental numbers and date ranges.

• Tern for Sublime: Static Javascript code analyzer with auto-completion, function argument hints, ‘go to definition’ and more. The installation and configuration can be a little bit tricky but it’s worth it. Choose Tern over SublimeCodeIntel (unmaintained) and JavaScript Completions (buggy).
• JavaScript Enhancements: Another plugin that gives auto-completion and alltogether improves the Javascript development environment.
• ImportJS: Automatically manage your module imports.
• JavaScript & NodeJS Snippets
• JsPrettier: Integration of Prettier, the opinionated JavaScript formatter.
• Console Wrap: Fast way to log to console.
• DoxyDoxygen: Generate code documentation blocks for your functions.
• Babel: Syntax definitions for ES6 JavaScript with React JSX extensions.
• TypeScript
• Elm Language Support

• Sass: Sass is a preprocessor extending CSS and this plugins adds the language support.
• SassSolutions: Auto-complete for variables and mixins from your ‘settings.scss’ file.
• CSS3: Replaces the built-in CSS support with a more up-to-date one. Includes cssnext support. Follow the instructions to make it work properly.
• Emmet: Allows you to write HTML very fast. You have to learn their way though.
• Color Highlighter

Linters help you to spot mistakes in your code early on. In order to make them work properly, check the instructions in the packages. For some, you have to install additional tools.

• SublimeLinter
• SublimeLinter-HTML-tidy
• SublimeLinter-contrib-stylelint: For CSS. Choose stylelint over SublimeLinter-CSSlint.
• SublimeLinter-contrib-SCSS-lint
• SublimeLinter-contrib-ESLint
• SublimeLinter-flow
• SublimeLinter-contrib-elm-make
• SublimeLinter-JSON

The built-in themes do not support recent syntax such as ES2015. In the following, I list some I have test and do it.

• Solarized Color Scheme: Replaced the outdated built-in one
• The two theme installed by Babel: Monokai Phoenix and Next
• Oceanic Next Color Scheme
• ayu
• LightScript
• Material Theme
• Boxy Theme

This work is licensed under a Creative Commons Attribution 4.0 International License.

Источник

Лучшие плагины для Sublime Text

Мощный инструмент для дебаггинга JavaScript, полноценный инспектор кода для Sublime. Фичи: установка брейкпоинтов прямо в редакторе, показ интерактивной консоли с кликабельными объектами, остановка с показом стек трейса и управление шагами дебаггера. Все это работает на ура! А еще есть Fireplay от Mozilla, который позволяет подключаться к Firefox Developer tools и максимально простой дебаггер JSHint.

Emmet

Один из самых популярных плагинов для редакторов. Emmet, бывший Zen Coding, является также одним из самых значительных методов повышения продуктивности веб-разработчиков. После нажатия на табуляцию Emmet преобразует простые сокращения в объемные фрагменты кода для HTML и CSS. Хочется еще поделиться плагином Hayaku — коллекцию удобных аббревиатур для каскадных стилей.

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

Git

Суть этого плагина понятна из названия — возможность работать с Git прямо в вашем любимом редакторе. Данный способ работы с Git позволит вам сэкономить массу времени. Во-первых: вам не придется постоянно переключаться между окнами Sublime и терминала. Во-вторых: есть грамотный автокомплит и вместо git add -A, достаточно написать add. В-третьих: существуют такие мелочи как Quick commit, который одной командой quick добавляет все изменения и коммитит их.

Если от Git вам необходима возможность только забирать содержимое с удаленных репозиториев, то с этой задачей прекрасно справляется Fetch.

Существует еще Glue, который выводит внизу небольшое окошко, где можно писать на Shell. Благодаря этому из редактора теперь будет доступен не только Git…

GitGutter и Modific

Данные плагины подсвечивают строки измененные последним коммитом, другими словами diff tools в режиме реального времени.

BracketHighlighter

Мега круто! Открытие и закрытие любого фрагмента в коде должно выглядеть именно таким образом.

EditorConfig

Суть этого плагина заключается в том, чтобы предоставить возможность разработчиком иметь единый формат настроек для всех редакторов/IDE и всех языков программирования. Файлы .editorconfig хранят в себе информацию о табуляции, ширине отступа, кодировке и прочих конфигурациях.

# Корневой файл EditorConfig root = true # Для всех файлов используем unix-совместимые переносы строк [*] end_of_line = lf insert_final_newline = true # отступы в 4 пробела [*.py] indent_style = space indent_size = 4 # Используем табы для отступов (Не указываем размер) [*.js] indent_style = tab # Перезависываем настройку отступов для js файлов в папке lib [lib/**.js] indent_style = space indent_size = 2 # Только для файлов package.json or .travis.yml [] indent_style = space indent_size = 2 

Sublimall

Замечательный плагин, который синхронизирует все конфигурации (настройки, плагины, рабочие файлы) между вашими Sublime Text редакторами. Все абсолютно бесплатно, требуется только создать аккаунт. Более простая альтернатива — BufferScroll.

AllAutocomplete

Классическое автодополнение в Sublime Text работает только с текущим файлом. AllAutocomplete осуществляет поиск по всем файлам открытым в текущем окне, что значительно упрощает процесс разработки. Также существует плагин CodeIntel, который воплощает в себе возможности IDE и помимо умного автокомплита привносит в Sublime «Code Intelligence» для ряда языков: JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP.

SublimeREPL

Вероятно, один из самых полезных плагинов для разработчиков. SublimeREPL позволяет прямо в редакторе интерпретировать целое множество языков: Clojure, CoffeeScript, F#, Groovy, Haskell, Lua, MozRepl, NodeJS, Python, R, Ruby, Scala, shell.

DocBlockr

DocBlockr станет для вас эффективным помощником при документировании кода. После ввода /** и нажатия на клавишу Tab плагин автоматически распарсит любую функцию и подготовит соответствующий шаблон.

Floobits

Потрясающее расширение для SublimeText, Vim, Emacs, IntelliJ IDEA, которое позволяет разработчикам совместно работать на кодом, причем из разных редакторов.

AutoFileName

Автозаполнение путей к подключаемым файлам — очень удобно. Без лишних слов.

ColorPicker

Обычно, когда нам требуется цветовая палитра мы привыкли использовать Photoshop или Gimp. Но полноценный color picker может быть прямо в окне вашего редактора — Ctrl/Cmd + Shift + C. А еще есть замечательные GutterColor и ColorHighlighter, которые упрощают ориентирование в цветовых кодах:

Colorcoder
Разукрашивает все переменные, тем самым значительно упрощая ориентацию в коде. Особенно полезно для разработчиков с дислексией.

PlainTasks

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

MarkdownEditing

Вероятно лучший плагин для работы с Markdown: подсветка, сокращения, автодополнение, цветовые схемы и др. Как альтернативно решение, можно попробовать MarkdownPreview.

Напоследок:

• Sublime SFTP
• CTags — поддержка CTags в Sublime.
• SideBarEnhancement — множество дополнительных функций контекстного меню в сайдбаре.
• ActualVim — Vim в Sublime — два любимых редактора в одном.
• SublimeLinter — поддержка линта для множества языков: C/C++, Java, Python, PHP, JS, HTML, CSS и др.
• CSScomb — комбинирует CSS свойства в определенном порядке.
• FixMyJS, Jsfmt и JsFormat — плагины для форматирования JS/JSON-кода.
• AStyleFormatter — форматирует C/C++/C#/Java код.
• SVG-Snippets — большая коллекция полезных шаблонов при работы с SVG.
• Inc-Dec-Value — позволяет изменять числа, даты, HEX цвета с помощью стрелок на клавиатуре, подобно инспектору в браузере.
• Trailing Spaces — подсвечивает удаляет все случайные пробелы в конце строк при сохранении файла.
• Alignment — функциональное выравнивание фрагментов кода от автора Package Control.
• Placeholders — коллекция шаблонов с параграфами, изображениями, списками, таблицами и тд.
• ApplySyntax — налету определяет синтаксис в текущем файле.
• StylToken — подсветка определенных фрагментов текста, как в Notepad++.
• EasyMotion — удобный переход к определенному символу с помощью клавиатуры.
• ZenTabs и Advanced​New​File — усовершенствуют стандартное отображение вкладок и создание файлов.
• EncodingHelper — отображает кодировку файлов в строке статуса и оповещает о соответствующих ошибках.
• Gist — синхронизирует GitHub Gist с Sublime (ST2).
• Clipboard History (ST2) — плагин ведет историю буфера обмена, что позволяет вставить не только последний скопированный фрагмент кода, но и любой из предыдущих.
• Темы и цветовые схемы:
  • Soda
  • Spacegray
  • Flatland
  • Tomorrow
  • Base 16
  • Solarized
  • Predawn
  • itg.flat
  • Для всех других предпочтений есть Color Schemes и Сolorsublime.

  * В некоторых репозиториях указано, что плагин написан под ST2, но я все проверял и многое использую сам под ST3.
  * Я не стал описывать ряд плагинов, которые выполняют действия по форматированию, компиляции, оптимизации, ибо искренне убежден, что это задачи для Grunt, Gulp, Prepros или CodeKit.

  Источник