vscode 前端开发必备插件说明

3,092 阅读5分钟

 搜了很多关于VS code的前端开发插件;每一篇都有好的插件介绍;但基本都不全,也不完整;就整理了几篇收藏自己备用!

集合目录:

目录

1.Auto Close Tag   自动闭合HTML/XML标签

2.Auto Rename Tag      自动完成另一侧标签的同步修改

3.Beautify  格式化代码,值得注意的是,beautify插件支持自定义格式化代码规则

4.Bracket Pair Colorizer  给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色

5.Debugger for Chrome  映射vscode上的断点到chrome上,方便调试

6.ESLint  js语法纠错,可以自定义配置,不过配置较为复杂,建议使用网上一些广泛使用的eslint配置,日后我也会专门针对eslint配置写一篇文章。

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

8.HTML CSS Support  智能提示CSS类名以及id 

9.HTML Snippets  智能提示HTML标签,以及标签含义

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

11.jQuery Code Snippets  jQuery代码智能提示

12.Markdown Preview Enhanced  实时预览markdown,markdown使用者必备

13.markdownlint  markdown语法纠错

14.Material Icon Theme  个人认为最好的vscode图标主题,支持更换不同色系的图标,值得点出的是,该插件更新极其频繁,基本和vscode更新频率保持一致

15.open in browser  vscode不像IDE一样能够直接在浏览器中打开html,而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari

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

17.React/Redux/react…  React/Redux/react-router语法智能提示

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

19.Quokka.js   实时观看 javascript 的变量的变化

20.Image Preview    鼠标划过图片路径出现预览图片

21.Auto Close Tag   自动添加html闭合标签;自动重命名匹配 改变前后任何一个标签 前后标签自动同步

22.Live server(本地服务器)搭建本地测试服务器(附教程)

23、vscode-faker   生成假数据 手机号 图片路径等(附教程)


有发现好用的,继续更新,欢迎推荐~

1.Auto Close Tag

  自动闭合HTML/XML标签


2.Auto Rename Tag

  自动完成另一侧标签的同步修改

  

3.Beautify

  格式化代码,值得注意的是,beautify插件支持自定义格式化代码规则,例如:

1234567{``  ``"indent_size"``: 4,``  ``"indent_char"``: ``" "``,``  ``"css"``: {``    ``"indent_size"``: 2``  ``}``}

  mac版vscode中beautify的默认格式化代码按键为cmd+b,也可以自定义快捷键

4.Bracket Pair Colorizer

  给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色

5.Debugger for Chrome

  映射vscode上的断点到chrome上,方便调试

6.ESLint

  js语法纠错,可以自定义配置,不过配置较为复杂,建议使用网上一些广泛使用的eslint配置,日后我也会专门针对eslint配置写一篇文章。

7.GitLens

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

8.HTML CSS Support

  智能提示CSS类名以及id 

9.HTML Snippets

  智能提示HTML标签,以及标签含义

10.JavaScript(ES6) code snippets

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

 

11.jQuery Code Snippets

  jQuery代码智能提示

12.Markdown Preview Enhanced

  实时预览markdown,markdown使用者必备

 

13.markdownlint

  markdown语法纠错

 

14.Material Icon Theme

  个人认为最好的vscode图标主题,支持更换不同色系的图标,值得点出的是,该插件更新极其频繁,基本和vscode更新频率保持一致

 

15.open in browser

  vscode不像IDE一样能够直接在浏览器中打开html,而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari

16.Path Intellisense

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

17.React/Redux/react-router Snippets

  React/Redux/react-router语法智能提示

18.Vetur

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

19.Quokka.js

实时观看 javascript 的变量的变化

20.Image Preview

鼠标划过图片路径出现预览图片

21.Auto Close Tag

自动添加html闭合标签;自动重命名匹配 改变前后任何一个标签 前后标签自动同步

22.Live server(本地服务器)

本地服务器右下角出现(Go Live)

进行配置:
01.文件-首选项-设置
02.选中工作区设置 点击进入settings.json

03.进入之后,将右侧箭头处的地方改为左侧工作区文件夹的名字

{
    		"path":"填文件夹路径"
    	}
    	// 填入启用服务器的文件名
    	"liveServer.settings.multiRootWorkspaceName": "liveServer"
}

04.点击右下角Go Live启动本地服务器 (如下图表示启动成功,地址变为http://127.0.0.1:5500)

在这里插入图片描述
05.让别人也访问到你本地服务器的东西
需要在同一个局域网 (同一个路由器网络)
访问http://127.0.0.1:5500/加上自己的路径

23、vscode-faker

生成假数据 手机号 图片路径等

使用教程

01.将鼠标光标移入到字符串内

在这里插入图片描述

02.外置键盘直接按f1 笔记本内置键盘fn+f1 输入faker

03.选择要生成假数据的类型,自动填充到光标处‘

在这里插入图片描述


有发现好用的,继续更新,欢迎推荐~



有需要可加交流群交流(857064044)交流群