emmetio / emmet-atom Goto Github PK

These two bindings conflict with OSX’s slow-version of triggering mission control and exposé. This may just be my computer and not the default OSX settings, but I don’t remember setting these shortcuts to be anything custom (I don’t use them normally).

Keybindings in question are:

'ctrl-shift-up': 'emmet:increment-number-by-1'
'ctrl-shift-down': 'emmet:decrement-number-by-1'

I haven’t thought about this that much becuase it’s not a feature I use a great deal, but would it make sense to use the default Vim keybindings of ctrl+a and ctrl+x (or similar) for this?

Hi,

Emmet for Atom works perfectly for css, less, scss and sass files, but doesn't work in styl files.

I have try to look at the code, but doesn't understand why isn't work with stylus files... :(

Any though, someone ?

Thanks in advance,

Trying to write some react code with the emmet plugin but the expand abbreviation is not working in .js files. For example, shift-cmd-E will not expand any abbreviations in the following code:

/** @jsx React.DOM */ app.components.modal = React.createClass({ render : function(){ return ( <div class="modal"> <div class="modal-content"> <h2>Confirm?</h2> <div class="buttons"> <button>Cancel</button> <button>OK</button> </div> </div> </div> ) } });

Hey,

I'm trying to use emmet in html and tpl file but i can't get it working.

Write:
i.fa.fa-spin.fa-spinner

Expected:
<i class="fa fa-spin fa-spinner"></i>

Actual:
i.fa.fa-spin.fa-spinner    

When I try to expand html tag with tab key, It doesn't work correctly because the devtool is opened with tab key.

Before I installed emmet plugin, I couldn't see this issue so maybe this is the issue because of this plugin?

Matching pair inward works fine all the way up to the root selection, and even once you get there it’s still possible to go back down one level from the root selection.

If, however, you accidentally trigger the match pair outwards command when you’re already at the root selection, it then becomes impossible to use the match pair inwards command again. It just doesn’t do anything.

Here’s a GIF showing that sequence of events:

Also, if you use your mouse cursor to select all of the text, inward doesn’t work either:

I’m not sure if this is a bug with the implementation of emmet here, or a bug with emmet itself maybe?

Emmet’s reflect CSS value command doesn’t seem to be operating properly:

The command is run from the palette, but it just doesn’t update the rest of the values.

Just updated to 0.46.0, and now emmet expansion doesn’t seem to be working. Did something change in the API again that needs to be changed here?

Code from the screenshot is here:
https://github.com/atom/emmet/blob/92b5b2f9355c97866ceb4e989ec32020afb8a8fd/lib/emmet.coffee#L32

Hey, just got Atom and immediately installed this plugin. However, when I enable the plugin, anytime I hit "tab" the developer tools pane opens. I'm also having no luck with the cmd-E command. Could be something in my config, but this is the only plugin I've played with so far.

Emmet v 0.5.0
Atom v 0.70.0

In the below video, I am hitting the tab key repeatedly, as you can see when emmet is enabled, tabbing does not work.

I open the box with the shortcut and first of all, doesn‘t auto select the field to write the abbreviation and second it doesn‘t close after hitting enter. It just remains there. I have to restart the project to get rid of it.

Most of the HTML that I write, I write in .php files, and I rarely write html in actual .html files. But .php files aren't supported with Emmet in Atom. Can that filetype be added?

(Using Atom 0.60.0, a version of Emmet installed two days ago, on OS X 10.9.1).

After updating to Atom 0.71.0, the tab key didn't seem to be working at all on any filetype.

After testing each plugin by enabling/disabling, tab key started working after disabling Emmet.

Hey,

after installing Emmet I'm no longer able to indent anything or use the completion feature with hitting Tab. If I hit Tab, the Dev Tools open and the Syntax Mode Status is focused.

Cheers,
Martin

In Emmet in sublime when expanding p to <p> it would look like this:

<p>|</p>

as you can this is on one line with the caret in the middle. In Atom it expands to this:

<p>
|
</p>

Is this a bug or some kind of behaviour I can alter?

When Emmet is enabled typing php and pressing the tab key produces a pair of <php></php> tags instead of opening a <?php ?> code block.

@kevinsawicki says issues similar to this (atom/atom#976 atom/atom#1008 — note that this bug is not identical to these) have been reported against atom core a couple times, but I’ve just ran across this and it seems to be related to emmet specifically. If I disable the emmet plugin, it works as expected. Re-enabling emmet makes the behaviour turn up again.

I'm not sure if this is a bug, omission, or if I just did it wrong, but I can't seem to get expansion bound to the tab key. Since sublime expands via the tab key, i have hardcore muscle memory around that task.

Is this possible/could I make a request for it?

I’m not sure if this is just a curiousity of my machine or not, but the following keymaps don’t seem to do anything in my instance of Atom:

'ctrl-alt-right': 'emmet:next-edit-point'
'ctrl-alt-left': 'emmet:prev-edit-point'

The commands work fine when I do them from the command pallete. Maybe we need to choose different defaults here?

Hi,

I'm having problems installing this package:

npm http GET https://registry.npmjs.org/season
npm http GET https://registry.npmjs.org/season
npm http GET https://registry.npmjs.org/season
npm http GET https://registry.npmjs.org/season/-/season-1.0.2.tgz
npm ERR! fetch failed https://registry.npmjs.org/season/-/season-1.0.2.tgz
npm http GET https://registry.npmjs.org/season/-/season-1.0.2.tgz
npm ERR! fetch failed https://registry.npmjs.org/season/-/season-1.0.2.tgz
npm http GET https://registry.npmjs.org/season/-/season-1.0.2.tgz
npm ERR! fetch failed https://registry.npmjs.org/season/-/season-1.0.2.tgz
npm ERR! Error: SELF_SIGNED_CERT_IN_CHAIN
npm ERR!     at TLSSocket.<anonymous> (_tls_wrap.js:777:36)
npm ERR!     at TLSSocket.EventEmitter.emit (events.js:98:17)
npm ERR!     at TLSSocket._finishInit (_tls_wrap.js:337:8)
npm ERR! If you need help, you may report this *entire* log,
npm ERR! including the npm and node versions, at:
npm ERR!     <http://github.com/isaacs/npm/issues>

npm ERR! System Darwin 13.0.2
npm ERR! command "/Applications/Atom.app/Contents/Frameworks/Atom Helper.app/Contents/MacOS/Atom Helper" "/Applications/Atom.app/Contents/Resources/app/node_modules/atom-package-manager/node_modules/npm/bin/npm-cli.js" "--userconfig" "/Applications/Atom.app/Contents/Resources/app/node_modules/atom-package-manager/.apmrc" "install" "/Users/hannes.johansson/.atom/.node-gyp/.atom/.apm/emmet/0.4.1/package.tgz" "--target=0.11.10" "--arch=x64"
npm ERR! cwd /private/var/folders/3l/8s9sfz7x1mlbwtvcdrz1sqt4fd3575/T/apm-install-dir-114128-5355-1n8eo3s
npm ERR! node -v v0.11.10
npm ERR! npm -v 1.3.18
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /private/var/folders/3l/8s9sfz7x1mlbwtvcdrz1sqt4fd3575/T/apm-install-dir-114128-5355-1n8eo3s/npm-debug.log
npm ERR! not ok code 0

If one is using multiple cursors, it will only expand on one of them. Demo video link: http://recordit.co/cpUEPB

Given the following expression:

p>code{$ = | 10px | ~ | 10px | $ $ $}

emmet creates:

<p><code>1 = | 10px | ~ | 10px | 1 1 1</code></p>

I've already say that in issue #49 but just in case...

When activating the package I have those errors:

Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".
 /Users/monkeymonk/.atom/packages/emmet/vendor/emmet-app.js:2030
createIterator /Users/monkeymonk/.atom/packages/emmet/vendor/emmet-app.js:2030
runInContext /Users/monkeymonk/.atom/packages/emmet/vendor/emmet-app.js:2219
(anonymous function) /Users/monkeymonk/.atom/packages/emmet/vendor/emmet-app.js:7077
(anonymous function) /Users/monkeymonk/.atom/packages/emmet/vendor/emmet-app.js:7108
defined /Users/monkeymonk/.atom/packages/emmet/vendor/emmet-app.js:1
(anonymous function) /Users/monkeymonk/.atom/packages/emmet/vendor/emmet-app.js:1
Module._compile module.js:455
Module._extensions..js module.js:473
Module.load /Applications/Atom.app/Contents/Resources/app/node_modules/coffee-script/lib/coffee-script/register…:45
Module._load module.js:311
Module.require module.js:363
require module.js:379
(anonymous function) emmet.coffee:5
(anonymous function) emmet.coffee:1
Module._compile module.js:455
requireCoffeeScript /Applications/Atom.app/Contents/Resources/app/src/coffee-cache.js:64
Module.load /Applications/Atom.app/Contents/Resources/app/node_modules/coffee-script/lib/coffee-script/register…:45
Module._load module.js:311
Module.require module.js:363
require module.js:379
module.exports.Package.requireMainModule /Applications/Atom.app/Contents/Resources/app/src/package.js:455
module.exports.Package.activateConfig /Applications/Atom.app/Contents/Resources/app/src/package.js:176
module.exports.Package.activateNow /Applications/Atom.app/Contents/Resources/app/src/package.js:158
(anonymous function) /Applications/Atom.app/Contents/Resources/app/src/package.js:147
module.exports.Package.measure /Applications/Atom.app/Contents/Resources/app/src/package.js:95
module.exports.Package.activate /Applications/Atom.app/Contents/Resources/app/src/package.js:141
module.exports.PackageManager.activatePackage /Applications/Atom.app/Contents/Resources/app/src/package-manager.js:101
(anonymous function) /Applications/Atom.app/Contents/Resources/app/src/package-manager.js:169
(anonymous function) /Applications/Atom.app/Contents/Resources/app/src/config.js:208
(anonymous function) /Applications/Atom.app/Contents/Resources/app/node_modules/emissary/lib/emitter.js:134
module.exports.Emitter.emit /Applications/Atom.app/Contents/Resources/app/node_modules/emissary/lib/emitter.js:133
module.exports.Config.update /Applications/Atom.app/Contents/Resources/app/src/config.js:231
module.exports.Config.set /Applications/Atom.app/Contents/Resources/app/src/config.js:153
module.exports.Config.removeAtKeyPath /Applications/Atom.app/Contents/Resources/app/src/config.js:186
module.exports.Package.enable /Applications/Atom.app/Contents/Resources/app/src/package.js:80
module.exports.PackageManager.enablePackage /Applications/Atom.app/Contents/Resources/app/src/package-manager.js:57
(anonymous function) /Applications/Atom.app/Contents/Resources/app/node_modules/settings-view/lib/installed-package-view…:157
jQuery.event.dispatch /Applications/Atom.app/Contents/Resources/app/node_modules/space-pen/vendor/jquery.js:4676
elemData.handle /Applications/Atom.app/Contents/Resources/app/node_modules/space-pen/vendor/jquery.js:4360

and :

Failed to activate package named 'emmet' EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

  at Function (<anonymous>:null:null)
  at createIterator (/Users/monkeymonk/.atom/packages/emmet/vendor/emmet-app.js:2030:21)
  at runInContext (/Users/monkeymonk/.atom/packages/emmet/vendor/emmet-app.js:2219:20)
  at /Users/monkeymonk/.atom/packages/emmet/vendor/emmet-app.js:7077:11
  at /Users/monkeymonk/.atom/packages/emmet/vendor/emmet-app.js:7108:3
  at defined (/Users/monkeymonk/.atom/packages/emmet/vendor/emmet-app.js:1:176)
  at Object.<anonymous> (/Users/monkeymonk/.atom/packages/emmet/vendor/emmet-app.js:1:188)
  at Module._compile (module.js:455:26)
  at Object.Module._extensions..js (module.js:473:10)
  at Module.load (/Applications/Atom.app/Contents/Resources/app/node_modules/coffee-script/lib/coffee-script/register.js:45:36)
  at Function.Module._load (module.js:311:12)
  at Module.require (module.js:363:17)
  at require (module.js:379:17)
  at Object.<anonymous> (/Users/monkeymonk/.atom/packages/emmet/lib/emmet.coffee:5:9)
  at Object.<anonymous> (/Users/monkeymonk/.atom/packages/emmet/lib/emmet.coffee:1:1)
  at Module._compile (module.js:455:26)
  at Object.requireCoffeeScript [as .coffee] (/Applications/Atom.app/Contents/Resources/app/src/coffee-cache.js:64:19)
  at Module.load (/Applications/Atom.app/Contents/Resources/app/node_modules/coffee-script/lib/coffee-script/register.js:45:36)
  at Function.Module._load (module.js:311:12)
  at Module.require (module.js:363:17)
  at require (module.js:379:17)
  at Package.module.exports.Package.requireMainModule (/Applications/Atom.app/Contents/Resources/app/src/package.js:455:34)
  at Package.module.exports.Package.activateConfig (/Applications/Atom.app/Contents/Resources/app/src/package.js:176:12)
  at Package.module.exports.Package.activateNow (/Applications/Atom.app/Contents/Resources/app/src/package.js:158:14)
  at /Applications/Atom.app/Contents/Resources/app/src/package.js:147:28
  at Package.module.exports.Package.measure (/Applications/Atom.app/Contents/Resources/app/src/package.js:95:15)
  at Package.module.exports.Package.activate (/Applications/Atom.app/Contents/Resources/app/src/package.js:141:14)
  at PackageManager.module.exports.PackageManager.activatePackage (/Applications/Atom.app/Contents/Resources/app/src/package-manager.js:101:21)
  at /Applications/Atom.app/Contents/Resources/app/src/package-manager.js:169:19
  at /Applications/Atom.app/Contents/Resources/app/src/config.js:208:20
  at /Applications/Atom.app/Contents/Resources/app/node_modules/emissary/lib/emitter.js:134:30
  at Array.forEach (native)
  at Config.module.exports.Emitter.emit (/Applications/Atom.app/Contents/Resources/app/node_modules/emissary/lib/emitter.js:133:47)
  at Config.module.exports.Config.update (/Applications/Atom.app/Contents/Resources/app/src/config.js:231:19)
  at Config.module.exports.Config.set (/Applications/Atom.app/Contents/Resources/app/src/config.js:153:14)
  at Config.module.exports.Config.removeAtKeyPath (/Applications/Atom.app/Contents/Resources/app/src/config.js:186:12)
  at Package.module.exports.Package.enable (/Applications/Atom.app/Contents/Resources/app/src/package.js:80:26)
  at PackageManager.module.exports.PackageManager.enablePackage (/Applications/Atom.app/Contents/Resources/app/src/package-manager.js:57:14)
  at HTMLButtonElement.<anonymous> (/Applications/Atom.app/Contents/Resources/app/node_modules/settings-view/lib/installed-package-view.js:157:27)
  at HTMLButtonElement.jQuery.event.dispatch (/Applications/Atom.app/Contents/Resources/app/node_modules/space-pen/vendor/jquery.js:4676:9)
  at HTMLButtonElement.elemData.handle (/Applications/Atom.app/Contents/Resources/app/node_modules/space-pen/vendor/jquery.js:4360:28)
 /Applications/Atom.app/Contents/Resources/app/src/package.js:166

Here's the list, go get 'em 🐯

• 'ctrl+d': 'emmet:match_pair_outward'
• 'ctrl+j': 'emmet:match_pair_inward'
• 'ctrl+alt+j': 'emmet:matching_pair'
• 'alt+right': emmet:next_edit_point'
• 'alt+left': emmet:prev_edit_point'
• 'command+/': 'emmet:toggle_comment'
• 'shift+command+': 'emmet:split_join_tag'
• 'command+': 'emmet:remove_tag'
• 'shift+command+y': 'emmet:evaluate_math_expression'
• 'ctrl+up': 'emmet:increment_number_by_1'
• 'ctrl+down': 'emmet:decrement_number_by_1'
• 'alt+up': 'emmet:increment_number_by_01'
• 'alt+down': 'emmet:decrement_number_by_01'
• 'alt+command+up': 'emmet:increment_number_by_10'
• 'alt+command+down': 'emmet:decrement_number_by_10'
• 'shift+command+.': 'emmet:select_next_item'
• 'shift+command+,': 'emmet:select_previous_item'
• 'shift+command+r': 'emmet:reflect_css_value'
• 'shift+ctrl+d': 'emmet:encode_decode_data_url'
• 'shift+ctrl+i': 'emmet:update_image_size'
• 'ctrl+alt+enter': 'emmet:expand_as_you_type'
• 'shift+ctrl+g': 'emmet:wrap_as_you_type'
• 'Tab': 'emmet:expand_abbreviation_with_tab'
• 'shift+ctrl+a': 'emmet:wrap_with_abbreviation'

It instead expands the content in the other pane.

Hey,

i might be so cool to make configuration (via settings panel) to define custom extension.

I use tpl.blade.php and i can't use emmet in it...

If I have my cursor positioned on the end of those three selectors and hit the autocomplete key, only the latest .selector becomes a <div class="selector"></div>

.selector
.selector
.selector

When expanding CSS property abbreviations, the code in emmet-core.js seems to indicate that the caret be placed to the left of the trailing semicolon.

When using this however, exanding a CSS property places the cursor to the right:

This is also the case when there are values prefilled. Expanding m20 results in this:

It would be much handier if it resulted in this:

Ideally when you expand any CSS property, the values of the attributes should be:

• ready to type, if none are prefilled.
• highlighted with a selection, ready to overwrite, if prefilled.

Noticed on Emmet Plugin v0.4.1, Atom v0.60.0

Any time I hit the Tab key, the web inspector panel opens. Emmet does not expand syntax to html using the tab key either, although that might be my keybindings.

Given: div.button

Emmet expands to div.<button name="button"></button>

Or span.help

Expands to:

span.hel<p>

</p>

Emmet is installed:

Yet no commands are available, and tab expansion does not work:

It looks like an API has changed that this plugin relied on. I’m seeing this stack trace in my inspector:

Note the error: Cannot find module 'editor'

It’d be great if we could get all of the CSS expansion stuff working in Atom too.

The emmet snippets.json file contains all the snippets, but they’re clearly in a different format to the snippet .cson files Atom expects.

Do we just need to spend the time creating our own css.cson snippets file?

Might look something like this:

".source.css":
  "margin":
    prefix: "m"
    body: "margin: $1;"
  "margin top":
    prefix: "mt"
    body: "margin-top: $1;"
…

That way we could use it with normal snippets, and not necessarily have to have it be part of emmet’s expansion function at all. I’m not sure how easy it would be to get the shortcuts working to pre-fill properties with values (e.g. having m10 expanded to margin: 10px;).

The downside of doing it with regular snippets is that the shortcut keys would be different (i.e. snippets:expand is a different editor command to emmet:expand_abbreviation). Is there a way we could combine these two somehow? Maybe we could make it so that it tries expansion with emmet first if it’s installed, then falls back to regular snippets if it doesn’t know how to do it (or the opposite way around, perhaps)?

Just thinking out aloud here…

Somewhere in the middle of the day tab expansion stopped working. As far as I know, I didn't change anything. If you look at the keymap logger it's still catching the binding, it just doesn't expand. meta+E does still work.

Emmet has not worked since atom update.
No Emmet's command in the command palette.

Atom v0.71.0
Emmet v0.5.0
on Mac (OSX 10.9.2)

In Emmet in Sublime when inside a opening tag i could press . and it would expand to class="" likewise the same behaviour would work with # expanding to id="". This doesn't seem to be working in Atom. Are there any plans to add it?

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

in .sass file

Expect:

.test
  margin: 5px

Actual:

.test
  margin: 5px;

on Emmet 0.4.1 (Atom 0.62.0)

Thanks,

The last update fixed a lot of the bugs that were happening, but there still seems to be an issue with where the cursor is placed after expansion:

Note that it places it in the middle of the expanded elements tag somewhere, as opposed to a useful position like in between the opening/closing tags.

Screenshot:

Atom 0.73.0
Emmet 0.6.0

As you se below, enabling Emmet breaks snippet expansion for php

Related ticket: tomvdv/atom-wordpress/issues/1

When the atom-wordpress package is installed, tab-completion of those snippets no longer works when Emmet is active. Instead of the snippet expanding to the expected code, it gets turned into an HTML-style tag (e.g. loop becomes <loop></loop>).

When using ! to expand to:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>

Instead of 'Document' getting selected 'e>Docume' is selected instead.

I'm on Atom 0.67.0 and Emmet 0.5.0

Hi there,

I was wondering if there is any way to use the syntaxProfile.json, because i want to change from double quotes to single quotes when a shortcut is expanded.

I've already checked the emmet atom package and only says:

There's no support (yet) for snippets.json and preferences.json

But there is no mention about syntaxProfile.json, so I want to think there is support.

If someone could point me in the right direction, i'll be so grateful.

Tag complete isn't working at all in .blade.php files, either with tab or meta+E.

This disables the ability to add selections above/below in HTML files. We should pick a different binding or at least call abortKeyBinding in situations where this command has no effect.

Im using autoprefixer, which makes the vendor prefixed created by emmet irrelevant. Any change we could get a setting to avoid adding those while expanding emmet snippets?

@gjtorikian When you have time, could you take a look into some of the failures on master? I fixed a bug with CSP today and wasn't sure if I was causing these errors or not. Then I disabled CSP and ran master and saw things were still failing.

If I type div.some-class

it does not expand to what I would expect emmet to expand to (

I really miss this from ST2/3

When Emmet is installed it interferers with the default keybindings of Atom.

I made a Quickcast of my issue, http://quick.as/e6kjirr8

Apparently this has to do with that Emmet is installed. When uninstalled/disabled problem goes away.

on Sublime, as far as I remember, Emmet previews your input abbreviation in real-time. Is that something planned/possible for Atom?