emmet 扩展后强制默认光标位置

emmet force default cursor position after expansion

我在 VS Code 上使用以下 emmet 片段:

{<!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{\}})+(body>div.one)

标题 title>{${title}} 后有一个制表位,默认情况下将光标放在文本 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 class 内,在大括号 .one{|} 之间。
所以我把制表位放在 class 里面,比如 .one{\}}:

{<!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{\}})+(body>div.one)


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

  1. 展开后如何让光标在.one{|}里面?
  2. 另外,我可以在像 .one{<linebreak>|<linebreak>} 这样的文本中添加换行符吗?

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

如果您经常使用此表单,请考虑将其制作成一个片段。在 vscode 中,推理起来要清楚得多,制表位的放置确实按预期工作。无论你在哪里换行,你都会得到一个换行符,所以换行符可以在任何地方。

示例片段:


"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{}</style>",
    "\t<style>.{}</style>",      // tabstop  for class name

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

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

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

参见Defining your own snippets