Visual Studio Code 常用插件

451 阅读2分钟

一、css html js浏览器相关插件

1.自动闭合HTML标签

Auto Close Tag

2.修改HTML标签时,自动修改匹配的标签

Auto Rename Tag

3.中文化

Chinese language

4.格式化css/sass/scss/less css 格式化

Beautify

5.格式化JSON

Prettify JSON

6.代码注释高亮

Better Comments 配置:点我

7.vscode 的文件小图标

vscode-icons

8.运行html 文件

open in browser

9.函数参数提示

liamhammett.inline-parameters

10.es6代码片段

JavaScript (ES6) code snippets

11.js代码片段

JavaScript Snippet Pack

12.jQuery代码片段

jQuery Code Snippets

13.输出提示的文字颜色有一些变化,方便获取关键信息

Output Colorizer

14.生成假数据,地址,电话,图片等等

vscode-faker 打开方式shift+cmd+p(shift+ctrl+p)) 然后输入faker 就可以选择了

15.智能提示 css 的 class 名

IntelliSense for CSS class names

16.可以在选中HTML标签中外面套一层标签

htmltagwrap 使用:选择一大段代码,然后按“Alt + W”

17.HTML 代码片段

HTML Snippets (必备)

18.在 html 标签上写class 智能提示当前项目所支持的样式(必备)

HTML CSS Support

19.EsLint可以帮助我们检查Javascript编程时的语法错误。比如:在Javascript应用中,你很难找到你漏泄的变量或者方法。EsLint能够帮助我们分析JS代码,找到bug并确保一定程度的JS语法书写的正确性。

ESLint 配置:点我

20.添加注释块

Document This

设置
	 "docthis.includeAuthorTag": true,//出现@Author
 	 "docthis.includeDescriptionTag": true,//出现@Description
 	 "docthis.authorName": "shenzekun",//作者名字

快捷键: 按两次Ctrl+alt+d

21.智能提示HTML class =“”属性(必备)

Class autocomplete for HTML

二、vue 相关插件

1.vue 语法高亮

vetur

2.vue 代码片段

VueHelper

3.vue的 typescript 代码片段

Vue TypeScript Snippets

4.vue2 代码片段

Vue 2 Snippets

三、React 相关插件

1.react代码片段,下载人数超多😉

React-Native/React/Redux snippets for es6/es7

2.格式化 javascript, JSX, typescript, TSX 文件

react-beautify

git 相关插件

1.在状态栏显示当前行的GIT 信息

git blame

2.查看git log

git history

3.显示文件最近的commit 作者和信息

GitLens

四、主题

主题一

1.Dracula Official

主题二

2.One Dark Pro

主题三

3.One Monokai Theme

五、微信小程序插件

1.微信小程序代码补全

wechat-snippet1