- Better Comments Manager
- Drupal Русскоязычное сообщество
- Комментарии
- 10 расширений для VS Code, без которых я не могу программировать
- 1. Beautify
- 2. Better Comments
- 3. Bookmarks
- 4. Bracket Pair Colorizer 2
- 5. Format in Context Menus
- 6. Git Graph
- 7. GitLens
- 8. Indent Rainbow
- 9. Path Intellisense
- 10. Total Lines
- 27 удивительных инструментов VS Code для современных JavaScript-разработчиков
- 1. Project Snippets
- 2. Better Comments
- 3. Bracket Pair Colorizer
- 4. Material Theme
- 5. @typescript-eslint/parser
- 6. Stylelint
- 7. Markdownlint + docsify
- 8. TODO Highlight
- 9. Import Cost
- 10. Highlight Matching Tag
- 11. vscode-spotify
- 12. GraphQL for VSCode
- 13. Indent-Rainbow
- 14. Color Highlight
- 15. Color Picker
- 16. REST Client
- 17. Settings Sync
- 18. Todo Tree
- 19. Toggle Quotes
- 20. Better Align
- 21. Auto Close Tag
- 22. Sort Lines
- 23. VSCode Google Translate
- 24. Prettier
- 25. Material Icon Theme
- 26. IntelliSense for CSS class names in HTML
- 27. Path Intellisense
- Итоги
Better Comments Manager
Этот плагин полезен для раскрученных блогов, где много комментирующих и где админу блога приходиться очень часто отвечать на комментарии посетителей. Он дает возможность отвечать на комментарии прямо из админки блога, избавляя вас от необходимости открывать перед этим нужный пост.
Скачиваем плагин по ссылке в конце страницы и устанавливаем его:
1 Распаковываем архив.
2 Копируем папку better-comments-manager в /wp-content/plugins/.
3 Заходим в админку блога на вкладку «Плагины» и активируем плагин.
Все, плагин работает и им можно пользоваться. Он добавляет себя в главное меню, создавая пункт «Better Comments Manager» и еще добавляет себя в качестве подпункта в «Комментарии\Better Comments Manager«. Причем я заметил только одно отличие между ними: открывая управление комментариями через главный пункт почему-то не видно граватаров у ников комментирующих, а если через «Комментарии«, то их видно. Других различий я не нашел и поэтому пользуйтесь тем, что вам удобнее.
Плагин добавляет следующие вещи: поиск по комментариям (ищет по тексту комментария, имейлу, ссылке и по IP-адресу комментирующего), добавляет ссылки на Threaded Reply (ответ при использовании плагина древовидных комментариев «Brians Threaded Comments», если этот плагин не установлен, то ответ работает как обычный комментарий), New Reply (новый комментарий), View All (посмотреть все комментарии к этой записи).
И Threaded Reply и New Reply работают через технологию AJAX, то есть при клике на них появится текстовое окно для ввода комментария, а при сохранении комментарий будет записан без перезагрузки страницы.
Есть 2 режима просмотра комментариев: режим плагина по умолчанию «View Mode«, где все выглядит как обычно плюс поиск и 3 новые ссылки (перечислены выше) и режим «Mass Edit Mode» с более наглядным представлением комментариев (текст комментариев обрезается на определенном количестве слов, а вся информация по комментарию показана в одну строку).
Вроде почти ничего плагин то и не делает, но процесс ответов на комментарии стал проще и занимает намного меньше времени, чем раньше.
Источник
Drupal Русскоязычное сообщество
Приветствую ! Комментарии сделаны на Better Comments + AJAX Comments . Вылезла проблема, при загрузки изображения, после AJAX добавления картинка не появляется, если перезагружаем страницу, то все ок картинка есть.
Пробовал разные форматы вывода изображения , но проблема остается.
Подскажите в чем проблема, как решить ?
| Вложение | Размер |
|---|---|
| kenken.jpg | 60.14 КБ |
| 67453.jpg | 65.39 КБ |
- Drupal7
- AJAX Comments
- Есть вопрос
- Решение проблем
- Блог
- Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Комментарии
Сравните значения атрибута src, тега img, на обоих скриншотах.
Да, у вас сразу после загрузки почему-то отсутствует имя файла
Так да, это я вижу. Думал мож кто встречался с такой проблемой. Сам не потяну, буду искать реализатора.
Бывала такая проблема .
Полагаю путь уже настроен и imagecache работает так же, ?
1. Проверьте линку на фото через дебагер. Вставьте ее в отдельное окно. Если появлятся то.
2.Сделайте flush imagecache . Проще говоря удалите все временные картинки созданные imagecache .
3. Права на папка files/styles . Скорее всего не геренируются изображения из за кривости прав.
Так же скиньте, вывод журнала связанный с этой проблемой .
Источник
10 расширений для VS Code, без которых я не могу программировать
VS Code — мой любимый редактор кода. Это — самый популярный из существующих редакторов, возможности которого можно расширять практически до бесконечности. И, что удивительно, разработала его компания Microsoft . Я полагаю, что ни один из других редакторов и ни одна из других IDE не может дать разработчику хотя бы половину того, что способен дать ему VS Code. Одна из сильных сторон VS Code — это система расширений. Она позволяет создавать расширения буквально на все случаи жизни. Хочу рассказать вам о моём топ-10 расширений для VS Code.
1. Beautify
Для установки расширения воспользуйтесь в VS Code клавиатурным сокращением CTRL+P , введите в открывшееся поле нижеприведённую команду и нажмите Enter .
ext install HookyQR.beautify
Расширение Beautify позволяет форматировать html-, js-, css-, JSON- и sass-код. Параметрами форматирования можно управлять. Это расширение является надстройкой над стандартной системой js-beautify и позволяет разработчику форматировать код именно так, как ему нужно.
2. Better Comments
ext install aaron-bond.better-comments
Расширение Better Comments позволяет расширить возможности по работе с комментариями. В частности, оно позволяет делить комментарии на категории. Это могут быть уведомления, запросы, списки дел, примечания.
Использование Better Comments
3. Bookmarks
ext install alefragnani.Bookmarks
Расширение Bookmarks — это настоящий спасательный круг для программистов. Особенно для тех, которые потерялись среди тысяч строк кода. Это расширение позволяет прикреплять к строкам кода закладки. Если у строки кода есть закладка — к этой строке можно легко перейти, воспользовавшись списком закладок.
Закладки в коде
4. Bracket Pair Colorizer 2
ext install CoenraadS.bracket-pair-colorizer-2
Расширение Bracket Pair Colorizer 2 позволяет раскрашивать скобки, что облегчает нахождение пар открывающих и закрывающих скобок. Это очень полезно в тех случаях, когда приходится работать с вложенными друг в друга программными конструкциями.
Пары скобок выделены цветами
5. Format in Context Menus
ext install lacroixdavid1.vscode-format-context-menu
Расширение Format in Context Menus позволяет форматировать файлы, выделяя их в боковой панели и вызывая команду контекстного меню. Это особенно удобно в тех случаях, когда имеется множество файлов, которые нужно отформатировать, но при этом в имеющемся окружении нет поддержки средств для форматирования и линтинга кода.
Работа с Format in Context Menus
6. Git Graph
ext install mhutchie.git-graph
Расширение Git Graph позволяет просматривать структуру репозитория и, пользуясь этой структурой, выполнять различные операции. Это расширение поддаётся тонкой настройкой и обладает множеством возможностей. Вероятно, для того, чтобы как следует его описать, понадобится целая отдельная статья.
Работа с Git Graph
7. GitLens
ext install eamodio.gitlens
Расширение GitLens помогает выяснять авторство кода с использованием аннотаций git blame и линз. Это расширение, кроме прочего, позволяет очень удобно просматривать содержимое репозиториев и узнавать полезные сведения о коде.
Работа с GitLens
8. Indent Rainbow
ext install oderwat.indent-rainbow
Расширение Indent Rainbow позволяет раскрашивать отступы, выделяя разными цветами отступы разных уровней. Это особенно полезно при работе с глубоко вложенными конструкциями в языках наподобие Python.
9. Path Intellisense
ext install christian-kohler.path-intellisense
Расширение Path Intellisense оснащает редактор возможностями по автозавершению путей к файлам. Хотя VS Code поддерживает автозавершение путей и без расширений, эта возможность ограничена только HTML-, CSS- и JavaScript-файлами. Благодаря данному расширению автозавершением путей можно пользоваться при работе с любыми файлами и любыми языками.
Работа с Path Intellisense
10. Total Lines
ext install praveencrony.total-lines
Расширение Total Lines — это маленький удобный инструмент, который выводит в статус-баре сведения о количестве строк в открытом файле. Это — приятное дополнение к моей коллекции расширений.
А какими расширениями для VS Code пользуетесь вы?
Источник
27 удивительных инструментов VS Code для современных JavaScript-разработчиков
Visual Studio Code (его ещё называют VS Code и VSCode) — это экономичный но мощный кросс-платформенный редактор кода, выполненный в виде настольного приложения. По словам автора материала, перевод которого мы сегодня публикуем, VS Code поддерживает множество инструментов разработки — вроде TypeScript и отладчика Chrome. Это, а также то, что к нему написано невероятное количество опенсорсных расширений, делает VS Code весьма популярным и любимым многими редактором.
Если вы хотите добавить в свой арсенал JavaScript-программиста что-то новое — автор материала надеется, что вы встретите здесь что-нибудь такое, что вам пригодится. Не все из рассмотренных здесь двадцати семи инструментов предназначены исключительно для JS-разработки. Но все они с успехом могут применяться теми, кто пишет на JavaScript.
1. Project Snippets
Расширение Project Snippets, мой фаворит на все времена, создано на основе встроенного в VS Code инструмента User Snippets.
Если вы не знакомы с этой стандартной возможностью VS Code, то знайте, что она позволяет пользователю оформлять собственные фрагменты кода в виде так называемых сниппетов. Делается это для того, чтобы многократно использовать их в своих проектах. Что значит «многократно использовать»?
Рассмотрим пример. Предположим, вы обнаруживаете, что вам часто приходится писать один и тот же шаблонный код. Например — такой:
Подобный код можно оформить в виде сниппета. В результате, вместо того, чтобы вводить всё это с клавиатуры (или копировать откуда-нибудь), вам нужно будет лишь ввести так называемый префикс, после чего в редакторе появится код, соответствующий этому префиксу.
Если вы, в VS Code, перейдёте в меню File > Preferences > User Snippets , то вы, при желании, можете создать новый глобальный файл сниппетов, выбрав команду New Global Snippets File .
Например, для того чтобы создать новый файл сниппетов для React-проектов, в которых используется TypeScript, вы можете выбрать команду New Global Snippets File и задать имя файла как typescriptreact.json . В редакторе будет открыт только что созданный .json -файл, в котором можно будет описывать сниппеты.
Создадим сниппет на основе фрагмента вышеприведённого кода. Для этого файл typescriptreact.json нужно привести к следующему виду:
Теперь, когда в файле имеется такое описание сниппета, вы можете создать новый TypeScript-файл с расширением .tsx и ввести в нём префикс rsr . Это вызовет появление всплывающего окна с описанием сниппета. Нажатие на Tab завершает процедуру вставки сниппета в файл. Он будет представлен следующим кодом:
Некоторое неудобство использования глобальных сниппетов заключается в том, что они оказываются доступными для всех разрабатываемых вами проектов (впрочем, в некоторых случаях, для сниппетов общего назначения, это, наоборот, удобно). Но некоторые проекты могут быть сконфигурированы по-особенному. В результате, если то, что используется в таких проектах, не нужно во всех проектах, глобальный файл сниппетов может оказаться не лучшим решением задачи оформления фрагментов многократно используемого кода.
Предположим, в некоем проекте используется особая структура папок. Для упрощения работы над этим проектом в файле typescriptreact.json может быть подготовлено нечто, подобное следующему коду:
Обратите внимание на первый сниппет. Он может вполне хорошо подходить для проекта с определённой структурой папок и файлов. Но что если мы работаем над другим проектом, в котором компонент Link расположен по пути наподобие components/Link ?
Взгляните теперь на другие сниппеты. В них используются одиночные кавычки. Их применение приводит к появлению в коде конструкций наподобие border: ‘1px solid red’ .
Такие конструкции совершенно нормально могут применяться в JavaScript. Но что если мы используем в качестве инструмента для стилизации проекта библиотеку styled-components? В таком случае подобный синтаксис нас не устроит. Ведь в styled-components используются обычные CSS-конструкции!
Собственно говоря, здесь нам на помощь и приходит расширение Project Snippets.
Это расширение позволяет создавать сниппеты, действующие на уровне проекта или рабочего пространства. Такие сниппеты не конфликтуют со сниппетами, созданными для других проектов и не мешают при работе с ними. Это очень удобно.
2. Better Comments
Если вам нравится писать комментарии в своём коде, тогда вы, вероятно, сталкивались с тем, что иногда непросто бывает найти комментарий, написанный когда-то давно. Причиной этого может быть то, что код может немного разрастись.
С помощью расширения Better Comments можно выделять комментарии разными цветами.
Использование расширения Better Comments
Теперь, кроме прочего, если вы работаете над кодом в команде, вам легче будет привлечь внимание других разработчиков к важным комментариям, начинающимся с ! или ? .
3. Bracket Pair Colorizer
Когда мне довелось впервые увидеть скриншоты с результатами работы расширения Bracket Pair Colorizer, мне стало ясно, что это расширение просто обязано появиться в моём наборе инструментов.
Программирование — это моя страсть, и цветовое выделение скобок — это то, что, определённо, помогает мне полнее наслаждаться этим занятием.
Использование расширения Bracket Pair Colorizer
4. Material Theme
Тема Material, представленная расширением Material Theme, это грандиозное явление, которое теперь доступно и любителям VS Code. Её использование позволяет привести код к следующему виду.
Оформление кода с использованием темы Material
Это, должно быть, одна из лучших существующих тем.
5. @typescript-eslint/parser
Если вы пишете на TypeScript — вам, скорее всего, стоит рассмотреть возможность перевода своих TSLint-конфигураций на typescript-eslint. Дело в том, что, по некоторым данным, поддержка TSLint компанией Palantir будет через некоторое время прекращена. Вместо TSLint там будет использоваться typescript-eslint.
Проекты постепенно переходят на использование пакета @typescript-eslint/parser и связанных с ним пакетов. Делается это в стремлении подготовиться к будущим изменениям экосистемы TS-разработки. Если вам нравится Prettier, то вы сможете пользоваться этим инструментом, задействовав при этом большинство правил ESLint.
6. Stylelint
Stylelint — это тот инструмент, который всегда используется в моих проектах. Это так по нескольким причинам:
- Он помогает избегать ошибок.
- Он способствует соблюдению соглашений по стилизации при написании CSS-кода.
- Он хорошо работает совместно с Prettier.
- Он поддерживает CSS/SCSS/Sass/Less.
- Он поддерживает плагины, созданные сообществом разработчиков.
7. Markdownlint + docsify
Не знаю о том, как другие разработчики делают заметки во время мозговых штурмов, но мне нравится делать записи в формате Markdown. Это простой и удобный формат. Существует множество инструментов, которые помогают писать Markdown-тексты. Среди таких инструментов можно отметить markdownlint.
Это — расширение VS Code, представляющее собой линтер, который помогает проверять стили в .md -файлах. Он, кроме того, поддерживает форматирование текста с помощью Prettier.
Я, кроме того, обычно использую во всех своих проектах docsify. Этот инструмент поддерживает формат Markdown и другие полезные возможности.
8. TODO Highlight
У меня есть привычка — писать прямо в коде заметки по поводу того, что нужно сделать в проекте. В результате мне интересны расширения вроде TODO Highlight. Это расширение помогает работать с TODO-заметками.
9. Import Cost
Расширение Import Cost принадлежит к разряду инструментов, полезность которых можно ощутить при их первом применении. Однако после того как подобным инструментом некоторое время попользуются, может оказаться так, что нужды в нём больше не возникнет. Дело в том, что со временем разработчик уже точно знает о том, какие именно сведения выдаст подобное средство. Однако я, всё равно, рекомендую некоторое время этим расширением попользоваться. Вполне может оказаться так, что оно принесёт вам пользу.
10. Highlight Matching Tag
Иногда поиск закрывающей части некоего тега может превратиться в непростое занятие. В таких случаях полезным может оказаться расширение Highlight Matching Tag.
Использование расширения Highlight Matching Tag
11. vscode-spotify
Иногда мне надоедает то, что в процессе работы в VS Code приходится постоянно переходить в музыкальный проигрыватель для того, чтобы переключить трек, а потом опять возвращаться к своим делам.
Эту проблему мне помогает решить расширение vscode-spotify, которое позволяет управлять проигрывателем Spotify прямо из VS Code.
Благодаря этому расширению можно видеть в статус-баре редактора сведения о проигрываемой композиции. Для переключения записей можно использовать горячие клавиши, управлять Spotify из VS Code можно и с использованием кнопок.
12. GraphQL for VSCode
Популярность технологии GraphQL растёт, примеры её применения можно увидеть практически во всех уголках JavaScript-разработки. Поэтому многим, скорее всего, пригодится расширение GraphQL for VSCode.
Это расширение поддерживает подсветку синтаксиса GraphQL, линтинг, автозавершение кода.
Я много пользуюсь Gatsby, поэтому мне ежедневно приходится читать GraphQL-код. Расширение GraphQL for VSCode мне в этом помогает.
13. Indent-Rainbow
Расширение Indent-Rainbow похоже на вышеописанное расширение Highlight Matching Tag. Если иногда вам непросто бывает разобраться в отступах — это расширение поможет вам справиться с проблемой, улучшив читаемость кода. Вот пример его использования.
Использование расширения Indent-Rainbow
14. Color Highlight
Color Highlight — это одно из тех расширений, о котором меня спрашивают: «Где удалось его найти?». Данное расширение помогает в работе с цветом. Выглядит это так, как показано ниже.
Использование расширения Color Highlight
15. Color Picker
Color Picker — это расширение для VS Code, которое предлагает пользователю графический интерфейс, помогающий выбирать цвета для использования в CSS.
16. REST Client
Когда мне довелось впервые попробовать расширение REST Client — мне оно не показалось особенно полезным. Оно не выдерживало сравнения с чем-то вроде Postman.
Но постепенно оказалось, что это расширение оказывает огромное положительное влияние на мою работу. Особенно — тогда, когда мне нужно было тестировать некие API.
При работе с ним достаточно, например, создать новый файл, в котором будет всего одна строчка:
Для того чтобы выполнить запрос HTTP GET по этому адресу — достаточно его выделить, перейти в панель команд ( CTRL + SHIFT + P ), и выбрать команду Rest Client: Send Request . После этого будет открыта новая вкладка, в которой очень скоро появятся сведения о запросе и ответе. Это очень полезно.
Использование расширения REST Client
Это расширение, кроме того, позволяет настраивать параметры или данные для POST-запросов. Делается это с помощью буквально пары строк кода:
Подобная конструкция приведёт к выполнению POST-запроса с параметрами < "email": "someemail@gmail.com", "password": 1 >.
И это, на самом деле, лишь предельно сжатое описание возможностей данного расширения.
17. Settings Sync
Мне очень не нравилось, при настройке нового рабочего места, составлять списки используемых мной расширений, потом сохранять их в чём-то вроде Evernote, потом всё это вручную восстанавливать.
Автоматизировать этот процесс мне удалось с помощью расширения Settings Sync.
Для его использования достаточно лишь иметь аккаунт gist/GitHub. Если возникает необходимость сохранить настройки (сюда входят и клавиатурные привязки, и сниппеты, и расширения, и многое другое) — достаточно воспользоваться комбинацией клавиш SHIFT + ALT + U . Это приведёт к загрузке всех этих настроек в учётную запись gist. При этом они будут доступны только владельцу учётной записи. Для того чтобы загрузить настройки, например — при переходе на новый компьютер, достаточно установить это расширение, ввести данные учётной записи gist и воспользоваться комбинацией клавиш SHIFT + ALT + D .
18. Todo Tree
Расширение Todo Tree помогает находить TODO-комментарии в коде проектов. Оно оформляет эти комментарии в формате дерева, выводимого в левой части экрана.
Использование расширения Todo Tree
19. Toggle Quotes
Toggle Quotes — это интересное расширение, которое позволяет менять вид используемых в коде кавычек. Оно оказывается очень кстати, например, в тех случаях, когда нужно изменить обычные кавычки на обратные кавычки (backticks). Это может понадобиться при интерполяции строк и может оказаться особенно полезным тогда, когда Prettier оформил строки с использованием обычных одинарных кавычек.
Использование расширения Toggle Quotes
20. Better Align
Расширение Better Align позволяет выравнивать код без его предварительного выделения.
Для того чтобы воспользоваться этим расширением, надо поместить курсор в код, который нужно выровнять, открыть панель команд (с использованием CTRL + SHIFT + P или того сочетания клавиш, которое вы назначили для выполнения этой задачи) и вызвать команду Align .
21. Auto Close Tag
, затем — значок / , после чего автоматически закрывает тег.
Этой простой и удобной функции нет в стандартных возможностях VS Code, поэтому данное расширение я считаю весьма полезным.
22. Sort Lines
Мне не нравятся массивы, элементы которых расположены не в алфавитном порядке. Быстро справиться с этой проблемой мне помогает расширение Sort Lines. Если вам тоже не нравятся подобные массивы — оно может пригодиться и вам.
23. VSCode Google Translate
Возможно, я — единственный человек, который считает полезным расширение VSCode Google Translate. Но мне оно помогает, так как мне приходится принимать участие в работе над проектами, над которыми вместе со мной трудятся люди, говорящие на разных языках. Это расширение может пригодиться тем, кто, для перевода чего-либо, не хочет сворачивать VS Code.
24. Prettier
Prettier — это расширение для VS Code, которое умеет автоматически форматировать код, написанный на JavaScript, на TypeScript и на других языках.
25. Material Icon Theme
Значки из пакета Material Icon Theme мне нравятся больше, чем другие. С их помощью гораздо легче различать типы файлов. Особенно это справедливо для тех случаев, когда в VS Code используется тёмная тема.
26. IntelliSense for CSS class names in HTML
Расширение с длинным названием IntelliSense for CSS class names in HTML позволяет оснастить VS Code возможностями по автозавершению имён классов CSS в HTML-атрибуте class . Его работа основывается на определениях классов, найденных в вашем рабочем пространстве.
27. Path Intellisense
Расширение Path Intellisense помогает автоматически завершать ввод имён файлов.
Итоги
Надеемся, среди расширений для VS Code, о которых вы только что прочли, найдётся что-то такое, что вам пригодится.
Уважаемые читатели! Какие расширения для VS Code вы добавили бы к тем, о которых шла речь в этой статье?
Источник