本文内容较多可以按
Ctrl + F
搜索。提示:由于插件数量较多,简介均为插件介绍文档中内容,具体请点击链接查看插件文档。
提示:相同功能或功能相近的插件请勿重复安装,避免造成冲突或插件相关功能使用中重复。
提示:插件仅提供功能性增强,请牢记基础,切勿本末倒置。
提示:请按需安装。
- Auto Import
自动查找,解析并提供所有可用导入的代码操作和代码完成。适用于Typescript和TSX。
https://marketplace.visualstudio.com/items?itemName=steoates.autoimport - Auto Rename Tag
与Visual Studio IDE一样,自动重命名配对的HTML / XML标签。
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag - Beautify
在Visual Studio Code中美化javascript,JSON,CSS,Sass和HTML。
https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify - Bracket Pair Colorizer
允许用颜色标识匹配的括号。用户可以定义要匹配的字符以及要使用的颜色。
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer - Chinese (Simplified) Language Pack for Visual Studio Code
适用于 VS Code 的中文(简体)语言包。
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans - Class autocomplete for HTML
自动匹配样式表中的class样式。
https://marketplace.visualstudio.com/items?itemName=AESSoft.aessoft-class-autocomplete - Code Runner
运行多种语言的代码段或代码文件: C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V
https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner - Color Info
提供快捷的颜色信息
https://marketplace.visualstudio.com/items?itemName=bierner.color-info - Comment Translate
许多优秀的项目,都有丰富的注释,使用者可以快速理解代码意图。但是如果使用者并不熟习注释的语言,会带来理解困难。本插件使用 Google Translate API 翻译 VSCode 的编程语言的注释。
https://marketplace.visualstudio.com/items?itemName=intellsmi.comment-translate - CSS Peek
扩展了HTML和ejs代码编辑,Go To Definition
并Go To Symbol in Workspace
支持在源代码的字符串中找到的css / scss / less(类和ID)。
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek - Debugger for Chrome
用于在Google Chrome浏览器或其他支持Chrome DevTools协议的目标中调试JavaScript代码。
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome - Debugger for Firefox
用于调试在Mozilla Firefox浏览器中运行的Web应用程序和扩展。
https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug - Easy Sass
保存后自动将SASS / SCSS文件编译为.css和.min.css。您还可以快速编译项目中的所有SCSS / SASS文件。
https://marketplace.visualstudio.com/items?itemName=spook.easysass - ESLint_(如果你不熟悉ESLint请勿安装)_
VS Code ESLint扩展。
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint - filesize
该软件包旨在与Visual Studio Code编辑器一起使用,并且在编辑器的状态栏中显示聚焦文件的大小。
https://marketplace.visualstudio.com/items?itemName=mkxml.vscode-filesize - Git History
Git历史记录,搜索和更多内容。
https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory - GitLens — Git supercharged
GitLens supercharges内置到Visual Studio代码Git的能力。它可以帮助您通过Git责备注释和代码镜头一目了然地看到代码作者的身份,无缝地导航和浏览 Git存储库,通过强大的比较命令获得有价值的见解,等等。
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens - Guides
添加各种缩进指示线。
https://marketplace.visualstudio.com/items?itemName=spywhere.guides - HTML CSS Support
Missing CSS support for HTML documents.
https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css - HTML Snippets
输入一段代码的一部分,按Enter键,然后代码段将展开。
https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets - htmltagwrap
将您的选择包装在HTML标记中。可以包装内联选择和跨越多行的选择(可同时使用单个选择和多个选择)。
https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap - HTML Boilerplate
提供了所有Web应用程序中使用的标准HTML样板代码。
https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate - HTMLHint
将HTMLHint静态分析工具集成到Visual Studio Code中。
https://marketplace.visualstudio.com/items?itemName=mkaufman.HTMLHint - Image preview
在装订线和悬停时显示图像预览 。
https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview - Import Cost
该扩展名将在编辑器中内联显示导入包的大小。该扩展程序利用带有babili-webpack-plugin的webpack来检测导入的大小。
https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost - IntelliSense for CSS class names in HTML
根据在工作区中找到的定义或通过link
元素引用的外部文件为HTML 属性提供CSS类名称 。
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion - JavaScript (ES6) code snippets
包含Vs代码编辑器的ES6语法的JavaScript代码片段(同时支持JavaScript和TypeScript)。
https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets - JavaScript Snippet Pack
该扩展为JavaScript和TypeScript编辑器提供了一堆有用的代码段。
https://marketplace.visualstudio.com/items?itemName=akamud.vscode-javascript-snippet-pack - jQuery Code Snippets
只需输入字母“ jq”即可获取所有可用的jQuery代码段的列表。
https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets - JSON to TS
将JSON对象转换为Typescript。
https://marketplace.visualstudio.com/items?itemName=MariusAlchimavicius.json-to-ts - JSON Tools
用于处理JSON的工具。您可以使用此扩展程序漂亮/缩小JSON。
https://marketplace.visualstudio.com/items?itemName=eriklynd.json-tools - Live Server
启动具有实时重新加载功能的本地开发服务器,以处理静态和动态页面。
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer - Markdown Preview Enhanced
Markdown预览增强
https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced - Markdown Table Formatter
一个简单的markdown插件格式化表格。
https://marketplace.visualstudio.com/items?itemName=fcrespo82.markdown-table-formatter - npm
该扩展支持运行文件中定义的npm脚本,package.json
并支持根据中定义的依赖项验证已安装的模块package.json
。
https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script - npm Intellisense
可自动完成导入语句中的npm模块。
https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense - open in browser
使用Alt + B
快捷方式在默认浏览器中打开当前_html_文件,或Shift + Alt + B
选择一个浏览器。您也可以像图片一样右键单击
https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser - Paste JSON as Code
从JSON,JSON Schema和TypeScript交互式生成类型和(反)序列化代码 。
https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype - Path Intellisense
路径智能感知
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense - Polacode
Polacode —您的代码的拍立得
https://marketplace.visualstudio.com/items?itemName=pnp.polacode - Prettify JSON
在VSCode中美化JSON
https://marketplace.visualstudio.com/items?itemName=mohsen1.prettify-json - SQLTools - Database tools
数据库管理做对了。连接浏览器,查询运行器,智能感知,书签,查询历史记录。感觉像数据库英雄!
https://marketplace.visualstudio.com/items?itemName=mtxr.sqltools - SVG Viewer
用于Visual Studio代码的SVG查看器 Visual Studio Marketplace
https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer - Trailing Spaces
突出显示尾随空格,并立即删除它们!
https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces - Vetur
VS Code的Vue工具 。
https://marketplace.visualstudio.com/items?itemName=octref.vetur - vscode-fileheader
在文件标题中添加注释,并支持自动更新文件的修改时间。
https://marketplace.visualstudio.com/items?itemName=mikey.vscode-fileheader - Vue VSCode Snippets
Vue VSCode片段
https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets - XML Tools
用于Visual Studio代码的XML工具。
https://marketplace.visualstudio.com/items?itemName=DotJoshJohnson.xml - Zip File Explorer
在树浏览器中显示Zip文件的内容 。
https://marketplace.visualstudio.com/items?itemName=slevesque.vscode-zipexplorer
先推荐这么多,再次提醒:请按需添加。