自用VSCode插件列表记录~!这些都是值得推荐安装提升开发效率的工具~~

175 阅读3分钟

今天突然想着写一下博客进行赋能,哈哈哈~这是我自己使用 VSCode 的插件集合~~

插件一: Chinese (Simplified) (简体中文)

image.png

VSCode 汉化插件提升了日常的开发效率

插件二: Auto-Close-Tag 自动关闭标签

image.png

大大提升了开发效率,从 VS Code 1.16 开始,它内置了对 HTML、Handlebars 和 Razor 文件的关闭标记支持。此扩展支持其他语言,如 XML、PHP、Vue、JavaScript、TypeScript、JSX、TSX 等。它是可配置的。

用于auto-close-tag.enableAutoCloseTag设置是否自动插入关闭标签(true默认为):

{
    "auto-close-tag.enableAutoCloseTag": true
}

设置是否自动关闭自闭标签(例如 type <br,然后 type />将自动添加)(true默认为):

{
    "auto-close-tag.enableAutoCloseSelfClosingTag": true
}

是否在自闭合标签的正斜杠前插入空格(false默认为):

{
    "auto-close-tag.insertSpaceBeforeSelfClosingTag": false
}

添加条目auto-close-tag.activationOnLanguage以设置将激活扩展程序的语言。用于["*"]激活所有语言。以下是默认设置:

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

插件三: Auto Rename Tag 自动重命名标签

image.png

配置

添加条目auto-rename-tag.activationOnLanguage以设置将激活扩展程序的语言。默认情况下,它将["*"]为所有语言激活。

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

该设置应使用VS Code中定义的语言 ID 进行设置。以javascript 定义为例,我们需要使用javascriptfor.js.es6,使用javascriptreactfor .jsx。所以,如果你想在.js文件上启用这个扩展,你需要javascript在 settings.json 中添加。

插件四: open in browser 在浏览器中打开

image.png

快捷方式

组合键指令
Alt + B在默认浏览器中打开
Shift + Alt + B在指定浏览器中打开

插件五: Postcode 可用于创建和测试简单和复杂的 HTTP/s 请求

image.png

打开方式,在VSCode左侧面板点击即可如下图:

image.png

插件六: TODO Highlight 注释高亮

image.png

具体配置根据自己喜欢的款式自由设定;附上插件官方文档地址:TODO Highlight

插件七: Image preview 图片预览 项目中引入的图片可以直接预览,方便开发测试不用担心路径出错的问题了~~

image.png

插件八: GitHub Theme 我个人喜欢用的主题(GitHub Dark)推荐还是很棒的~~

image.png

插件九: GitLens — Git supercharged

image.png GitLens 只是帮助您更好地理解代码。快速了解更改行或代码块的人员、原因和时间。回顾历史,以进一步了解代码如何以及为何演变。轻松探索代码库的历史和演变。

插件十: CodeSnap 一款截取VScode代码的插件

image.png

  1. 打开命令面板(在 Windows 和 Linux 上为 Ctrl+Shift+P,在 OS X 上为 Cmd+Shift+P)并搜索CodeSnap.
  2. 选择要截屏的代码。
  3. 如果需要,调整屏幕截图的宽度。
  4. 单击快门按钮将屏幕截图保存到磁盘。

插件十一: Quokka.js 可以实现console.log效果

image.png

插件十二、十三: ESLint 和 Prettier - Code formatter 两款插件功能代码检查和格式化

image.png

image.png

插件十四、十五: Class autocomplete for HTML 和 Beautify css/sass/scss/less

image.png 此插件可以美化样式还是不错的,想让自己的代码好看些可以使用这款插件~~

image.png HTML class="" 属性的智能自动完成,还是值得推荐的~~

插件十六: Vetur (vue 语法高亮)安装激活 vetur 插件, 代码就有高亮了。右键菜单还会变多一些, 主要多了个格式化文档

image.png

插件十七: JavaScript (ES6) code snippets ES6代码片段 进入官方文档介绍

image.png

插件十八: Path Intellisense 路径补全

更便捷开发,值得使用的一款~~

image.png

差不多了就这些吧,还有一些断点调试、代码检测、复杂圈度等根据自己爱好去学习一下使用吧!!

主要还是赋能一下,当然也是记录一下自己的开发吧~~~~