Visual Studio Code编辑器（简称vscode）及相关常用扩展的安装及配置

Visual Studio Code编辑器安装

1、官网下载

• 点击链接https://code.visualstudio.com/访问vscode官方网站，然后点击下图红框位置进行下载相应版本，下图以Win10 x64为例。

2、安装

• 下载完成后双击上图图标进行安装。一直下一步，直至完成。

3、安装常用扩展

• 安装完成后进行双击打开vscode，然后如下图所示依次点击相关图标，搜索相关扩展并进行安装。

• 推荐必装扩展。

序号	扩展名称（可直接复制粘贴到上图搜索栏位置进行搜索安装）	简要功能
1	Chinese (Simplified) Language Pack for Visual Studio Code	中文语言包
2	live server	神级插件,实时预览html文件
3	prettier-code formatter	代码自动格式化
4	code runner	几乎支持所有主流语言的临时运行测试
5	auto close tag	标签自动关闭
6	auto rename tag	标签自动更名
7	html css support	html,css语法提示增强
8	html snippets	常用html代码片断模板
9	css peek	快速定位/查看id/class的css定义
10	IntelliSense for CSS class names in HTML	class类名自动感应完成
11	javascript(es6) code snippets	常用es6代码片断模板
12	tab out	按tab自动跳过右括号
13	bracket pair colorizer	使用不同颜色标记括号配对
14	markdownlint	markdown语法/格式检查器
15	markdown preview enhanced	markdown预览器增强版
16	One Dark Pro Darker	程序员喜欢的模板样式

4、修改配置文件

• 如何快速修改配置文件？依次点击上方【文件】-【首选项】-【设置】，然后点击【字体】-【在settings.json】或按下图操作也可。

• 复制下方代码到上图后保存即可。

{
    "editor.fontLigatures": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnType": true,
    "javascript.format.placeOpenBraceOnNewLineForFunctions": true,
    "window.zoomLevel": 1,
    "workbench.colorTheme": "One Dark Pro Darker",
    "emmet.syntaxProfiles": {
        "html":{"inline_break":2}
    },
    "emmet.variables": {
        "lang": "zh-CN",
        "charset": "UTF-8"
    },
    "editor.formatOnSave": true,
    "liveServer.settings.donotShowInfoMsg": true,
}