VScode 常用插件合集

下载：

VSCode下载地址：vscode下载
VSCode插件下载：插件下载站

chinese：

• 中文
  

beautify：

• 格式化代码工具
  美化javascript，JSON，CSS，Sass，和HTML在Visual Studio代码。
  

// 配置beautify格式化配置
    "beautify.config": {
        // 配置对大括号的格式化是否行内不自动换行
        "brace_style": "collapse,preserve-inline",
        // 配置缩减字符 4
        "indent_size": 4,
        // 如果需要配合eslint请打开
        "jslint_happy": false
    },
    // 如果没有就添加，你需要的格式化文件后缀，添加默认为beautify
    "[vue]": {
        "editor.defaultFormatter": "HookyQR.bseautify"
    },
    "[js]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[css]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[less]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[scss]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    // 开启默认保存即格式化
    "editor.formatOnSave": true,

prettier

• 格式化代码工具
  

html css support：

• 智能提示CSS类名以及id
  

html Snippets：

• 智能提示HTML标签，以及标签含义
  

jquery code snippets：

• jQuery代码智能提示
  

open in browser：

• 编辑的HTML文件等用谷歌浏览器打开
  

path intellisense：

• 自动提示文件路径，支持各种快速引入文件
  

bracket pair colorizer 2：

• 彩虹括号
  使用该插件可以用不同颜色区分出代码中的括号，对于括号很多的代码非常实用。该插件还支持自定义括号颜色。
  
  效果：
  

Color Highlight

• 设置 CSS 颜色的样式
  此扩展可以用来设置 CSS 颜色的样式。除了 CSS 之外，它还会对不显示默认颜色的 JavaScript、HTML、JSON 等文件进行着色。该插件会对颜色名称、RGB、RGBA 和十六进制颜色进行着色。
  
  效果：
  

Auto Close Tag:

• 自动补全结束标签
  插件用于自动补全HTML结束标签。
  

Auto Rename Tag：

• 自动重命名 HTML 标签的开始和结束标签
  使用该插件，可以在重命名一个 HTML 标签时，自动重命名 HTML 标签的开始和结束标签。避免只修改了开始标签，而忘记修改结束标签。该扩展适用于 HTML、XML、PHP 和 JavaScript。
  

CSS Peek :

• css样式快速定位
  CSS Peek 插件允许我们在 HTML 中选择某个 class 或者 id 名称按住Ctrl键+鼠标左键可以直接定位到该名称的CSS的位置。
  
  使用：链接

gitlens：

• git插件
  GitLens 增强了 Visual Studio Code 中内置的 Git 功能。它可以帮助我们更好地理解代码，快速了解更改行或代码块的人员、原因和时间。
  

githistory：

• git显示提交历史
  

Vetur

• Vue 开发必备插件
  它为 Vue.js 提供了实用的工具，例如调试、错误检查、语法高亮、片段等。
  

ES7+ React/Redux/React-Native snippets

• React语法智能提示
  React 开发者必备。借助此代码段，可以轻松创建基于类的组件、function组件。
  

REST Client

• VS Code 的 Postman
  REST Client 允许发送 HTTP 请求并直接在 VS Code 中查看响应。它是 VS Code 的 Postman，可以方便地集成到代码编辑器中。REST 客户端同时支持 REST 和 GraphQL API。
  

IntelliCode

• 智能的代码建议
  IntelliCode 旨在帮助开发人员提供智能的代码建议。它默认支持 Python、TypeScript/JavaScript、React 和 Java。IntelliCode 将最有可能使用的内容放在列表的顶部，从而节省时间。IntelliCode 建议基于 GitHub 上的数千个开源项目。
  

Code Runner：

• 代码运行
  

npm Intellisense

• 智能提示安装的npm包内容
  npm 安装包之后，在 require 时提供该插件可以获得智能提示，import 语句中自动填充 npm 模块。
  

Image preview：

• 图片预览
  通过此插件，当鼠标悬浮在图片的链接上时，可以实时预览该图片，除此之外，还可以看到图片的大小和分辨率。
  
  效果：
  

Tabnine

• 帮助完成代码的输入
  Tabnine 是一个多语言的插件，可以自动帮助我们完成代码的输入。Tabnine 的目标是通过基于 AI 的系统提高开发人员的生产力。
  

Live Server

• 实时服务器实时查看开发的网页或项目效果
  Live Server是一个具有实时加载功能的小型服务器，可以在项目中用live-server作为一个实时服务器实时查看开发的网页或项目效果。
  它是为静态和动态页面启动具有实时重新加载功能的本地开发服务器，在状态栏中单击即可启动或停止服务器。
  

VSCode-Icons

• 文件图片插件
  VSCode-Icons 是一个文件图片插件，可以为项目不同类型的文件赋予不同的图标。让我们更容易区分不同的文件类型。
  安装完成之后，按照以下步骤进行使用：文件 → 首选项 → 文件图标主题 → VSCode-Icons。
  
  效果：
  

thief book：

• 书阅读
  

background：

• 添加背景图片

{
    "background.useDefault": false,
    "background.customImages": [
        "D:/美图/6.jpg",
        "D:/美图/3.jpg",
        "D:/美图/6.jpg"
    ],
    "background.style": {
        "content": "''",
        "pointer-events": "none",
        "top": "0",
        "left": "0",
        "width": "100%",
        "height": "100%",
        "z-index": "99999",
        "background.repeat": "no-repeat",
        "background-size": "contain",
        "opacity": 0.1
    },
    "editor.minimap.enabled": false,
}

注意：

• 安装此插件可能会出现一个 “code损坏” 的提示
• 官方会给出建议：卸载重装
• 但我们其实只需要下载一个插件：Fix VSCode Checksums
• 具体操作如下：

图标：

material icon theme：

vscode-icons：

显示Visual Studio代码的图标，目前该插件已被vscode内部支持：“文件” -> “首选项” -> “文件图标主题”

主题

material theme：

aurora x

firefly pro

好看主题：地址

30个实用插件