VSCode（Visual Studio Code）安装教程

在前端开发中，有一个非常好用的工具，Visual Studio Code，简称VS code。

都不用我安利VS code，大家就会乖乖的去用，无数个大言不惭的攻城狮，都被VS code比德芙还丝滑的强大功能所折服，微软出品唯一的一款免费开源的工具：

微软出品唯一的一款免费开源的工具：

Visual Studio Code - Code Editing. Redefinedhttps://code.visualstudio.com/VS Code特点：

• 开源，免费；
• 自定义配置
• 集成git
• 智能提示强大
• 支持各种文件格式（html/jade/css/less/sass/xml）
• 调试功能强大
• 各种方便的快捷键
• 强大的插件扩展

 对前端这么友好，没理由不用。

Visual Studio Code（VScode ）官网 ：https://code.visualstudio.com/

Visual Studio Code（VScode ）github地址 ：https://github.com/Microsoft/vscode

安装软件

直接根据上面的网址（https://code.visualstudio.com/）进入后，点击下载（Download）即可

 安装插件

        方法一：

                按F1或Ctrl+Shift+p，输入extensions，点击第一个就可以了 。

        方法二：

                ctrl + P 然后输入 >ext install 

        方法三：

                点击图中位置。

插件合集 

插件官网：https://marketplace.visualstudio.com/

每一个插件名都超链接到官网，注意查看。

配置类插件

Beautify

格式化代码工具，美化Javascript，JSON，CSS，Sass，和HTML在Visual Studio代码。

Auto Rename Tag

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

中文（简体）语言包https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans，将界面转换为中文，对英语不好的人， 非常友好。例如我。。。

VSCode-icons

显示Visual Studio代码的图标，目前该插件已被vscode内部支持："文件" -> "首选项" -> "文件图标主 题" 

Bracket Pair Colorizer 

用于着色匹配括号。

 Filesize

在状态栏中显示当前文件大小，点击后还可以看到详细创建、修改时间。

Import Cost

对引入的计算大小。 

Path Intellisense

可自动填充文件名。 

Eclipse Keymap

模拟Eclipse快捷键 

open in browser 

语法类插件 

HTML CSS Support

在 html 标签上写class 智能提示css样式。

HTML Snippets

完整的HTML代码提示，包括HTML5。 

JavaScript (ES6) code snippets

 jQuery Code Snippets

 Vetur

Vue 2 Snippets

Vue VSCode Snippets

vue-format

VScode主题集合 

Night Owl

一个非常适合夜猫子的 VS Code 主题。像是为喜欢深夜编码的人精心设计的。

 

Atom One Dark Theme

一个基于Atom的黑暗主题。 

Dracula Official 官方吸血鬼主题，博主用的就是这款，很漂亮。 

One Dark Pro Atom

标志性的One Dark主题，也是VS Code下载次数最多的主题之一！ 

Bimbo

简约而现代的神奇海洋主题。