Комментирование блоков кода в Atom
я переходил от Webstorm и RubyMine к Atom, и я действительно скучаю по функции из редакторов Jetbrains, где вы выбираете блок кода и нажимаете CMD + — и он добавляет характер(ы) комментария языка специфический к началу каждой строки. ( # Рубина. // для js, /* для css и т. д.).
есть ли встроенный ярлык для Atom или пакет, который предоставляет эту функцию?
13 ответов
по данным этой, cmd + / должны сделать это.
и для windows, это ctrl + / .
Atom не имеет конкретной функции блока комментариев, но если вы выберете больше строк, а затем используете normal ctrl — / (Windows или Linux) cmd — / (Mac), он будет комментировать все строки.
команда + / или Ctrl + shift + 7 не работает для меня (debian + colombian keyboard). В моем случае я изменил клавиатуру Atom.файл cson добавляет следующее:
и теперь он работает!
кроме того, есть пакеты:
- пакет комментариев для atom (https://atom.io/packages/comment)
- Block-comment-lines https://atom.io/packages/block-comment-lines
- Sublime Block Комментарии
нажатие (Cmd + /) создаст однострочный комментарий. т. е. // Single line comment
типа ( /** и нажмите клавишу Tab), чтобы создать комментарий блока ala
можно использовать Ctrl + / . Это работает для меня.
многострочный комментарий можно сделать, выбрав строки и нажав Ctrl+/. и теперь вы можете иметь много плагинов для комментариев
лучше один блок-комментарий попробую..
при всем моем уважении к комментариям выше, не нужно использовать пакет :
Если вы хотите изменить конфигурацию, вам просто нужно настроить файл keymap
можно использовать Ctrl + Shift + / для Windows.
Atom по умолчанию не имеет комментария блока, поэтому я бы рекомендовал искать пакеты atom по «комментарию блока» и установить один подходит для вас.
Я предпочитаю https://atom.io/packages/block-comment потому что is имеет ближайшую комбинацию клавиш для комментария строки, и она работает так, как мне нужно, то есть она не будет комментировать всю строку, а только выбранный текст.
line comment: CTRL+/ block comment: CTRL+SHIFT+/ (с установленным плагином)
на бельгийской клавиатуре, утвержденной на mac команда + shift + / является нажатием клавиши для комментирования блока.
CTRL+ / на windows, нет необходимости выбирать всю строку, просто используйте комбинацию клавиш на строке, которую вы хотите прокомментировать.
Комментирование блоков кода в Atom
Я перехожу с Webstorm и RubyMine на Atom, и мне очень не хватает функции редакторов Jetbrains, где вы выбираете блок кода и нажимаете CMD + — , и он добавляет специфичный язык символы комментария в начале каждой строки. ( # для ruby. // для js, /* для css и т. Д.).
Есть ли встроенный ярлык для Atom или пакет, который предоставляет эту функцию?
15 ответов
Согласно this, cmd + / должен это сделать.
А для Windows и Linux это ctrl + / .
Возможная причина : следите за перекрывающимися сочетаниями клавиш. Это произошло в моем случае и отключило начальную привязку toggle line comment :
Привязки клавиш вы можете найти в Edit -> Preferences -> Keybindings навигационной панели приложения.
Решение отменяет привязку для github:toggle-patch-selection-mode
Сначала выберите свой блок кода, затем нажмите cmd + / для MacOS
CTRL + / в окнах, не нужно выделять всю строку, просто используйте комбинацию клавиш в строке, которую вы хотите закомментировать.
На клавиатуре Бельгии, утвержденной на Mac command + shift + / — это нажатие клавиши для комментирования блока.
По умолчанию Atom не имеет блочного комментария, поэтому я бы порекомендовал искать пакеты атома по «блочному комментарию» и устанавливать тот, который вам подходит.
Я предпочитаю https://atom.io/packages/block-comment, потому что это ближайший сочетание клавиш для строкового комментария, и оно работает так, как мне нужно, то есть комментирует не всю строку, а только выбранный текст.
line comment: CTRL+/ block comment: CTRL+SHIFT+/ (с установленным плагином)
Commenting out code blocks in Atom
I have been moving from Webstorm and RubyMine to Atom and I really miss a feature from the Jetbrains editors where you select a code block and press CMD + — and it adds language specific comment character(s) to the beginning of each line. ( # for ruby. // for js, /* for css etc.).
Is there a built in shortcut for Atom or a package which provides this feature?
15 Answers 15
According to this, cmd + / should do it.
And for Windows and Linux, it is ctrl + / .
Atom does not have a specific comment-block function, but if you select more rows and then use the normal ctrl — / (Windows or Linux) cmd — / (Mac), it will comment all the lines.
Command + / or Ctrl + shift + 7 doesn’t work for me (debian + colombian keyboard). In my case I changed the Atom keymap.cson file adding the following:
and now it works!
Also, there are packages:
- Comment package for atom (https://atom.io/packages/comment)
- Block-comment-lines https://atom.io/packages/block-comment-lines
- Sublime Block Comments
Pressing (Cmd + /) will create a single line comment. i.e. // Single line comment
Type ( /** and press the Tab key) to create a block comment ala
with all my respect with the comments above, no need to use a package :
if you want to change the configuration, you just have to parameter your keymap file
You can use Ctrl + / . This works for me.
Multi-line comment can be made by selecting the lines and by pressing Ctrl+/ . and Now you can have many plugins for comments
better one is block-comment try that..
Edit your keymap.cson file and add
Windows
Mac
Now just highlight the text you want to comment and hit the keybinding.
You can use Ctrl + Shift + / for Windows.
Atom does not have block comment by default, so I would recommend searching for atom packages by «block comment» and install the one suits to you.
I prefer https://atom.io/packages/block-comment because is has the closest keyboard shortcut to line comment and it works as i need it to, meaning it would not comment the whole line but only the selected text.
line comment: CTRL+/ block comment: CTRL+SHIFT+/ (with the plugin installed)
Используем Atom для первой вёрстки
Инструкция по установке, настройке и использованию самого передового на сегодняшний день редактора кода
Почему я выбираю Atom
Не так давно все переходили с какого-нибудь TextMate на SublimeText и это было реально своевременно круто. Но когда в индустрию редакторов кода вошёл GitHub, сразу стало понятно за кем будущее.
Atom — это быстроразвивающийся редактор кода от GitHub с открытым исходным кодом и растущим сообществом. Абсолютно бесплатный, ультра современный, легко настраиваемый через человекопонятный интерфейс, но пока что чуть медленный — в этом весь Atom.
На мой взгляд, на сегодняшний день это лучший редактор кода, который способен изменить индустрию и остаться в ней на очень долгое время.
Установка
Для установки вам необходимо быть обладателем одной из описанных на сайте Atom систем:
OS X 10.8 or later, Windows 7 & 8, RedHat Linux, and Ubuntu Linux
Так как я работаю на Mac, то большая часть инструкции будет для него, иногда с информацией для Windows.
Скачайте дистрибутив и установите его как полагается в вашей системе. На Mac OS X нужно перенести приложение в папку приложений (Applications), на Windows запустить установочный дистрибутив.
После этого откройте Atom и давайте перейдём к настройке.
Настройка
Для того, что бы всё было удобно, я расскажу вам как настроить сам Atom, вашу систему, какие пакеты поставить, что они дают, как их использовать и какую тему подсветки синтаксиса выбрать.
Настройка Atom
После установки Atom сразу готов к работе и настроен в соответствии с последними тенденциями. Вам нужно настроить всего две вещи.
Добавьте разметку отступов
Зайдите в настройки Atom → Preferences → Settings и поставьте галочку на Show Indent Guide. Это включит отображение специальных полосочек, которые помогают видеть вложенность кода.
(UPDATE: не актуально) Настройте правильную работу autocomplete
Autocomplete — это инструмент для автоматического написания кода. Зайдите в Atom → Open Your Keymap и вставьте в конец документа следующий код:
Настройка Mac OS X
В современных редакторах кода можно раздвигать курсор на несколько строк. Что бы это делать на Mac, нужно выключить пару стандартных сочетаний клавиш. Зайдите в системные настройки → System Preferences → Keyboard → Shortcuts → Mission Control и снимите галочки на двух пунктах:
Mission Control
Занимает сочетание клавиш ^↑
Application windows
Занимает сочетание клавиш ^↓
Теперь, когда будете играться с кодом, попробуйте по нажимать Shift-Ctrl-↑ и Shift-Ctrl-↓. Вы можете редактировать несколько строк одновременно. Также можно вставлять дополнительные курсоры в любые места в коде зажав Cmd и просто кликая в необходимое место.
Установка пакетов
Packages — это небольшие, но очень удобные дополнения, которые расширяют возможности Atom.
Для установки пакетов зайдите в Atom → Preferences → Install и через строку поиска найдите и установите следующие пакеты:
Atom-color-highlight
Подсвечивает цветовые величины в коде
Autocomplete-css
Упрощает написание CSS
Autocomplete-paths
Упрощает написание путей к файлам проекта
Autocomplete-plus
Упрощает автоматическое написание кода
Emmet
Незаменимый инструмент дзен коддера, ускоряет написание HTML кода в разы
Выбор темы подсветки кода
Моя любимая тема Twilight не поставляется с Atom, скорей всего потому, что эта тема пришла из другого редактора кода TextMate. Несмотря на новизну Atom, к сожалению, я пока не нашёл для себя ни одной нормальной темы поставляемой с ним.
Для установки Twilight, нужно опять зайти в установку как в прошлый раз, только в этот раз в строке поиска нужно выбрать Themes, вместо Packages. Найти Twilight и установить.
После того, как пакеты и темы поставлены, перезагрузите Atom для того, что бы всё точно заработало (полностью закройте программу и откройте снова).
Как всё работает
Что бы попробовать новые установки и настройки в действии давайте сделаем несколько упражнений.
Emmet в действии
Создайте новый файл и сохраните его, назовите “index.html”, естественно без кавычек. Для правильной работы всех помощников Atom, так называемых сниппетов (snippets) и для правильной подсветки кода (syntax highlighting) обязательно нужно указывать правильное расширение файла (.html в данном случае).
Итак, пишем в документе восклицательный знак и нажимаем Tab. Emmet развернёт вам базовую структуру HTML.
Подробней об использовании Emmet читайте в документации на официальном сайте.
Autocomplete Paths в действии
Положите в папку, в которой лежит ваш index.html какие-нибудь картинки, для удобства, создайте дополнительную папку images и положите картинки в неё.
В index.html между тэгами <body> и </body> напишите “img”, и нажмите Tab. У вас появится немного кода и курсор будет стоять внутри кавычек атрибута src. Атрибут src обозначает source (источник, исходник) тэга img, что обозначает image (изображение). В значении атрибута scr вам нужно указать путь к картинке, для этого напишите название папки “images” и далее слэш “/”. Autocomplete Paths предложит вам выбрать название картинок из указанной папки.
Autocomplete CSS в действии
Создайте новый файл и сохраните его, назовите “style.css”, без кавычек. Для того, что бы увидеть autocomplete в действии создайте CSS селектор. Напишите html и откройте фигурную скобку “<”, закрывающая фигурная скобка создастся сама, переведите строку, нажав Enter.
Теперь на новой строке внутри скобок начните писать, например “font”. Вы увидите выпадающие предложения по написанию кода. Перемещайтесь по ним стрелочками, выбирайте нужное нажатием Enter.
Atom Color Highlight в действии
Напишите “color: red;” и вы увидите, что red будет окрашен в соответствующий цвет. Напишите “background-color: #EEEEEE;” или “white” и вы увидите, что значение будет окрашено в белый.
Заключение
Конечно, всё, что я показал выше доступно в некоторых других редакторах кода. Возможно, некоторые знатоки скажут, что это всё не имеет смысла. Это не так.
Вся современность Atom — тема для отдельного поста, а пока я надеюсь вы получили базовые знания и заряженный сетап для изучения вёрстки.
Жду вас у себя на курсе основ HTML и CSS в Moscow Coding School для быстрой прокачки.
Для тех, кто меня не знает
Меня зовут Захар День, я дизайнер и веб-разработчик, занимаюсь созданием цифровых продуктов (приложений) от идеи до реализации, развиваю в Школе дизайна НИУ ВШЭ кафедру «Дизайн и программирование», наши студенты уже работают в таких компаниях, как: Сбербанк Технологии, Aic, Ценципер, Тинькофф Банк, Wylsacom, и некоторых других. Подробнее о результатах этой деятельности смотрите в нашем видео «Hello, World!».
Я также являюсь создателем курса-бестселлера в Moscow Coding School, который прошли сотрудники многих известных компаний: Look At Media, Kaspersky Lab, МТС, Avito, Leo Burnett, BBDO, Ad Index, Readymag, Yandex, и т.д. Подробнее об этом вы можете прочитать в моей статье «Мой путь от самообразования до преподавания за последние пять лет».
Вы можете узнать подробней обо мне в моих Facebook и Instagram, также я иногда пишу статьи на Medium. Публичные стримы будут проходить на YouTube, подпишитесь и нажмите на колокольчик, если вы хотите, чтобы вам пришло оповещение. Также, я публикую информацию на моём сервисе Hack Exchange, на странице Hack Exchange в Facebook и в Vk.
Делитесь знаниями с друзьями. Знания должны быть доступны!
Дополнение
На сегодняшний день редакторы кода совершенно не персонализированы. Что я имею в виду?
Рассмотрим например браузер Google Chrome. Когда вы открываете новый ноутбук, ставите на него Chrome, логинетесь под своим Google аккаунтом, к вам в браузер попадают все ваши закладки, расширения и прочая полезная информация. Это очень радует и бесспорно удобно.
Когда вы ставите любой редактор кода, вам надо с нуля ставить все пакеты, менять настройки и т.п., если только вы не сохранили файл конфигурации и не позанимались прочими гиковскими занятиями.
На много удобней было бы иметь аккаунт (а он уже есть на GitHub), к которому были бы привязаны настройки Atom. Я поднял эту тему на Atom Discuss и получил в ответ гиковское решение, которое работает. Хотя хорошим UX там пока не пахнет.
Синхронизация настроек Atom
Через установку пакетов как описано выше установите sync-settings.
Зарегистрируйтесь или войдите на GitHub. И создайте новый personal access token. Для этого перейдите по ссылке, введите название токена, например Atom Configuration, снимите все галочки, кроме gist, и нажмите Generate Token.
Вы увидите длинный шифр из цифр и букв. Рядом с ним будет написано, что вы его видите в первый и последний раз, так что не переходите никуда с этой страницы, пока всё не доделаете.
Скопируйте токен (шифр) и идите в меню Atom → Preferences Packages → sync-settings → Settings и там вставляйте скопированный токен в поле Personal Access Token.
Теперь идите на сервис GitHub Gist и если вы там не залогинены, то логиньтесь. Создавайте новый Gist — это как экземпляр кода. Всё что нужно для создания пустого гиста — поставить любой символ, например пробел, в большом белом поле для написания кода. После этого кнопки Create Secret Gist и Create Public Gist станут доступными для нажатия. Выбирайте любую, которую считаете нужной. Я храню свою конфигурацию в Public доступе.
После создания гиста, в адресе будет его Gist Id. В моём случае ссылка на мой гист с конфигурацией Atom выглядит так:
Где “10250d74c35cd9fcc630” — это Gist Id, который нужно скопировать и вставить в настройки sync-settings в поле Gist Id.
Перезагрузите Atom. Нажимайте Ctrl-Alt-U. Вы должны увидеть оповещение:
sync-settings: Your settings were successfully uploaded.
Если не увидели, попробуйте в верхнем меню Atom выбрать Packages → Synchronize Settings → Upload. Должно сработать.
Когда вам понадобится загрузить все настройки в новый Atom, вам нужно будет установить sync-settings скопировать Gist Id и Personal Access Token и в меню выбрать Packages → Synchronize Settings → Download или нажать Ctrl-Alt-D.