前端常用的vscode插件

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

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

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

前端常用的vscode插件_第1张图片

  • 名称列表

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(可与上方同时试用)

前端常用的vscode插件_第2张图片
2.indent-rainbow(制表符彩色显示)前端常用的vscode插件_第3张图片
3.19.Git History(git提交历史记录)
在这里插入图片描述

  • 外观主题类展示

1.One Dark Pro

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

前端常用的vscode插件_第4张图片

2.Flat UI

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

前端常用的vscode插件_第5张图片
前端常用的vscode插件_第6张图片
3.Winter is Coming Theme

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

前端常用的vscode插件_第7张图片
4.Panda Theme

一款黑色主题皮肤

前端常用的vscode插件_第8张图片

  • 文件图标主题

5.Material Icon Theme
前端常用的vscode插件_第9张图片
6.vscode-icons
前端常用的vscode插件_第10张图片

你可能感兴趣的:(前端常用的vscode插件)