Visual Studio Code的安装与配置

所需软件

• VSCodeSetup-x64-1.19.1.exe

安装Visual Studio Code及扩展

1.需安装的插件

   Auto Close Tag
   Auto Rename Tag
   Beautify
   ESLint
   JavaScript (ES6) code snippets
   Vetur
   Vetur-wepy
   node Workspace Builder(配置如下)
   
   

2.需卸载的插件

   TSLink Vue
   svn

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

配置Visual Studio Code的代码格式化

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

{
  "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": 200
  },
  "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代码的属性保持在行内，除非达到最大行宽，否则不折行
    }
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue"
  ],
  "explorer.confirmDelete": false,
  "node-workspace-builder.buildModulesWithoutInstall": true,
  "workbench.colorTheme": "Chinolor",
  "[javascript]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "eslint.autoFixOnSave": true,
  "html.format.wrapLineLength": 200,
  "window.zoomLevel": 1
}

3 关闭用户设置标签页；

打开工作区

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

选择打开方式为Visual Studio Code并设为默认打开方式。

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