Vscode插件

vscode插件

vscode虽然有丰富的插件资源,但是如果安装过多的插件,会导致启动加载变慢,反而影响使用体验

Auto Rename Tag

修改标签，自动帮你完成头部和尾部闭合标签的同步修改

Chinese Language

简体中文汉化插件，安装后重新打开编辑器即可完成汉化

ESLint

自动修复不符合格式的代码，vue中可实现语法纠错

Live Server

开启一个具有实时重新加载功能的小型开发服务器，可以一边编写代码一边保存，即实时刷新预览

open in browser

右键在浏览器中查看网页

Open in Default Browser

右键在其他浏览器中查看网页

Vetur

支持.vue文件的语法高亮，错误检测,，保存后自动对齐代码，也就是格式化代码

vue language features(volar)

需要禁用掉vetur插件

随着 Vue3 正式版发布，Vue 团队官方推荐 Volar 插件来代替 Vetur插件，不仅支持 Vue3 语言高亮、语法检测，还支持 TypeScript 和基于 vue-tsc 的类型检查功能。

这个插件更名为 Vue - Official

vscode-icons

让vscode资源树目录加上图标，有利于我们进行文件格式的判断，这个是vscode自带的图标库

jQuery Code Snippets

jQuery 代码提示，用 jQuery 框架的必须装。

Path Intellisense

自动路径补全，方便我们进行图片、CSS、JavaScript等文件的路径编写。

wechat-snippet

node-snippets

node.js代码提示

scss Formatter

格式化scss代码。就比如对其等等

eggjs

egg框架中的书写提示

Material Theme

集成了多种主题皮肤，搭配 Material Icon Theme 食用更佳

Easy Less

less的插件，可以自动的把less文件转为css，新建一个less文件，保存后就会在同一级目录下出现同名的css文件

配置：在设置里面的setting.json中的less.compile中写入一下代码：

"less.compile": {
    "compress": false, // true => remove surplus whitespace
    "sourceMap": false, // true => generate source maps (.css.map files)
    "out": true, // false => DON'T output .css files (overridable per-file, see below)
    "outExt": ".css"
},

cssrem

用于把px转为rem，用作屏幕适配用的，在书写px时会自动的把px转为rem

Class autocomplete for HTML

智能提示HTML class=“”属性

Code Runner

非常强大的一款插件，能够运行多种语言的代码片段或代码文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等，安装完成后，右上角出现一个小三角，点击就可以运行代码。

Element UI Snippets

vscode中的代码书写 Element UI 代码时的代码提示

JavaScript(ES6)code snippets

ES6语法智能提示，以及快速输入

Markdown All in One

Markdown编辑器，

实时预览：Ctrl + Shift + P 调出主命令框，输入 Markdown，应该会匹配到几项 Markdown相关命令，选择Markdown: Open Preview to the Side，就能调出实时预览框了

Vue VScode snippts

（具体配置方式不知？）

自动生成vue模板内容的插件

Vue VSCode Snippets 插件旨在为开发者提供最简单快速的生成 Vue 代码片段的方法，通过各种快捷键就可以在 .vue文件中快速生成各种代码片段。简直是 Vue3 开发必备神器。

该插件支持：Volar、Vue2 和 Vue3。

typescript Auto Compiler

每次保存 ts 文件，都会在同级目录中生成一个对应的 js 文件

carbon-now-sh

作用：在实际开发中遇到技术问题或者做部分代码片段分享，可以使用该插件将代码生成一张图片
1.在VSCode中，先选中需要生成图片的代码
2.打开命令托盘：Windows：Ctrl + Shift + P，Mac：Cmd + Shift + P；在打开的输入框中输入Carbon，回车
3.在打开的网页中，复制粘贴即可

Code Spell Checker

帮助我们发现代码中拼写错误的单词

Image preview

鼠标悬浮在链接上可及时预览图片

TSLint

ts的书写规范，这个插件是一个系列，同时还提供了TSLint (deprecated)，TSLint Vue，TSLint Vue-TSX

Vue Peek

Vue Peek 插件用来拓展 Vue 代码编辑的体验，可以让我们快速跳转到组件、模块定义的文件。

Vite

ge preview

鼠标悬浮在链接上可及时预览图片

TSLint

ts的书写规范，这个插件是一个系列，同时还提供了TSLint (deprecated)，TSLint Vue，TSLint Vue-TSX

Vue Peek

Vue Peek 插件用来拓展 Vue 代码编辑的体验，可以让我们快速跳转到组件、模块定义的文件。

Vite

Vite 插件可以让我们打开项目后，就能自动启动开发服务器，允许开发者无需离开编辑器即可预览和调试应用。支持一键启动、构建和重启项目。

Vue 2 Snippets

vue代码提示插件

Material Icon Theme

vscode文件图标，相比之下，vscode icon要逊色一些

Diff & Merge

在vacode中实现代码对比的插件，很大程度上提高开发效率。带包报错之后通过肉眼去辨别是很困难的，因此通过vscode的插件去实现这种工作就显得十分重要。

使用方式：直接 Ctrl + shift + p 调出命令窗口。输入并找到Blank diff view 打开即可出现空的对比窗口，将需要对比的两段代码粘贴进去即可。

然后就会打开一个名为Untitled的文件，直接把需要比对的代码粘贴进去即可，只用完之后关闭掉。

Error lens

书写代码时如果有命名重复，书写不正确都会有报错提示