Visual Studio Code的安装与配置

所需软件

• 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

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

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

配置Visual Studio Code的代码格式化

1 点击菜单 文件 --> 首选项 --> 设置 --> 编辑器中的大括号； 复制如下内容并替换setting.json 中的设置：

{
  "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
}

3 关闭用户设置标签页；

创建工作区

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

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

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

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

保存，双击并选择使用Visual Studio Code打开。

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

为工作区配置ESLint

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

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

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

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