vscode常用插件-一一网

一、open in browser

这个插件允许你使用默认的浏览器（或默认应用程序，主要是浏览器），打开当前文件

主要作用：在编辑器中使用浏览器打开当前html文件
（当然不仅仅可以打开html文件，也可以使用默认的应用程序打开任意类型的文件）

用法：
在当前文件中，右键单击空白，选择“open in default browser”或“open in other browsers”
Alt + B：open in default browser
Shift + Alt + B：open in other browsers

二、翻译(英汉词典)

本地英汉词典，不依赖任何在线翻译API

单个词翻译：在状态栏中显示选中词的释义，支持驼峰和下划线命名查询
批量翻译：运行“批量翻译标识符”，批量翻译当前文件中被识别出的标识符，打开并列编辑器并显示翻译后内容

Ctrl + Shift + P打开命令面板，输入“批量翻译标识符”

三、Auto Close Tag

自动添加HTML/XML闭合标签

特点：

当你输入开始标签的闭合括号的时候，自动添加闭合标签
闭合标签插入以后，光标停留在开始标签和闭合标签之间
自动关闭单标签，如
可以设置不自动关闭的标签列表（多个标签）

注意：从VS Code1.16版本开始，它内置了对HTML的关闭标签的支持。但是这个扩展（auto-close-tag），可以支持其它的语言，比如说XML, PHP, Vue, JavaScript, TypeScript, JSX, TSX等等。

F1或Ctrl + Shift + P可打开命令面板

常用配置

1、auto-close-tag.enableAutoCloseTag

设置是否自动插入关闭标签，默认是true

{
    "auto-close-tag.enableAutoCloseTag": true
}
复制代码

2、auto-close-tag.enableAutoCloseSelfClosingTag

设置是否自动关闭单标签，默认是true

比如输入<br，然后输入/，>会自动添加

{
    "auto-close-tag.enableAutoCloseSelfClosingTag": true
}
复制代码

3、auto-close-tag.insertSpaceBeforeSelfClosingTag

设置是否在单标签的正斜杠前插入一个空格，默认是false

{
    "auto-close-tag.insertSpaceBeforeSelfClosingTag": false
}
复制代码

4、auto-close-tag.activationOnLanguage

设置需要激活此扩展（auto-close-tag）的语言

{
    "auto-close-tag.activationOnLanguage": [
        "xml",
        "php",
        "blade",
        "ejs",
        "jinja",
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "plaintext",
        "markdown",
        "vue",
        "liquid",
        "erb",
        "lang-cfml",
        "cfml",
        "HTML (Eex)"
    ]
}
复制代码

5、auto-close-tag.disableOnLanguage

设置不需要激活此扩展（auto-close-tag）的语言

{
    "auto-close-tag.disableOnLanguage": [
        "php",
        "python"
    ]
}
复制代码

6、auto-close-tag.excludedTags

设置不需要自动关闭标签的标签

{
    "auto-close-tag.excludedTags": [
        "area",
        "base",
        "br",
        "col",
        "command",
        "embed",
        "hr",
        "img",
        "input",
        "keygen",
        "link",
        "meta",
        "param",
        "source",
        "track",
        "wbr"
    ]
}
复制代码

四、Auto Rename Tag

自动重命名配对的HTML/XML标签

特性：当你重命名一个HTML/XML标签时，自动重命名与之配对的那个HTML/XML标签

常用配置

1、auto-rename-tag.activationOnLanguage

设置需要激活此扩展（auto-close-tag）的语言，默认所有语言都启用

{
  "auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]
}
复制代码

注意：从VS Code1.44版本开始，它内置了auto update tags对重命名HTML标签的支持。是通过启用editor.linkedEditing配置项来实现的，如果此配置项启用了，那么此扩展会忽略（跳过）HTML标签，即使HTML在auto-rename-tag.activationOnLanguage中已经配置过

五、Prettier

Prettier是一个代码格式化工具，它通过解析你的代码，并通过它自己的规则重新打印出来，来执行一致的代码格式

设置为默认的代码格式化工具

在你的VSCode settings中可将Prettier设置为默认的代码格式化工具，可以针对所有语言设置，也可以针对一个特定的语言设置

栗子

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",//对所有语言设置
  "[javascript]": {//对javascript单独设置
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
复制代码

对一个特定的语言禁用Prettier

创建一个.prettierignore文件
通过设置VSCode settings中的editor.defaultFormatter来禁用
对特定的语言，禁用editor.formatOnSave(保存时格式化)选项

第2种方法栗子
除了Javascript外，其它的语言均默认使用Prettier进行格式化

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": null // 设置为null表示，javascript文件不使用Prettier
  }
}
复制代码

只对Javascript默认使用Prettier进行格式化

{
  "editor.defaultFormatter": null,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
复制代码

第3种方法栗子

{
  "[javascript]": {
    "editor.formatOnSave": false
  }
}
复制代码

Prettier解析

这个扩展会从你的项目里的本地依赖(npm i -D prettier)中，来使用Prettier（推荐的方式）
当安装了全局prettier模块(npm i -g prettier)，Prettier的配置项prettier.resolveGlobalModule被设置成true时，这个扩展会尝试去解析全局依赖模块
当既没有在你的项目中本地安装prettier，也没有全局安装prettier时，与这个扩展绑定的那个版本的prettier将会被使用