• 技术文章 >开发工具 >VSCode

    【整理总结】VSCode常用插件和好用配置(小白必看)

    青灯夜游青灯夜游2023-01-18 21:11:02转载201

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

    一、VSCode常用插件推荐

    工欲善其事,必先利其器。本文介绍一些前端入门级插件,这些插件作者都有用到过,也对比过一些同类插件,还有插件是否维护积极等综合去推荐。

    注意:这些插件主要以前端这块来讲,并且不涉及像vue,react等框架的一些插件,同时也不会讲c++,python等。

    插件清单

    【推荐学习:vscode教程编程教学

    01- 实用扩展推荐

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

    1.png

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

    2.Auto Rename Tag

    2.png

    3.gif

    3.open in browser

    4.png

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

    5.gif

    4.Prettier - Code formatter

    6.png

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

    7.png

    这是一些常用的配置,记住放在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

    8.png

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

    9.gif

    6.Path Intellisense

    10.png

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

    11.gif

    7.Image preview

    12.png

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

    13.gif

    "gutterpreview.showImagePreviewOnGutter": false,// 关闭在行号中显示缩列图

    8.Code Spell Checker

    14.png

    15.gif

    9.Better Comments

    16.png

    17.png

    10.Easy LESS

    实时编译lesscss

    18.png

    11.Sass

    sass/scss文件必装的插件

    19.png

    12.Live Sass Compiler

    实时编译sass/scsscss

    20.png

    13.jQuery Code Snippets

    jquery代码提示

    21.png

    14.JavaScript (ES6) code snippets

    es6等代码块,语法提示

    22.png

    02-外观美化插件推荐

    1.主题插件

    2.文件图标

    二、VSCode常用快捷键

    VSCode 内置很多快捷键,可以大大的提高我们的开发效率。注意:这个快捷键都是可以自定义的,这里我们主要说说一些好用的默认快捷键。

    这里推荐黑马前端pink老师 vscode快捷键-以及使用技巧 https://www.bilibili.com/read/cv9699783

    三、VSCode一些好用的配置

    01-彩虹括号

    以前我们实现彩虹括号可能会用上一个插件叫Bracket Pair Colorizer 2,但是会产生性能问题,着色慢。vscode在2021 年 8 月(1.60 版)开始内置了这个功能,随之到来的还有垂直连线,亲测,现在已经非常好用了,效果出色,并且所有颜色都是可主题化的,最多可以配置六种颜色。

    28.png

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

    29.png

    30.png

    这是我认为比较好的配置,详细的配置可以参考vscode官方文档:

    https://code.visualstudio.com/updates/v1_60#_high-performance-bracket-pair-colorization

     "editor.bracketPairColorization.enabled": true,
     "editor.guides.bracketPairs": "active",

    02-javaScript参数名称提示

    vscode在2021 年 8 月(1.60 版)中加入**JavaScript/TypeScript 嵌入提示**- 参数名称和类型的内联提示等,此设置不会自动打开,也就是说也是需要我们手动去配置的。总所周知,javaScript是弱类型语言,这些提示可以简单的帮助我们做一些错误检查,同时也让代码更直观、好看。

    31.png

    这是我的一些配置,详细的配置说明可以参考vscode官方文档:

    https://code.visualstudio.com/updates/v1_60#_inlay-hints-for-javascript-and-typescript

      "javascript.inlayHints.parameterNames.enabled": "all",
      "javascript.inlayHints.variableTypes.enabled": false,

    至此,本文结束。创作不易,本人第一次写博客,如果本篇文章对你有所帮助,希望可以点个赞,给个关注。

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

    以上就是【整理总结】VSCode常用插件和好用配置(小白必看)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:VSCode
    上一篇:vscode安装包下载太慢怎么解决?两种方法详解 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 浅析vscode环境中导入python库的三种方法• vscode写vue没有高亮语法怎么办• 怎么配置同步?VSCode官方的配置同步方案分享• 手把手教你使用vscode连接远程服务器• 【整理分享】20个实用又好看VSCode主题 ,值得收藏!
    1/1

    PHP中文网