前端开发 Vscode常用插件

一、安装位置指引

二、常用代码插件

☆auto close tag

   标签自动和提示。

☆Auto Comment Blocks

  自动插入注释行

☆Auto Rename Tag

  自动重命名配对的HTML / XML标记

☆Beautify

  格式化代码

☆Code Spell Checker

  代码拼写检查工具

☆Debugger for Chrome

  从VS Code调试在Google Chrome中运行的JavaScript代码。

☆ESLint

  代码检查工具

☆ filesize

  实时查看当前文件的大小

☆ Git History

  查看git历史与log，搜索等（包括git log）

☆ GitLens — Git supercharged

  GitLens只是帮助您更好地理解代码。快速浏览一下，为什么以及何时更改了行或代码块。
  跳过历史记录，以获得有关代码演变的方式和原因的进一步见解

☆IntelliSense for CSS class names in HTML

   CSS 类名智能提示，可以在html与css中进行智能提示

☆Image preview

  在左侧可以预览图片和悬停中显示图片

☆JavaScript (ES6) code snippets

  ES6的代码片段

☆JavaScript Snippet Pack

  JS代码片段补全

☆language-stylus

  Stylus文件添加语法高亮

☆stylelint

  美化css代码

☆ Node.js Modules Intellisense

  在import语句中自动完成Node.js模块

☆ Open in Browser

  在vscode中打开浏览器访问

☆ Path Intellisense

  自动路径补全

三、好用代码插件

☆Pug (Jade) snippets

  pug语法提示

☆ Scss

  缩进Sass语法高亮

☆Vetur

  代码格式化

☆vscode-element-helper

 element代码自动补全

☆vscode-icons

  在vscode显示文件图标

☆Codelf

通过搜索GitHub, Bitbucket, GitLab来找到真实的使用变量名，
为你提供一些高频使用的词汇，同时为你标明使用的语言、代码链接。

☆local history

修改代码之后想找回历史代码怎么办？安装这款插件之后在侧边栏会出现LOCAL HISTORY的字样，
每当我们保存更改时，它都会备份一份历史文件，当我们需要恢复之前版本时，
只需要点击一下对应的文件即可。此外，它还会在编辑框显示对比详情，能够让你对修改位置一目了然。

☆TODO Tree

给代码一个标记，后续定位到某块需要修改/完善的代码。
TODO Tree不仅可以实现标签高亮，还可以在活动栏添加一个选项卡，
它能够以不同视图展示我们标记的位置，单击对应标签就能够快速定位到指定位置

☆Bracket Pair Colorizer

Bracket Pair Colorizer这款插件可以给()、[]、{}这些常用括号显示不同颜色，
当点击对应括号时能够用线段直接链接到一起，让层次结构一目了然。除此之外，它还支持用户自定义符号。

☆Better Align

主要用于代码的上下对齐。
它能够用冒号（：）、赋值（=，+=，-=，*=，/=）和箭头（=>）对齐代码。

使用方法：Ctrl+Shift+p输入“Align”确认即可。

☆ change-case

不同语言对变量名、函数名、类名的命名要求不同，有的是驼峰、有的是下划线.
但是，不管是什么要求，都有一个共性--命名很重要。
有些编程语言甚至对命名严格到如果不按规范要求，执行时会直接报错。
而change-case就是一款快速修改当前选定内容或当前单词的命名的插件。

使用方法：Ctrl+Shift+p输入“change”然后选择要修改的格式即可。

四、Markdown相关插件

☆ Markdown All in One

  用于书写Markdown笔记。
  markdown笔记插件
  可使用Alt+Shift+F格式化markdown表格

☆ Markdown Preview Enhanced:

 markdown预览

☆ Markdown Image:

  图床插件， 支持coding

五、其他插件

☆ windows opacity

设置vscode透明背景

☆Html Snippets

实用的H5代码片段及提示

☆Html CSS Support

实用的H5代码片段及提示

☆ Chinese:

使vscode显示为中文

六、vue常用

☆Vetur

语法高亮、智能感知、Emmet等

☆VueHelper

snippet代码片段

☆Import Cost

引入包大小计算，对于项目打包后的体积掌握。

七、一些好看的主题插件

☆

One Dark Pro
Dracula
Material