订制属于自己的Vscode

  如下图所示：在扩展商店中我们可以下载一些需要的插件来提升我们开发的效率！
在这里插入图片描述

  vscode的setting.json的一些配置请查看另外一篇文章：VS Code 分享常用的插件配置setting.json是怎么配置的。

  

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

中文简体语言包

  首当其冲先介绍的就是把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

在这里插入图片描述

 
 

格式化代码——二

Prettier - Code formatter

  安装此插件后点击格式化代码，可以是美化代码增加代码的可阅读性；这个插件可以对一些文件进行特定的格式化代码的配置。
在这里插入图片描述

 
 

快速生成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 多功能集成——vue2 Vetur

Vetur

  安装此插件后对vue2的语法校验，代码支持等等有很大的帮助。
在这里插入图片描述
 
 

Vue 多功能集成——vue3 Vue Language Features (Volar) — 已弃用，改用Vue - Official扩展

Vue Language Features (Volar) — 已弃用，改用Vue - Official扩展

  安装此插件后对vue3的语法有很大的改变，在编辑器的右上角区域还提供了可以快速拆分编辑器（分成3块：template、script、style）的功能。

  但是此插件有些功能是与Vetur有冲突的，如Vetur 会校验单一根节点的问题，而vue3则允许不是单一根节点的问题了。
 
在这里插入图片描述

在这里插入图片描述
更新内容：

Vue - Official
 
在这里插入图片描述

这里需要说明：
volar 插件已弃用，统一使用Vue - Official插件
 
在这里插入图片描述

另外这里加一个内容分享 vscode 之 工作区的应用（解决vue2插件vetur、vue3插件Vue - Official禁用启用问题）

Vscode 文件图标

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

Vscode-icons

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

  仙女座主题
在这里插入图片描述
在这里插入图片描述
好的，本次分享就到此结束，如果对您有所帮助，不妨点个赞收藏 ， 感谢阅读！

# vscode # 编辑器
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign