vscode 插件推荐

2021/1/18 vscode

必备 推荐 了解

# 1. 常用

# Auto Close Tag (必备)

自动闭合 HTML/XML 标签

image-20210908132009122

# Auto Rename Tag (必备)

自动重命名 HTML 或 XML 标签。每当你要修改 HTML 中的一个标签名(开始或结束标签)时,Auto Rename Tag 会帮你自动重命名另一个。

image-20210908142650436

# Beautify (必备)

美化、格式化代码,语法高亮

image-20210908142722578

# Better Comments

不同的注释高亮显示不同的颜色

image-20210908142830119

# Bracket Pair Colorizer

让括号显示不同的颜色,括号高亮,易于区分。

image-20210908142917531

# Browser Preview

VS Code 的浏览器预览

image-20210908143019723

# Chinese (Simplified) Language Pack for Visual Studio Code(必备)

中文(简体)语言包

image-20210908143239460

# Class autocomplete for HTML(必备)

智能提示 HTML class =“属性“,HTML 的类自动完成功能

image-20210908145039146

# Code Runner

万能语言运行环境,可以直接运行多种语言的代码片段和文件。

image-20210908143409909

# Codelf

变量命名神器

# Color HightLight

高亮显示样式颜色

image-20210908144133759

# Color Info

当您将鼠标悬停在 CSS 颜色上时,提供有关 CSS 颜色的快速信息。

image-20210908144156573

# Comment Translate

VSCode 注释翻译

image-20210908144218996

# CSS Peek

快速查看 CSS 义,按住 CTRL 键同时点击样式类的名称或者在类的名称上按 F12 键即可跳转到样式的定义

你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码。

image-20210908144248844

# CSS Tree

从选定的 HTML / JSX 生成 CSS 树

image-20210908144359541

# Debugger for Chrome (必备)

VS Code - Chrome 调试器 。让 vscode 映射 chrome 的 debug 功能,静态页面都可以用 vscode 来打断点调试,需要另外配置

image-20210908144510707

# Easy LESS

将 less 文件编译为 css 文件

image-20210908144537700

# Easy Sass

保存后自动将 sass / scss 文件编译为 css 文件

image-20210908144604475

# EditorConfig for VS Code

在公司工作,一定会遇到多个人参与一个项目的情况,即使的团队中使用多中 IDE 和编辑器,也可以用针对 VS Code 的 EditorConfig 来实现一致性。EditorConfig 包含一个用于定义代码格式的文件和一批编辑器插件,这些插件是让编辑器读取配置文件并以此来格式化代码。

image-20210908160035069

# ESLint (必备)

语法规则和代码风格的检查工具

image-20210908144727537

# ESLint Chinese Rules

ESLint 中文规则提示插件。ESLint 规则辅助提示插件,帮助更便捷的查询引用的规则,理解规则

image-20210908144838417

# GitLens (git 必备)

方便查看 git 日志,git 重度使用者必备

image-20210908144900549

GitLens 只是帮助您更好地理解代码。快速浏览一下,为什么以及何时更改了行或代码块。跳过历史记录,以获得有关代码演变的方式和原因的进一步见解

# Guides

显示代码对齐辅助线

image-20210908145111828

# Highlight Matching Tag

高亮选中标签

image-20210908145140996

# HTML CSS Support (必备)

在 html 标签上写 class 智能提示当前项目所支持的 css 样式类名以及 id

image-20210908145320951

# Image preview

鼠标悬浮在链接或者装订线(gutter)左边可以预览到图片

image-20210908145514707

# Indent rainbow

带颜色的缩进

image-20210908145615853

# IntelliSense for CSS class names in HTML (推荐)

智能提示 CSS 的类名,可以在 html 与 css 中进行智能提示

image-20210908145540738

# JavaScript(ES6) code snippets(必备)

ES6 语法智能提示以及快速输入,除 js 外还持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含 js 代码文件的时间

image-20210908145643221

# jQuery Code Snippets(推荐)

jQuery 代码智能提示,超过 130 个用于 JavaScript 代码的 jQuery 代码片段。只需键入字母'jq'即可获得所有可用 jQuery 代码片段的列表

image-20210908145702372

# koroFileHeader (推荐)

用于生成文件头部注释和函数注释的插件。ctrl+alt+i文件头部添加注释,ctrl+alt+t 光标处添加函数注释

image-20210908145724335

# Live Server

实时服务器预览,启动一个具有实时重新加载功能的本地服务器

image-20210908145822904

# Live Share

实时协作共享

image-20210909223615433

# Npm Intellisense (必备)

导入 import 语句时自动补全 npm 模块明名称,require 时的包提示。对 package.json 内中的依赖包的名称提示

image-20210908150006266

当你在 Javascript 中编写导入语句时,NPM Intellisense 都会自动完成你需要的 npm 模块名称。

# Open in Browser (必备)

在浏览器中打开

image-20210908150032373

# Path Intellisense (必备)

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

image-20210908150106427

# Polacode(必备)

源代码语法高亮截图,Polacode => Ctrl+shift+p => 输入 polacode =>选择代码,调样式 =>点圆保存图

