首页 > 分享资讯 > 开发工具

VSCode常用插件和好用配置小白必看

时间:2023-11-06 20:27:44人气: 栏目:开发工具
【导读】:四眼客目录在线提供,VSCode常用插件和好用配置小白必看开发工具爱好者免费阅读。本文地址:http://www.ooooke.com/soft/171.html

本篇文章给大家总结分享一些VSCode常用插件和好用配置(超详细),希望可以给刚入坑前端的小伙伴一些帮助。本文很长,如果能认真看完,你一定会有所收获。

一、VSCode常用插件推荐

插件清单

  • Chinese (Simplified) (简体中文)

  • Auto Rename Tag

  • open in browser

  • Prettier - Code formatter

  • Live Server

  • Path Intellisense

  • Image preview

  • Code Spell Checker

  • Better Comments

  • Easy LESS

  • Sass

  • Live Sass Compiler

  • jQuery Code Snippets

  • 14.JavaScript (ES6) code snippets

  • One Dark Pro

  • Material Theme

  • Tokyo Night

  • Material Icon Theme

  • vscode-icons

【推荐学习:vscode教程、www.downzz.com】

01- 实用扩展推荐

1.Chinese (Simplified) (简体中文)

  • 适用于 VS Code 的中文(简体)语言包

VSCode常用插件和好用配置小白必看

不用多说,英语不太好的小伙伴必装的汉化插件,英语好的可以略过。

2.Auto Rename Tag

  • 同步修改 HTML/XML标签

VSCode常用插件和好用配置小白必看

VSCode常用插件和好用配置小白必看

3.open in browser

  • 提供右键菜单选项,一键在浏览器打开html文件。

VSCode常用插件和好用配置小白必看

可以选择在默认浏览器打开或者选择自己想用的浏览器打开

VSCode常用插件和好用配置小白必看

4.Prettier - Code formatter

  • 最流行的前端代码格式化利器

VSCode常用插件和好用配置小白必看

在设置中把在保存时格式化文件勾上,就可以ctrl+s保存后格式化文件,不管写的再乱,代码都能变得整齐划一。我们也可以根据自己的喜好,配置相关的的设置,比如缩进,前端的话像html,css,js等都建议缩进两个单位。

VSCode常用插件和好用配置小白必看

这是一些常用的配置,记住放在settings.json最外的大括号里

{  "printWidth": 130,// 最大换行长度  "tabWidth": 2, // 保存后缩进单位    "[html][css][less][scss][javascript][typescript][json][jsonc]": {    "editor.defaultFormatter": "esbenp.prettier-vscode",//设置prettier为默认格式化程序    "editor.tabSize": 2 // 编辑时缩进单位  },}
登录后复制

5.Live Server

  • 开启一个实时的本地服务器

VSCode常用插件和好用配置小白必看

一个非常好用的插件,每次保存文件后到浏览器都要刷新才能看到最新的变化,有了这个插件,就可以实时监听文件的变化,自动刷新,真滴好用。真的是太感谢开发这个插件的作者了。

VSCode常用插件和好用配置小白必看

6.Path Intellisense

  • 智能路径补全

VSCode常用插件和好用配置小白必看

之前这个插件好久都没人维护,但最近的一段时间,经常可以看到插件的更新,也对比了一些同类插件,这个插件还是很优秀的。

VSCode常用插件和好用配置小白必看

7.Image preview

  • 鼠标悬停可以预览图片

VSCode常用插件和好用配置小白必看

鼠标悬停可以预览图片,显示图片的大小和尺寸。不仅仅在css中,也可以在jsvue等文件中预览哦,可以打开对应的文件夹和项目文件为位置,真的强烈推荐!

VSCode常用插件和好用配置小白必看

"gutterpreview.showImagePreviewOnGutter": false,// 关闭在行号中显示缩列图
登录后复制

8.Code Spell Checker

  • 一个基本的拼写检查器,可以很好地与驼峰大小写代码配合使用。

VSCode常用插件和好用配置小白必看

VSCode常用插件和好用配置小白必看

9.Better Comments

  • 写出更个性化的注释

VSCode常用插件和好用配置小白必看

VSCode常用插件和好用配置小白必看

10.Easy LESS

实时编译lesscss

VSCode常用插件和好用配置小白必看

11.Sass

sass/scss文件必装的插件

VSCode常用插件和好用配置小白必看

12.Live Sass Compiler

实时编译sass/scsscss

VSCode常用插件和好用配置小白必看

13.jQuery Code Snippets

jquery代码提示

VSCode常用插件和好用配置小白必看

14.JavaScript (ES6) code snippets

es6等代码块,语法提示

VSCode常用插件和好用配置小白必看

02-外观美化插件推荐

1.主题插件

  • One Dark Pro 最受欢迎的暗黑主题

    VSCode常用插件和好用配置小白必看

  • Material Theme 拥有非常多的主题,都很不错,也是有名的主题插件

    VSCode常用插件和好用配置小白必看

  • Tokyo Night 本人在用的一款主题,特别喜欢,不刺眼,色彩设计的很合理

    VSCode常用插件和好用配置小白必看

  • ......

2.文件图标

  • Material Icon Theme 拥有超多的文件图标,色彩饱和度高。

    VSCode常用插件和好用配置小白必看

  • vscode-icons 也是非常不错的文件图标,下载量很高

    VSCode常用插件和好用配置小白必看

二、VSCode常用快捷键

三、VSCode一些好用的配置

01-彩虹括号

VSCode常用插件和好用配置小白必看

在如下打开settings.json,记住放在最外层的大括号里。

VSCode常用插件和好用配置小白必看

VSCode常用插件和好用配置小白必看

 "editor.bracketPairColorization.enabled": true, "editor.guides.bracketPairs": "active",
登录后复制

02-javaScript参数名称提示

VSCode常用插件和好用配置小白必看

  "javascript.inlayHints.parameterNames.enabled": "all",  "javascript.inlayHints.variableTypes.enabled": false,
登录后复制

更多关于VSCode的相关知识,请访问:vscode教程!!

标签:

版权声明:

1、本文系转载,版权归原作者所有,旨在传递信息,不代表看本站的观点和立场。

2、本站仅提供信息发布平台,不承担相关法律责任。

3、若侵犯您的版权或隐私,请联系本站管理员删除。

4、文章来源:本文由会员转载自互联网,如果您是文章原创作者,请联系本站注明您的版权信息。

网站公告 关于我们 版权申明 网站地图
Copyright © ooooke.com 浙ICP备15022117-2号