Grupo de HTML y CSS
Publico Grupo
Publico Grupo
Active a day
Este grupo esta relacionado con nuestro curso profesional de HTML y CSS. Aquí se comparten... View more
Publico Grupo
Problema Complemento Emmet Módulo 1-1.3 Complementos recomendados para Sublime T
Etiquetado: emmet
Problema Complemento Emmet Módulo 1-1.3 Complementos recomendados para Sublime T
Posted by mel2096 on 28 enero, 2024 en 3:05 pmHola que tal, realicé la instalación de complementos para sublime text, sin embargo el complemento emmet no funciona, para iniciar lo de html:5 me aparece como sugerencia pero al momento de dar click en tab no pasa nada, tampoco para completar etiquetas, no me funciona ni para texto genérico, leí en un blog que aveces no es tab la tecla sino ctrl+e , lo intenté y tampoco funcionó, me pudieran ayudar porfavor?
Angel Sánchez respondido 9 meses, 3 semanas 3 Miembros · 6 Respuestas- 6 Respuestas
Hola, te paso una lista de posibles soluciones:
- Reinicia Sublime Text. la vieja confiable, a veces esto soluciona el problema.
- Verifica la instalación de Emmet. Ve a “Preferences” > “Package Settings” > “Emmet” > “Settings – Default” y asegúrate de que no haya errores de sintaxis. Si ves algún error, puedes corregirlo en el archivo de configuración.
- Revisa los atajos de teclado. Verifica que no haya conflictos y que los atajos de teclado de Emmet estén configurados correctamente. Puedes revisarlos en “Preferences” > “Package Settings” > “Emmet” > “Key Bindings – Default”.
Me avisas si alguna de estas opciones soluciona tu detalle. 😀
hola! muchas gracias por contestar, si ya reinicié sublime text y no se solucionó el problema, también instalé otra versión de sublime text porque vi una discusión con una compañera que comentó que su solución fue instalar otra versión , ya exploré settings y key findings de emmet, se que el lado izquierdo, son como ejemplos y el lado derecho es para escribir pero siendo honesta no tengo la menor idea de que buscar o cómo corregir
😞
Key Bindings
// This is a sample keymap for all available Emmet actions like
// Increment/Decrement number, Balance, Select Item etc.
// Copy and uncomment actions you want to use into your keybindings file on the right.
// Read more about Sublime Text key binding: https://www.sublimetext.com/docs/3/key_bindings.html// Expand abbreviation
// {
// “keys”: [“ctrl+e”],
// “command”: “emmet_expand_abbreviation”
// },// Enter abbreviation mode: explicitly enter abbreviation anywhere
// with interactive preview
// {
// “keys”: [“ctrl+.”],
// “command”: “emmet_enter_abbreviation”
// },// Wrap with Abbreviation
// {
// “keys”: [“shift+ctrl+g”],
// “command”: “emmet_wrap_with_abbreviation”,
// “context”: [{“key”: “setting.is_widget”, “operand”: false }]
// },// Balance Outward
// {
// “keys”: [“ctrl+,”],
// “command”: “emmet_balance”,
// “args”: { “direction”: “outward” }
// },// Balance Inward
// {
// “keys”: [“ctrl+shift+0”],
// “command”: “emmet_balance”,
// “args”: { “direction”: “inward” }
// },// Go to Matching Tag/Tag Pair
// {
// “keys”: [“ctrl+alt+j”],
// “command”: “emmet_go_to_tag_pair”
// },// Remove Tag
// {
// “keys”: [“shift+ctrl+;”],
// “command”: “emmet_remove_tag”
// },// Split/Join Tag
// {
// “keys”: [“shift+ctrl+"],<br> // "command": "emmet_split_join_tag"<br> // },</p><p> // Go to Next Edit Point<br> // {<br> // "keys": ["ctrl+alt+right"],<br> // "command": "emmet_go_to_edit_point"<br> // },</p><p> // Go to Previous Edit Point<br> // {<br> // "keys": ["ctrl+alt+right"],<br> // "command": "emmet_go_to_edit_point",<br> // "args": { "previous": true }<br> // },</p><p> // Select Next Item<br> // {<br> // "keys": ["shift+ctrl+."],<br> // "command": "emmet_select_item"<br> // },</p><p> // Select Previous Item<br> // {<br> // "keys": ["shift+ctrl+,"],<br> // "command": "emmet_select_item",<br> // "args": { "previous": true }<br> // },</p><p> // Evaluate Math Expression<br> // {<br> // "keys": ["shift+ctrl+y"],<br> // "command": "emmet_evaluate_math"<br> // },</p><p> // Increment/Decrement Number<br> // {<br> // "keys": ["ctrl+up"],<br> // "command": "emmet_increment_number",<br> // "args": { "delta": 1 }<br> // },<br> // {<br> // "keys": ["ctrl+down"],<br> // "command": "emmet_increment_number",<br> // "args": { "delta": -1 }<br> // },<br> // {<br> // "keys": ["alt+up"],<br> // "command": "emmet_increment_number",<br> // "args": { "delta": 0.1 }<br> // },<br> // {<br> // "keys": ["alt+down"],<br> // "command": "emmet_increment_number",<br> // "args": { "delta": -0.1 }<br> // },<br> // {<br> // "keys": ["shift+alt+up"],<br> // "command": "emmet_increment_number",<br> // "args": { "delta": 10 }<br> // },<br> // {<br> // "keys": ["shift+alt+down"],<br> // "command": "emmet_increment_number",<br> // "args": { "delta": -10 }<br> // },</p><p> // Update Image Size<br> // {<br> // "keys": ["ctrl+u"],<br> // "command": "emmet_update_image_size"<br> // },</p><p> // Convert data:URL<br> // {<br> // "keys": ["ctrl+'"],<br> // "command": "emmet_convert_data_url"<br> // },</p><p> // Rename Tag<br> // {<br> // "keys": ["shift+ctrl+'"],<br> // "command": "emmet_rename_tag"<br> // },</p><p> // Tab key handler for single cursor<br> {<br> "keys": ["tab"],<br> "command": "emmet_expand_abbreviation",<br> "args": { "tab": true },<br> "context": [<br> { "key": "emmet_abbreviation" },<br> { "key": "emmet_tab_expand" },<br> { "key": "num_selections", "operand": 1 }<br> ]<br> },</p><p> // Tab key handler for multiple cursors<br> {<br> "keys": ["tab"],<br> "command": "emmet_expand_abbreviation",<br> "context": [<br> { "key": "emmet_activation_scope" },<br> { "key": "emmet_multicursor_tab_expand" },<br> { "key": "num_selections", "operator": "not_equal", "operand": 1 }<br> ]<br> },<br> {<br> "keys": ["enter"],<br> "command": "emmet_expand_abbreviation",<br> "context": [<br> { "key": "has_emmet_forced_abbreviation_mark" },<br> { "key": "emmet_abbreviation" }<br> ]<br> },<br> {<br> "keys": ["shift+tab"],<br> "command": "next_field",<br> "context": [<br> { "key": "has_next_field" },<br> { "key": "emmet_abbreviation" },<br> { "key": "emmet_tab_expand" }<br> ]<br> },<br> {<br> "keys": ["escape"],<br> "command": "emmet_clear_abbreviation_marker",<br> "context": [<br> { "key": "has_emmet_abbreviation_mark" },<br> { "key": "auto_complete_visible", "operator": "equal", "operand": false }<br> ]<br> },<br> {<br> "keys": ["escape"],<br> "command": "emmet_hide_tag_preview",<br> "context": [<br> { "key": "emmet_tag_preview" }<br> ]<br> },<br> {<br> "keys": [<br> "#"<br> ],<br> "args": {<br> "attribute": "id"<br> },<br> "command": "emmet_insert_attribute",<br> "context": [<br> {<br> "operand": "text.html meta.tag -string -punctuation.definition.tag.begin.html -meta.scope.between-tag-pair.html -source -meta.tag.template.value.twig",<br> "operator": "equal",<br> "match_all": true,<br> "key": "selector"<br> },<br> {<br> "operator": "equal",<br> "operand": true,<br> "key": "emmet_auto_id_class"<br> }<br> ]<br> },<br> {<br> "keys": [<br> "."<br> ],<br> "args": {<br> "attribute": "class"<br> },<br> "command": "emmet_insert_attribute",<br> "context": [<br> {<br> "operand": "text.html meta.tag -string -punctuation.definition.tag.begin.html -meta.scope.between-tag-pair.html -source -meta.tag.template.value.twig",<br> "operator": "equal",<br> "match_all": true,<br> "key": "selector"<br> },<br> {<br> "operator": "equal",<br> "operand": true,<br> "key": "emmet_auto_id_class"<br> }<br> ]<br> }<br>]</p><p>SETTINGS</p><p>{<br> // Automatically marks (captures) Emmet abbreviation when typing text: captured abbreviation<br> // is highlighted with underline. Use Tab key inside captured abbreviation to expand it.<br> // Works in limited syntaxes only, see
abbreviation_scopesoption<br> // Possible values:<br> // – true: enable capturing for both markup and stylesheet abbreviations<br> // – false: completely disable capturing<br> // – "markup" or "stylesheet": enable capturing for either markup or stylesheet abbreviations<br> "auto_mark": true,</p><p> // Preview captured abbreviations, works only if
auto_markis enabled.<br> // Possible values:<br> // – true: enable preview for both markup and stylesheet abbreviations<br> // – false: completely disable preview<br> // – "markup" or "stylesheet": enable previews for either markup or stylesheet abbreviations<br> "abbreviation_preview": true,</p><p> // If enabled, all abbreviations in JSX must be prefixed with
<character.<br> // It allows you to explicitly specify that you are typing abbreviation and<br> // want to expand it with
Tabkey.<br> // Disabling this option will likely break native ST
Tabkey handler like<br> // inserting completions and indenting code<br> "jsx_prefix": true,</p><p> // Scope for marked abbreviation region highlighting<br> "marker_scope": "comment",</p><p> // Editor scope to Emmet syntax mapping<br> "syntax_scopes": {<br> "html": "text.html - source - meta.attribute-with-value.style",<br> "xml": "text.xml - text.xml.xsl",<br> "xsl": "text.xml.xsl",<br> "jsx": "source.js.jsx | source.tsx | source.js | source.jsx",<br> "haml": "source.haml",<br> "jade": "text.jade | source.pyjade",<br> "pug": "text.pug | source.pypug",<br> "slim": "text.slim",</p><p> "css": "source.css | source.postcss | meta.attribute-with-value.style.html string.quoted",<br> "sass": "source.sass",<br> "scss": "source.scss",<br> "less": "source.less",<br> "stylus": "source.stylus",<br> "sss": "source.sss"<br> },</p><p> // List of scopes with inline context<br> "inline_scopes": [<br> "meta.attribute-with-value.style.html"<br> ],</p><p> // List of scope selectors where abbreviation marker should be activated,<br> // e.g. plugin will mark text that user types as abbreviation<br> "abbreviation_scopes": [<br> "(text.html | text.xml) - source - meta - comment",<br> "source.sass - meta.property-value - meta.property-name - string - punctuation - comment",<br> "(source.css | source.scss | source.less | source.postcss | source.stylus) & meta.property-list",<br> "(source.css | source.scss | source.less | source.postcss | source.stylus) - meta.property-value - meta.property-name - string - comment",<br> "(source.tsx | source.js | source.jsx) - comment",<br> "text.html.cfml - meta.tag",<br> // Inline CSS<br> "text.html meta.attribute-with-value.style (string.quoted | source.css)"<br> ],</p><p> // List of scopes where Emmet abbreviations should not be be captured.<br> // If any of the following scopes matches,
abbreviation_scopes<br> // will be ignored<br> "ignore_scopes": [],</p><p> // Expand Emmet abbreviation with Tab key when in abbreviation marker<br> "tab_expand": true,</p><p> // Expand Emmet abbreviation with Tab key with multiple cursors in editor.<br> // Currently, this mode is less restricted that single-cursor Tab: it doesn’t<br> // require abbreviation to be immediately typed and expanded by user, it may<br> // expand existing abbreviation.<br> // As a side-effect, you may not be able to insert tab character after words<br> // if this option is enabled<br> "multicursor_tab": true,</p><p> // Emmet syntaxes (keys of "syntax_scopes" dictionary) where Tab expander<br> // is limited to known snippets only.<br> // For example, when you type
di, pressing Tab key will try to match default<br> // Sublime Text snippet since
diis neither known tag nor known Emmet snippet.<br> // But
divwill be expanded via Emmet since it’s a known tag.<br> // However, typing
di.samplewill be expanded via Emmet as well since it<br> // contains special operator like
.<br> // Known snippets are:<br> // * any valid HTML5 tag<br> // * any predefined Emmet snippet<br> // * upper-cased word (JSX, Svelte components)<br> // * words with dash (Vue, Web Components)<br> "known_snippets_only": ["html"],</p><p> // Automatically insert
classattribute when typing
.inside open tag<br> // and
idattribute when typing
#<br> "auto_id_class": false,</p><p> // Display open tag preview next to closing tag when caret is inside it<br> // and open tag is not currently visible<br> "tag_preview": false,</p><p> // Document size limit for
tag_previewoption: display preview only if current<br> // document size is less that given one. Setting larger value will degrade<br> // performance of caret movement. Set value to 0 to disable limit<br> // Future versions of Emmet plugin might work better with large documents.<br> "tag_preview_size_limit": 51250,</p><p> // The maximum file size where Emmet will capture HTML tag context for abbreviation.<br> // Tag context is used for resolving implicit tag names in abbreviation<br> // (e.g.
.itemshould expand to
inside
tag), but<br> // requires full document scan<br> "context_size_limit": 102400,</p><p> // The maximum selection size for instant preview of Wrap with Abbreviation action.<br> "wrap_size_preview": 10240,</p><p> // Override default Toggle Comment with Emmet variation for specified syntax scopes<br> // defined in
comment_scopes. When enabled, if you run Toggle Comment action<br> // without selecting any text, Emmet will try to find matching HTML tag pair<br> // for current caret position and comment entire tag instead of current line.<br> // If this option is disabled, you can create keyboard shortcut for<br> //
toggle_commentaction.<br> "toggle_comment": false,</p><p> "comment_scopes": [<br> "text.html - source",<br> "text.xml",<br> "source.css",<br> "source.scss",<br> "source.less"<br> ],</p><p> // Enable closing tag commenting after expanding abbreviations, e.g.<br> // <div class="foo"><br> // </div><!-- .foo --><br> "comment": false,</p><p> // Outputs everything between
[and
]only if specified attribute name<br> // (written in UPPERCASE) exists in element. Attribute name is replaced with<br> // actual value. Use
\nto add a newline.<br> "comment_template": "\n<!-- /[#ID][.CLASS] -->",</p><p> // Max size of file to convert to data:URL. Set to 0 to disable limit<br> "max_data_url": 20480,</p><p> // Output code style<br> // Defines how self-closing tags (like
or
) and boolean attributes<br> // (like
disabled) will look in generated code.<br> // Possible values are "html", "xhtml", "xml"<br> "markup_style": "html",</p><p> // Attribute value quotes, "double" or "single"<br> "attribute_quotes": "double",</p><p> // Enable BEM support.<br> // When enabled, Emmet will treat class names starting with
–as element
// and with_
as modifier in BEM (https://en.bem.info) notation.
// These class names will inherit block name from current or ancestor element.
// For example, the abbreviationul.nav.nav_secondary>li.nav__item
can be
// shortened toul.nav._secondary>li.-item
with this option enabled.
“bem”: false,// When enabled, tries to shorten generated HEX color values for CSS abbreviations.
// For example,c#0
abbreviation can be expanded either tocolor: #000;
// orcolor: #000000;
“short_hex”: true,// Additional CSS styles to be embedded into Emmet previews and phantoms
“popup_css”: “”,// Config for Emmet
// SeeGlobalConfig
interface for supported properties: https://github.com/emmetio/emmet/blob/master/src/config.ts
// Example:
// “config”: {
// “markup”: {
// “snippets”: {
// “foo”: “foo.bar>baz”
// },
// “options”: {
// “output.selfClosingStyle”: “xhtml”
// }
// }
// }
“config”: {},// Unique ID editor instance, used for upcoming online Emmet config.
// Please do not edit
“uid”: null,// Enable anonymous event tracking, used to improve Emmet experience
“telemetry”: null
}Otra duda en caso de que no pueda corregirse el error, pudiera usar VS Code para poder terminar el curso?? tuve muy muy poquita practica con VS Code pero me resultó más sencillo que sublime y ya lo tengo instalado
Hola, sí. De hecho, ya la mayoría de los cursos los estamos sacando con VS Code. 😀
Hola Angel, yo tengo el mismo problema y la verdad no entiendo nada, he revisado, pero mi sublime solo aparece la hoja en engro y ya.
Hola Daniel, te aparece en negro porque has abierto un archivo nuevo. Si gustas mándame mensaje para guiarte.
Inicia sesión para responder.