emmet 强制展开后默认光标位置答案

【问题标题】：emmet force default cursor position after expansionemmet 强制展开后默认光标位置
【发布时间】：2022-01-15 16:48:28
【问题描述】：

我在 VS Code 上使用以下 emmet sn-p：

{<!DOCTYPE html>}>html[lang='${lang}']>(head>meta[charset='${charset}']+meta[http-equiv='X-UA-Compatible'][content='IE=edge']+meta[name='viewport'][content='width=device-width,initial-scale=1.0']+(title>{${title}${1}})+script+style{.one{\}})+(body>div.one)

在标题title>{${title}${1}} 之后有一个制表位，默认情况下将光标放在文本title| 之后。展开如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>title|</title>
  <script></script>
  <style>.one{}</style>
</head>
<body>
  <div class="one"></div>
</body>
</html>

我希望光标位于 css 类中，位于大括号 .one{|} 之间。
所以我把制表位放在类里面，比如.one{${1}\}}:

{<!DOCTYPE html>}>html[lang='${lang}']>(head>meta[charset='${charset}']+meta[http-equiv='X-UA-Compatible'][content='IE=edge']+meta[name='viewport'][content='width=device-width,initial-scale=1.0']+(title>{${title}})+script+style{.one{${1}\}})+(body>div.one)

但是在展开之后光标被放置在脚本标签之间。 <script>|</script>.

如何让光标在扩展后位于 .one{|} 内？
另外，我可以在 .one{<linebreak>|<linebreak>} 这样的文本中添加换行符吗？

【问题讨论】：

如果你在你想要的地方点击一次。如果这是你经常使用的东西，它应该是一个 sn-p - 更容易正确。

标签： visual-studio-code emmet

【解决方案1】：

我可以重现您在 vscode 中看到的相同行为。请注意，如果您 tab 一旦光标确实转到您想要的位置。这可能是一个错误。

如果您经常使用这种形式，请考虑将其制成 sn-p。推理起来要清楚得多，并且制表符位置在 vscode 中确实按预期工作。并且无论你在哪里换行，你都会得到一个换行符，所以换行符可以去任何地方。

示例 sn-p：


"html9": {
  "prefix": "html9",               // whatever prefix you want
  "body": [
    "<!DOCTYPE html>",             // need to escape "'s
    "<html lang=\"en\">",
    "<head>",
    "\t<meta charset=\"UTF-8\">",  // \t for a tab

    "\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
    "\t<meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">",
    "\t<title>title|</title>",
    "\t<script></script>",

    // "\t<style>.one{$1}</style>",
    "\t<style>.$1{$2}</style>",      // tabstop $1 for class name

    "</head>",
    "<body>",

    // "\t<div class=\"one\"></div>",
    "\t<div class=\"$1\"></div>",   // tabstop $1 for class name

    "</body>",
    "</html>"
  ]
}

见Defining your own snippets。

【讨论】：