前端常用的vscode插件

个人vscode插件推荐及部分介绍

先总体观看下图我个人的安装插件

具体名称我列出了一个图下所示的列表并在后文中介绍了部分插件的功能和效果展示,有需要的可自行寻找下载

在这里插入图片描述

  • 名称列表

1.小程序开发助手
2.Auto Close Tag(自动添加HTML/XML闭合标记)
3.Auto Rename Tag(修改html标签对称修改)
4.background-cover(修改xscode背景)
5.Bash Beautify(脚本美化,需要python)
6.Beautify(代码格式化,本人更喜欢下方的Prettier规范格式化代码)
7.Beautify css/sass/scss/less(css美化)
8.Bracket Pair Colorizer(对称类括号颜色修改,每层颜色不同,效果看下方)
9.Chinese (Simplified) Language Pack for Visual Studio Code(vscode中文汉化)
10.Color Info(颜色选择提示)
11.CSS Peek
12.Dart(Dart语言支持)
13.Debugger for Chrome(谷歌Debugger)
14.Debugger for Firefox(火狐Debugger)
15.ES7 React/Redux/GraphQL/React-Native snippets(React及相关语法提示)
16.Flat UI(皮肤主题,效果看下放)
17.Flutter(Flutter语言提示)
18.Fullstack React/React Native snippets
19.Git History(git提交历史记录,效果看下方)
20.Git Project Manager
21.GitLens — Git supercharged
22.HTML CSS Support(html css 语法属性提示)
23.HTML Snippets
24.indent-rainbow(制表符颜色,效果看下方)
25.IntelliSense for CSS class names in HTML(css类名查询提示)
26.JavaScript (ES6) code snippets(ES6语法提示)
27.JavaScript and TypeScript Nightly
28.JavaScript standardjs styled snippets
29.Javascript Vue
30.jQuery Code Snippets(jQuery语法提示)
31.JS JSX Snippets(jsx语法)
32.language-stylus(stylus语法提示)
33.Latest TypeScript and Javascript Grammar
34.Live Server(启动服务插件)
35.Manta’s Stylus Supremacy(stylus代码格式化插件 详情需配置)
36.Markdown All in One
37.Material Icon Theme(icon图标主题,效果看下方)
38.minapp
39.npm
40.npm Intellisense
41.One Dark Pro
42.open in browser(右键菜单在浏览器直接打开文件)
43.Panda Theme
44.Path Intellisense(路径寻找语法提示,有时更改路径会自动修改)
45.Prettier - Code formatter(代码规范且可以格式化代码,本人正在使用)
46.Rainbow Brackets
47.React Native Snippet
48.React Native Tools
49.Reactjs code snippets
50.SQL Server (mssql)(sql语句支持)
51.taro-template(taro小程序端模板支持)
52.tarojs
53.TSLint (deprecated)(tslint规范)
54.TypeScript Hero
55.Typescript React code snippets
56.Vetur(vue代码规范,可用于格式化vue代码)
57.Visual Studio IntelliCode
58.vscode weapp api
59.vscode wxml
60.vscode-database
61.vscode-icons(icon主题)
62.vscode-styled-components(styled-components语法提示)
63.vscode-styled-jsx
64.Vue 2 Snippets(vue2语法提示)
65.Vue VSCode Snippets
66.vue
67.Winter is Coming Theme
68.XML Tools(xml工具提示)
69.wxml
70.ESLint(ESLint代码规范检查)

  • 效果展示类插件介绍

1.Bracket Pair Colorizer(对称标记着色,可理解为彩色括号)
Rainbow Brackets(可与上方同时试用)

在这里插入图片描述
2.indent-rainbow(制表符彩色显示)在这里插入图片描述
3.19.Git History(git提交历史记录)
在这里插入图片描述

  • 外观主题类展示

1.One Dark Pro

一款比较受欢迎的黑色主题皮肤,光亮和颜色很柔和不刺眼睛,推荐使用

在这里插入图片描述

2.Flat UI

一套白色与黑色都有的颜色主题

在这里插入图片描述
在这里插入图片描述
3.Winter is Coming Theme

一款冷色调主题,多种颜色可选

在这里插入图片描述
4.Panda Theme

一款黑色主题皮肤

在这里插入图片描述

  • 文件图标主题

5.Material Icon Theme
在这里插入图片描述
6.vscode-icons
在这里插入图片描述

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr.温m_

如果喜欢可以支持打赏小哥!!!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值