Vscode 关于前端开发一些常用的插件，让你的 Vscode 好用到飞起，大大提升你的效率！

引导

  在我们开发的时候，可以先对我们的Vscode 进行一些简单的配置：
  在配置文件中输入代码如下图所示：

  代码如下：

"editor.hover.delay": /*延迟标签介绍信息*/ 5000,
    "workbench.colorCustomizations": {
        // 设置行号的字体颜色
        "editorLineNumber.foreground": "#17a346",
        // 设置光标颜色
        "editorCursor.foreground": "#fff",
        // 点中的当前行的背景色
        "editor.lineHighlightBackground": "#445", 
        // 设置选中的代码片的背景色
        "editor.selectionBackground": "#666", 
    },

  另外，Vscode 提供了一些很强大的插件来配置我们的Vscode！
  如下图所示：在扩展商店中我们可以下载一些需要的插件来提升我们开发的效率！

  下面就来简单分享一些常用的插件：
  

一、中文简体语言包

  首当其冲先介绍的就是把vscode 编辑器的默认使用语言换成中文的中文简体语言包：

Chinese(Simplified) Language Pack for Visual Stidio Code

安装此插件后：

 
 

二、在浏览器中查看

  VScode 本身是没有配置这种功能的，而在我们日常开发中（特别是前端开发）需要常常去浏览器中查看我们的代码的实现是否符合我们预期的效果；

open-in-browser

  使用方法：安装之后，在需要查看的的 html 文件中点击鼠标右键选择以下图片的其中一个选项，当然从图片中我们可以看出是有相应的快捷键的；
  Open In Default Browser 是选择在默认浏览器中进行查看；
  Open In Other Browsers 则是选择在其他浏览器中进行查看。
 
 

三、实时预览

  安装此插件后，在编辑器中修改代码，按Ctrl+S保存，修改之后的效果就会实时同步更新显示在浏览器中，再也不用手动刷新浏览器；

Live Server

  使用方法：

• 打开 html 文件之后，在窗口的右下角有一个 Go Live 的选项，点击之后会直接在默认浏览器中打开该 html 文件；
• 也可以在该 html 文件中点击鼠标右键选择 Open with Live Server 打开该 html 文件，当然从图中可以看到也是有相应的快捷键的；
• 另外还可以 打开 html 文件之后，按 F1 后输入 Live Server 选择 Open with Live Server ,点击之后会直接在默认浏览器中打开该 html 文件；与第一种方法类似，只是换了一个方法实现。
  
   
   

四、缩进凸显

  安装此插件后让代码的缩进一目了然；

indent-rainbow

 
 

五、提示路径

  安装此插件后在引入文件输入路径时会自动提示该路径，大大的提升了我们的开发效率；

Path Intellisense

 
 

六、自动闭合标签

  安装此插件后在输入标签名称时会自动生成闭合标签，极大的提升了我们的开发效率；

Auto Close Tag

 
 

七、闭合标签同步修改

  安装此插件后修改标签的同时能自动检测配对的标签，实现同步修改；

Auto Rename Tag

 
 

八、不同颜色显示配对的括号

  安装此插件后可以自动检测配对的括号并用不用颜色显示；

Bracket Pair Colorizer

效果：

 
 

九、格式化代码

  安装此插件后点击格式化代码，可以是美化代码增加代码的可阅读性；

Beautify

 
 

十、快速生成HTML标签

HTML Snippets

 
 

十一、智能提示class名以及id名

HTML CSS Support

 
 

十二、Js(ES6)语法智能提示快速输入

JavaScript (ES6) code snippets

 
 

十三、Js 语法检测

Eslint

 
 

十四、jquery代码智能提示

jQuery Code Snippets

 
 

十五、Ts 语法检测

Tslint

 
 

十六、React/Redux/react-router 智能提示

React/Redux/react-router Snippets

 
 

十七、Vue 多功能集成

Vetur

 
 

十八、Vscode 文件图标

  安装此插件后可以改变工作台的文件图标；

Vscode-icons

 
 

十九、单词拼写检查

  安装此插件后可以对自己输入的代码单词先进行检查，大大的减少了因为输入错误而导致的bug；

Code Spell Checker

 
 

二十、运行选中的代码

  安装此插件后可以直接运行代码，而不需要搭建该开发语言的运行环境，如下图所示，对很多的语言都有效；

Code Runner

 使用方法：在需要运行的文件中点击鼠标右键点击 code runner 即可；选中代码即只运行选中的代码片，没有选中代码则代表运行整个文件；

 注意事项：

• 如果是要运行 C＃脚本，需要安装scriptcs ；
• 如果是要运行TypeScript，需要安装 ts-node ；
• 如果是要运行Clojure，需要安装 Leiningen和lein-exec 。
   
   

二十一、颜色主题

  关于Vscode 的颜色主题一直都是大家伙们比较关心的，毕竟对于我们开发者而言，长时间面对着Vscode编辑器，选择自己喜欢的颜色主题也能够让自己的心情更愉悦，当然适合自己的颜色主题也能够让自己更快的找到自己代码的bug所在；
  那么，该如何配置自己的 Vscode 的颜色主题呢？
  如下图所示：

  其次，考虑到护眼性，建议大家使用深色主题更适合一些；如下：分享几款比较流行的深色主题给大家；

One Dark Pro

  黑暗职业者


 

Dracula Official

  吸血鬼主题


 

One Monokai Theme

  Monokai 主题


 

Andromeda

  仙女座主题


好的，本次分享就到此结束，如果对您有所帮助，不妨点个赞收藏 ， 感谢阅读！