查看“Visual Studio Code的安装与配置”的源代码

== 所需软件 ==
* [ftp://sinoftp@192.168.0.99/java/nodejs/VSCodeSetup-x64-1.19.1.exe VSCodeSetup-x64-1.19.1.exe]

== 安装Visual Studio Code及扩展 ==
    Auto Close Tag
    Auto Rename Tag
    Beautify
    ESLint
    JavaScript (ES6) code snippets
    Vetur
    node Workspace Builder
    [[文件:123.png]]
    


单击左侧的方形扩展图标，打开扩展商店；
在搜索栏中输入：<code>TSLint Vue</code>，安装后点击<code>重新加载</code>按钮；

== 配置Visual Studio Code的代码格式化 ==
1 点击菜单 文件 --> 首选项 --> 设置 --> 编辑器中的大括号；
复制如下内容并替换setting.json 中的设置：


{
    "editor.fontSize": 16,
    "workbench.editor.enablePreview": false,
    "workbench.editor.enablePreviewFromQuickOpen": false,
    "editor.tabSize": 2, // 编辑器缩进设置
    "editor.formatOnSave": true, // 保存时自动格式化
    "editor.formatOnPaste": true, // 粘贴时自动格式化
    // ↓↓beutify插件设置
    "beautify.config": {
      "indent_size": 2, // js自动格式化缩进设置
      "end_with_newline": true, // 文件结束时增加空行
      "brace_style": "collapse,preserve-inline" // 大括号格式化设置
    },
    "vetur.format.defaultFormatter.html": "js-beautify-html", // vetur插件格式化html设置
    "vetur.format.defaultFormatter.js": "vscode-typescript", // vetur插件格式化js设置
    "vetur.format.defaultFormatter.ts": "vscode-typescript", //vetur格式化typescript设置
    // ↓↓vetur默认格式化设置
    "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
        "wrap_attributes": "auto" // 使html代码的属性保持在行内，除非达到最大行宽，否则不折行
      }
    }
}


3 关闭用户设置标签页；

== 打开工作区 ==

找到前端项目根目录下的<code>.code-workspace</code>文件（以项目<code>sino-demo-distributed-view</code>为例，工作区配置文件为：<code>sino-demo-distributed-view.code-workspace</code>），双击打开；

选择打开方式为<code>Visual Studio Code</code>并设为默认打开方式。

<code>VS Code</code>会默认保存最近一次打开的工作区。