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

== 所需软件 ==
* [https://code.visualstudio.com/#alt-downloads VSCodeUserSetup-x64-1.36.1.exe]

== 安装Visual Studio Code及扩展 ==
1.需安装的插件
    Auto Close Tag
    Auto Rename Tag
    Beautify
    ESLint
    JavaScript (ES6) code snippets
    Vetur
    Node Workspace Builder
2.需卸载的插件
    TSLink Vue
    svn
3.建议安装的主题扩展
    Chinolor
单击左侧的方形扩展图标，打开扩展商店；
在搜索栏中输入：<code>TSLint Vue</code>，卸载后点击<code>重新加载</code>按钮；

如果未发现要卸载的插件，可跳过此步骤！

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

<pre>
{
  "editor.fontSize": 16,
  "editor.tabSize": 2, // 编辑器缩进设置
  "editor.formatOnSave": true, // 保存时自动格式化
  "editor.formatOnPaste": true, // 粘贴时自动格式化
  "javascript.preferences.quoteStyle": "single", // js格式化为单引号
  "typescript.preferences.quoteStyle": "single", // ts格式化为单引号
  // ↓↓beutify插件设置
  "beautify.config": {
    "indent_size": 2, // js自动格式化缩进设置
    "end_with_newline": true, // 文件结束时增加空行
    "brace_style": "collapse,preserve-inline", // 大括号格式化设置
    "wrap_line_length": 120
  },
  "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代码的属性保持在行内，除非达到最大行宽，否则不折行
      "wrap_line_length": 120    // 最大行宽
    }
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue"
  ],
  "explorer.confirmDelete": false,
  "node-workspace-builder.buildModulesWithoutInstall": true,
  "[javascript]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "html.format.wrapLineLength": 120,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "editor.wordWrapColumn": 120,
  "workbench.editor.enablePreview": false
}

</pre>


3 关闭用户设置标签页；

== 创建工作区 ==

打开<code>VS Code</code>，从菜单栏中选择<code>文件 -> 打开文件夹</code>并打开你的源代码文件夹，然后选择<code>文件 -> 将工作区另存为</code>，然后保存你的工作区。VS Code会在保存成功后自动从文件夹切换到你的工作区。

或者你可以按照如下步骤直接创建<code>VS Code</code>工作区文件：

新建文件<code>工作区名称.code-workspace</code>，并输入如下内容：
<pre>

{
  "folders": [{
      "path": "你的源码目录/leon-frame-first-front"
    }],
  "settings": {}
}

</pre>
保存，双击并选择使用<code>Visual Studio Code</code>打开。

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

== 为工作区配置ESLint ==

从菜单栏中选择<code>文件 -> 首选项 -> 设置</code>，切换到<code>工作区</code>标签页（位于搜索栏的下方），然后点击右上角的<code>{}</code>按钮，进入JSON文件编辑模式。

或者你可以选择直接使用文本编辑器编辑你创建的工作区文件。

在<code>settings</code>节中增加如下内容（此预览包含完整的<code>code-workspace</code>文件内容）：

<pre>

{
  "folders": [{
      "path": "你的源码目录/leon-frame-first-front"
    }],
  "settings": {
    "eslint.nodePath": "你的源码目录/leon-frame-first-front/leon-frame-webapp/node_modules"
  }
}

</pre>