Visual Studio Code的安装与配置

Leon（讨论 | 贡献）2019年4月15日 (一) 11:52的版本

所需软件

安装Visual Studio Code及扩展

   Auto Close Tag
   Auto Rename Tag
   Beautify
   ESLint
   JavaScript (ES6) code snippets
   SVN
   Vetur
   Prettier


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


配置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-workspace文件（以项目sino-demo-distributed-view为例，工作区配置文件为：sino-demo-distributed-view.code-workspace），双击打开；

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

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

取自“https://gracesleon.com/index.php?title=Visual_Studio_Code的安装与配置&oldid=62”