vscode好用的前端插件和快捷键

用到好用的vscode插件，总结一下

一、常用主题

1.Material Theme主题

这个主题可以设置tabs高亮提示，非常友好

2.Community Material Theme主题

这个主题跟上一个主题是类似的功能作用，只是显示的方式是不同的。看个人喜好选择。

3.vscode-icons

VSCode文件夹&文件图标

二、基础插件

1.Code Spell checker：单词拼写检查

这个插件是用来检验你 的代码是否拼写错误，如果错误就会提示波浪线。
非常适合因为单词错误的原因，找不到bug所在的时候

2.Git Blame：git代码

这个是进行多人开发协作的时候，需要用到的git工具，直接在vscode里面提交代码
步骤：1.如果有代码的修改，这个地方就会显示修改的地方和个数

步骤2：然后修改完之后，点击暂存所有修改

步骤3：点击提交，输入提交的信息，（相当于commit的信息）就完成了git的提交。简单方便高效率

3.open in browser：打开在默认浏览器

右击当前页面打开在默认浏览器中。直接快捷键打开alt+b。非常好用

4.easy less：转换为同名.css文件

这个插件帮助你书写样式时，可以使用less写，但是引用的时候，就能引用同步转换的.css文件了。
使用：新建inde.less文件，书写代码，保存之后，自动生成同名的index.css文件。

5.cssrem：转换为rem单位

在这个里设置所需要的基准大小。
比如：你的设计稿是1920px的，使用flexible.js的适配方案的话，屏幕会被划分为10等份，1920/10=192像素，。
如果不想要被划为10等份，如划分为24等份：1920/24=80，那么1rem=80像素的大小。
这里的root font size就要设置为80。

6.indent-rainbow：彩虹缩进

7.Bracket Pair Colorizer 2：

给匹配的括号() 或者 对象{}… 添加对应的颜色用于区分

三、vue常用插件

1.vue-component

功能：输入组件名称自动导入找到的组件，自动导入路径和组件。
选中后自动输入组件名（包含必填属性）、import语句、components属性

2.Vetur:高亮提示

开发 Vue 必备

3.Vue 3 Snippets

基本必备：很多Vue的代码段，很方便开发

4.

四、扩展插件

1.Code Runner：代码执行

一键执行各种语言代码（常用于测试）

2.Debugger for Chrome：调试代码

在VSCode端，调试代码

3.Tabnine：智能提示代码

可以预测你将要写的代码进行提示

4.vscode-styled-components：智能提示样式

在JS文件中写样式时，有智能提示

5.javascript console utils

一键输出要打印的内容，Ctrl+shift+L
选中要打印的内容，按下快捷键就会输出console.log(‘test’,test)

五、vscode好用的快捷键

1.ctrl+p：转到文件

当你找某个文件费时时，按住快捷键，输入文件名，直接就能全局搜索文件了。

2.shift +alt+ i : 在选定的每行末尾插入光标

3.CTRL + TAB：切换选项卡

4.CTRL+L : 选择当前行

5.shift+CTRL+L : 选择所有出现的当前选择

6.