【vscode】常用插件

一、vscode介绍

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。

VSC中文网：http://www.vscode.org/

快捷键：

【Ctrl+P】搜索文件名

二、插件的安装

如下图，直接在扩展中输入想要下载的插件名，进行下载即可。

注：如果想在离线的情况下使用插件，可以把插件包拷贝到同样的位置：

本地vscode插件包地址：【C:\Users\ 你的用户名\.vscode\extensions】

三、几个常用插件

下面几个也是我正在用的：

1、Beautify css/sass/scss/less

        less文件代码格式化

2、minapp

        微信小程序标签、属性的智能补全

3.1、React-Native/React/Redux snippets for es6/es7

        使用react开发js组件时，有许多快捷方式生成代码

例如在组件js文件中，输入cccs，然后回车，就会自动生成带有构造函数的组件的代码：

3.2、ES7+ React/Redux/React-Native snippets

这个与上面插件类似功能（个人感觉比上面的好用）， 输入“rcc”再回车即可出现类组件代码片段；输入“rfc”再回车即可出现函数组件代码片段。

4、View In Browser

安装之后，右键点击html文件，会出现View In Browser选项，然后点击就可以在浏览器中浏览html文件。

5、Git Graph

用于查看git历史，安装之后，点击下图位置，可以看到历史提交记录：

6、GitLens

安装之后，鼠标点击任意代码，每行代码后面都可以看见commit的相关信息。

还可以看到单个文件所有的提交记录：

7、Markdown Shortcuts

用于预览 .md 文件。

安装完毕，重启VSCode，然后打开.md文件。【Ctrl + Shift + V】即可预览。然后双击相应位置即可修改对应内容。

8、Vetur

用于.vue 文件中，语法错误检查、语法高亮、代码自动补全 

输入"<v"，然后回车，vue文件的基本代码框架就出来了：

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>

9、Vue 3 Snippets

用于.vue 文件中，生成vue代码片段、代码自动补全

输入"vueinit"，然后回车，vue文件的基本代码框架就出来了：

<template lang="">
    <div>
        
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang="">
    
</style>

----------------未完待续------------------------