在VSCode中,如何以编程方式选择单词?

时间:2019-06-18 15:05:00

标签: visual-studio-code vscode-extensions

我正在为VSCode进行扩展,希望将光标/插入符号扩展为一个单词的限制。

将选择范围扩大到包括下划线但没有其他符号的整个单词(例如foo_bar)的最佳方法是什么?

在文本编辑器中双击单词的方式与我试图通过代码实现的方式完全一样(它会选择下划线),但是据我所知,没有命令会产生相同的行为。

我知道最近的是“展开选择”命令(又名editor.action.smartSelect.expand)。

展开选择,但是,如果执行一次,将在下划线处停止;如果再次执行,则将选择整个单词。很好,但是...可以执行任意次,然后它将开始选择空格,其他符号,行等。

也许最好的选择是一次使用“扩展选择”命令,然后以某种方式检查代码中当前选择旁边是否有下划线?

2 个答案:

答案 0 :(得分:0)

<nav class="nav-background" id="">
  <div class="nav-wrapper">
    <div class="row valign-wrapper">
      <div class="valign col s2">
        <a routerLink="profile"><img class="circle header img-custom" src="{{User.foto}}" *ngIf="User"></a>
      </div>
      <div class="col s6 conteudo-header">
        <div class="col s12 nome-header" *ngIf="User">{{User.apelido}}</div>
        <div class="row">
          <div class=" nivel-header" *ngIf="User">
            {{User.nivel | titlecase}}
          </div>
          <div class=" estrelas" *ngIf="User">
            <i class="material-icons  estrela estrela-semcor" [ngClass]="{'estrela-comcor': checkNivel(1)}">star</i>
            <i class="material-icons  estrela estrela-semcor" [ngClass]="{'estrela-comcor': checkNivel(2)}">star</i>
            <i class="material-icons  estrela estrela-semcor" [ngClass]="{'estrela-comcor': checkNivel(3)}">star</i>
            <i class="material-icons  estrela estrela-semcor" [ngClass]="{'estrela-comcor': checkNivel(4)}">star</i>
            <i class="material-icons  estrela estrela-semcor" [ngClass]="{'estrela-comcor': checkNivel(5)}">star</i>
          </div>
        </div>

        <div class=" col s12 saldo-header"*ngIf="User" >Saldo {{User.saldo_atual}}</div>
      </div>
      <div class="col s2">
        <a routerLink="feed" class="right"><i class="material-icons cor-icone-home link dimensao-icone">home</i></a>
      </div>
      <div class="col s2">
        <div materialize="sideNav" [materializeParams]="[options]" data-activates="slide-out" class="hide-on-large-only"><i class="material-icons grey-text dimensao-icone">menu</i></div>
      </div>
    </div>
  </div>
</nav>
 <!--Nav 2-->
  <div class="row valign-wrapper nav2" id="nav-second">
    <div class="col s4">
      <div materialize="sideNav" [materializeParams]="[options]" data-activates="slide-out" class="hide-on-large-only"><i class="material-icons grey-text dimensao-icone">keyboard_backspace</i></div> 
    </div>
    <div class="col s4 pull-s1">
      <a routerLink="feed" class="right"><i class="material-icons cor-icone-home link dimensao-icone">home</i></a>
    </div>
    <div class="col s4">
      <div materialize="sideNav" [materializeParams]="[options]" data-activates="slide-out" class="hide-on-large-only"><i class="material-icons grey-text dimensao-icone">menu</i></div>
    </div>
  </div>

答案 1 :(得分:0)

在看到您已经回答了您的问题之前,我已将其写出来,但是由于它可能对初学者有所帮助,因此我仍然会发布它。

您可以使用executeCommand()进行此操作,但这可能只是实现目标所需的技巧和一种about回的方式。 (这是我第一次编写扩展程序时所做的,因为我不了解或不知道在API中的位置)。如果您的最终目标是为用户选择单词,那么hack可能会很好(但是我有副作用,例如弄乱用户的查找项),但是如果这只是让单词在您的代码中使用的一种方式,那么这是错误的解决方法。既然您已经知道用户可以使用smartSelect,那么我假设您想要后者。

您应该使用getWordRangeAtPosition()并使用当前选择的开始或结束,以及使用覆盖默认分词符的正则表达式:

const range = document.getWordRangeAtPosition(
    vscode.window.activeTextEditor.selection.active,
    /\S+/
);

if (range) {
    // then you can get the word that's there:
    const word = document.getText(range); // get the word at the range

    // or modify the selection if that's really your goal:
    vscode.window.activeTextEditor.selection = new vscode.Selection(range.start, range.end);
}

这是一个过于简单的正则表达式,它将任何非空格字符字符都视为一个单词,这将适合您的示例,但可能需要进行精炼以消除标点符号。