搞开发一直用的VS code,用新电脑的时候,每次都得把一些乱七八糟的插件重新安装一遍,一直也没做个总结,每次安装都搜索很久,总有一些插件会忘记。为了以后换新电脑的时候,安装插件方便点,做一个总结:

首先是vue相关的插件

vscode的px2rem插件怎么转 vscode rem插件_vscode的px2rem插件怎么转


使用vue进行开发的话,这几个插件是必须安装的,自动提示啥的都包括在内了。

React相关

vscode的px2rem插件怎么转 vscode rem插件_vscode_02


这三个插件提供完整的React体系的代码补全和自动提示

代码相关

vscode的px2rem插件怎么转 vscode rem插件_vue.js_03


vscode的px2rem插件怎么转 vscode rem插件_自动提示_04

Eslint,懂得都懂,检查代码,可以帮你改错,提示错误啥的。而prettier是代码风格,比如,使用单引号,不用分号等等,添加这个插件可以让代码更好看,规范。这两个插件一般是两个配合使用的。

vscode的px2rem插件怎么转 vscode rem插件_自动提示_05


这个插件是自动提示CSS和HTML的。就比如你输入in,就会自动提示你input。还是比较好用的,也算是必备插件。

vscode的px2rem插件怎么转 vscode rem插件_vscode_06


如果要用rem的话,这个插件强力推荐,当你输入px的时候,这个插件可以自动把px转换为rem

vscode的px2rem插件怎么转 vscode rem插件_前端_07


HTMLid和class属性补全。支持链接和嵌入的样式表等

vscode的px2rem插件怎么转 vscode rem插件_vscode的px2rem插件怎么转_08


ES6输入代码片段自动生成整片代码。

vscode的px2rem插件怎么转 vscode rem插件_前端_09


html,一对标签,修改前一个,后一个自动同步进行修改。

vscode的px2rem插件怎么转 vscode rem插件_自动提示_10


输入html标签的时候不用输入尖括号

vscode的px2rem插件怎么转 vscode rem插件_vue.js_11


自动关闭标签

vscode的px2rem插件怎么转 vscode rem插件_前端_12


根据工作区或者link自动找到定义的选择器并提示你

vscode的px2rem插件怎么转 vscode rem插件_vscode_13


可以点进去选择器看具体的CSS代码

vscode的px2rem插件怎么转 vscode rem插件_vscode_14


帮助您更好地理解代码。快速了解更改行或代码块的人员、原因和时间。回顾历史,以进一步了解代码如何以及为何演变。轻松探索代码库的历史和演变。

vscode的px2rem插件怎么转 vscode rem插件_自动提示_15


路径的自动提示

vscode的px2rem插件怎么转 vscode rem插件_前端_16


这三个插件,第一个是谷歌调试用的,第二个安装之后可以汉化VS code,第三个的话,可选,如果要使用less的话,需要安装。

个人推荐

vscode的px2rem插件怎么转 vscode rem插件_vue.js_17


首先是,markdown,我个人比较喜欢在开发的时候把一些重要的事,或者知识点啥的,记录下来。安装这个插件就可以编写.md的文件,我用这个来记笔记。边开发边记笔记,还是不错的。

vscode的px2rem插件怎么转 vscode rem插件_vscode_18


这个是配合Markdown使用的,可以做到即时渲染,并且提供很多快捷方式,就像Typora那样。

vscode的px2rem插件怎么转 vscode rem插件_vscode_19


这个插件可以让我们粘贴图片,比如写Markdown的时候,粘贴图片粘贴不上,安装这个插件后就可以了

vscode的px2rem插件怎么转 vscode rem插件_vue.js_20


很强大的组件,智能提示,将你最可能用到的项放在提示列表的最上面

vscode的px2rem插件怎么转 vscode rem插件_前端_21


这个插件可以帮助你在VS code中写博客,写好的博客文章可以直接同步到博客园。但是个人认为不是很好用,经常写博客的同学可以考虑使用

vscode的px2rem插件怎么转 vscode rem插件_vue.js_22


我们平时写大括号的时候,通常在中括号开头和结尾的地方分别加一个空格,安装这个插件后,打上一对大括号后按一下空格就自动在开头和结尾添加一个空格,很实用。

vscode的px2rem插件怎么转 vscode rem插件_vue.js_23


这个插件是帮助你对整片代码进行缩进,选中一片代码然后按空格,就不是删除代码,而是向右移动一个空格的位置,按住shiftz再按空格是向左移动一个空格的位置

vscode的px2rem插件怎么转 vscode rem插件_vscode的px2rem插件怎么转_24


这个插件可以帮助你截图你的代码,选中代码然后右键,就能看到对应的选项点击就可对代码进行很好看的截图,比较好玩

vscode的px2rem插件怎么转 vscode rem插件_vscode的px2rem插件怎么转_25


这个插件是ESLint规则辅助提示插件,帮助更便捷的查询引用的规则,理解规则

vscode的px2rem插件怎么转 vscode rem插件_vscode的px2rem插件怎么转_26


这个插件是和字体相关的。开发中肯定会引入外部的一些字体。不安装这个插件的话,ttf文件在VS code里是打不开的,会显示二进制文件无法打开啥的。。。安装了这个插件就可以在vscode里看字体的样

vscode的px2rem插件怎么转 vscode rem插件_vscode的px2rem插件怎么转_27


这个插件是保存代码后自动更新页面,方便开发不用手动刷新页面