VS Code

介绍

Visual Studio Code (简称VS Code /VSC),是微软发布的一款免费的开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux，运行流畅。

二、VS Code安装部署

VS Code下载

  1. 首先进入官网下载安装包 vscode

  1. 选择你的电脑操作系统平台，下载合适的安装包

VS Code安装步骤

  1. 双击下载的安装包，进入安装向导界面；点击下一步

  1. 进入许可协议，点击“我接受协议”选项；点击下一步

  1. 选择目标位置，就是你想把软件安装在哪个目录；选择合适的目录后继续点击下一步

  1. 在开始菜单文件夹下创建快捷方式，继续默认选项，点击下一步

  1. 进入选择其他任务界面，默认已经勾选了必要的任务，这里尽量不要修改默认的，同时你也可以选择将打开方式添加到鼠标右键菜单上（勾选“其他”中的第一选项），继续点击下一步

  1. 直接点击安装；几秒后，即可安装完成

.NET Core 下载安装

  1. 进入官网下载.NET Core(https://www.microsoft.com/net/download/windows)

  1. 安装.NET Core

三、快捷键

  • 了解快捷键，打开VS Code 程序，在 帮助—快捷键参考（K） 菜单中查看快捷键的使用

四、插件安装

  • 打开VS Code 程序，点击最右侧的工具栏中的扩展，然后在扩展搜索框中搜索需要的插件进项安装

五、项目创建

准备 .NET Core项目（此处以MVC项目的创建为例）

  1. 创建一个文件夹 firstcoreweb，vscode 文件->打开文件夹  来打开它
  2. 点击vscode ->查看->集成终端
  3. 输入dotnet new mvc,回车，即可创建一个完整的.net core web 项目

项目运行调试

  1. 在终端命令行 执行 dotnet restore命令（vscode上面也会提示，是否需要restore，点击restore就可以了），这是为了去更新nuget包，将需要的nuget包更新到本地
  2. 在program.cs的main方法打上断点（左边单击，出现红点说明断点已打上）
  3. 按F5，断点已经走进来了

至此 断点调试成功，如果你的项目没有成功，检查下launch.json文件，里面的program 路径需要设置成当前项目所在的bin/debug目录下的对应dll文件路径，更改以后重新尽心上述调试步骤就可以了

Angular项目环境

常用插件

  • Debugger for Chrome: 必需插件！！用来调试的，后边调试环节详细介绍
  • Angular 2,4 and upcoming latest TypeScript HTML Snippets: 支持Angular2.0+的特性及语法
  • Path Intellisense: 自动路径补全
  • npm Intellisense: 支持在代码中导入npm模块（require方法）时的自动补全
  • Auto Close Tag: 输入开始标签后，自动添加结束标签
  • Auto Rename Tag: 修改html标签时，自动帮你完成尾部闭合标签的同步修改
  • HTML Snippets：提供对HTML语言的支持
  • HTML CSS Support：让 html 标签上写class 智能提示当前项目所支持的样式
  • Bracket Pair Colorizer:给括号加上不同的颜色，便于匹配
  • vscode-icons：给各种文件都加上图标
  • TSLint：TS语法检测
  • beautify : 可以格式化JSON|JS|HTML|CSS|SCSS,比内置格式化好用

调试设置

  • 在 Visual Studio Code 中快捷键 Ctrl+Shift+D 打开调试面板。点击右上角 “齿轮” 按钮，打开 launch.json 文件，添加如下配置：
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch localhost with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "trace": true,
            "userDataDir": "${workspaceRoot}/.vscode/chrome"
        }
    ]
}
  • 打开项目中的 tsconfig.json 文件，修改如下配置：
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "../dist/", // 注意这个路径
    "rootDir": ".",
    "baseUrl": "src",
    "sourceMap": true, // 这个必须要启用，重要
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}
  • 开始调试
  • 添加调试断点位置。
  • 终端运行 ng serve ，先启动宿主。
  • 在 VS Code 调试面板，选择刚刚配置的 Launch localhost with sourcemaps，点击启动调试。

请注意，一定要用F5再次刷新一下Chrome才能进入断点