image-20210908150130472

# Prettier(必备)

目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件,它就能够自动应用 Prettier,并将整个 JS 和 CSS 文档快速格式化为统一的代码样式

image-20210908150200520

# px to rem & rpx (cssrem) (必备)

px 转换 rem 做适配

image-20210908150230425

# Rainbow Brackets

彩虹颜色括号,括号高亮

image-20210908150251782

# Remote Development

远程开发

image-20210908150427511

包括三个扩展包:

  • Remote - SSH:通过使用 SSH 打开远程机器/VM 上的文件夹,在任何位置处理源代码。
  • Remote - Containers:通过打开安装在容器中或容器内的任何文件夹,使用单独的工具链或基于容器的应用程序。
  • Remote - WSL:通过打开适用于 Linux 的 Windows 子系统中的任何文件夹,从舒适的 Windows 中获得基于 Linux 的开发体验。

# Sass

缩进的 Sass 语法高亮显示,VsCode 自动完成和格式化程序

image-20210908152817287

# Settings Sync

使用 GitHub Gist 同步多台计算机上的设置,代码段,主题,文件图标,启动,键绑定,工作区和扩展。

image-20210908152854194

# Todo Tree

帮你组织和管理 TODO 注释,并在资源管理器窗格的树视图中显示它们。

image-20210908153042608

# TabNine(必备)

为项目提供功能强大的 AI 代码自动完成功能,适用于所有编程语言

image-20210908150323767

# vscode-faker

在 Visual Studio Code 中生成虚假数据。假数据基于Faker (opens new window)

image-20210908153621529

用法:

  1. 输入 cmd+shift+p
  2. 选择虚假数据类别
  3. 选择子类别

# 2. 开发 Vue 的插件

# Vetur(vue 必备)

Vue 多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode 官方钦定 Vue 插件,Vue 开发者必备,快速开发 vue。

image-20210908153241806

# Vue

Vue.js 的语法高亮。不适用于嵌入<script>标签。

image-20210908153950723

# Vue 2 Snippet

Vue (v2.x) + Vue Router (v3.x) + VueX (v3.x) 代码片断

image-20210908154141250

# Vue 3 Snippets

基于最新的 Vue 2 及 Vue 3 的 API 添加了 Code Snippets。包括 Vue.js 2 和 Vue.js 3 的所有 API。

image-20210908154849825

# Vue Snippets(vue-ls)

本代码片段搜集了常用的 vue 代码片段

image-20210908154332375

# Element-UI-Snippets

支持 ElementUI 代码自动补全

image-20210908144656799

# vscode element helper

集成了 ElementUI 文档浏览、代码片段、自动补全的插件

image-20210908153356340

# 3. 开发 微信小程序 的插件

# wechat-snippet

微信小程序代码辅助,代码片段自动完成

image-20210908155004219

# wxapp-helper

选择创建 wx 组件,自动生成配套的文件,简直不要太爽

image-20210908155021709

# WXML - Language Services(原名 minapp)

微信小程序.wxml 文件代码高亮,标签、属性的智能补全(同时支持原生小程序、mpvue 和 wepy 框架,并提供 code snippets)

image-20210908155344855

# 4. 开发 React 的插件

# ES7 React/Redux/GraphQL/ReactNative snippets(react 必备)

提供 ES7 中的 JavaScript 和 React / Redux 片段,以及针对 VS Code 的 Babel 插件功能

image-20210909224407148

# React/Redux/react-router Snippets

语法智能提示

image-20210909224506757

# ReactNative/React/Redux snippets for es6/es7

react 代码片段

image-20210909224554831

# React NativeTools

为 React Native 项目提供了一个开发环境。使用此扩展,您可以调试代码并reactnative从命令面板快速运行命令

image-20210909224620413

# vscode-styled-components

styled-components 的语法提示高亮

image-20210908153907654

使用:

# 5. vsCode 主题

# Andromeda

仙女座主题

# Atom One Dark Theme

一个基于 Atom 的黑暗主题

# Blueberry Banana

# Cyberpunk

赛博朋克主题

# Dainty

# Dracula Official

官方吸血鬼主题

# Material Theme

包含 Community Material Theme 和 Material Theme Icons

# Monokai pro

暗色主题

# Nebula Theme

星云主题,主题女生会更喜欢

# Night Owl

一个非常适合夜猫子的 VS Code 主题。像是为喜欢深夜编码的人精心设计的。

# Panda Theme

熊猫主题

# Slack Theme

# SynthWave '84

# Theme - Seti-Monokai

# Tokyo Night

# 6. vsCode 文件图标

# Helium Icon Theme

基于原始的Material Icon Theme (opens new window)扩展,“Helium Icon Theme”扩展提供了许多基于 Material Design for Visual Studio Code 的图标,包括 Mezzanine 自己的 DSL - Helium!

# Material Icons Theme

扁平化的主题图标库

# Material Theme Icons

# Monokai Pro

# Seedling Icon Theme

# seti-icons

# vscode-icons(必备)

VSCode 官方出品的图标库