阅读 138

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

  1. 创建一个.prettierignore文件
  2. 通过设置VSCode settings中的editor.defaultFormatter来禁用
  3. 对特定的语言,禁用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解析

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

配置

配置prettier有多种方法 你可以使用VS Code settings, prettier configuration files, an .editorconfig file对prettier进行配置

  • prettier configuration files
  • .editorconfig文件
  • VS Code settings

其中The VS Code settings作为一个备用,退路

配置的读取优先级 1、Prettier configuration file(一般为.prettierrc) 2、.editorconfig 3、Visual Studio Code Settings (如果上面两个配置存在,这个就会被忽略)

推荐你在你的项目中总是包含一个prettier configuration files配置文件,其中指定针对你的项目的所有设置

注意:如果你不愿意为每一个项目创建一个Prettier配置文件,可以通过设置prettier.configPath,来设置一个默认的配置(但是,需要小心的是,一旦设置了prettier.configPath本地配置文件会被忽略

集成Linter

集成Linter的推荐方式是,让Prettier做格式化的事情,让Linter不处理格式规则相关的事情 你可以在Prettier网站上,学习如何配置各种Linter 然后你就可以像你平时一样使用各种Linter扩展了

Prettier网站上集成Linter文档

设置

Prettier设置

与格式化相关的设置

设置选项可参考文档

扩展设置

Prettier扩展自己的一些设置

文章分类
开发工具
文章标签