Visual Studio Code and ASP.NET File Generator

Visual Studio (bukan Visual Studio Code) memiliki banyak kemudahan yang dapat digunakan oleh software developer dalam menulis kode program.  Kemudahan yang paling sering digunakan adalah template file, yang dapat digunakan untuk membuat file class, file konfigurasi dan file antarmuka seperti pada gambar di bawah ini.

01

Misal untuk membuat class Startup maka cukup memilih template yang sudah disediakan. Begitu juga jika ingin membuat file konfigurasi dan file komponen view.  Kemudahan ini membuat software developer dapat dengan cepat membuat file yang dibutuhkan dengan cepat.

Lalu bagaimana dengan Visual Studio Code?  Secara default, Visual Studio Code tidak memiliki fitur seperti itu.  Tetapi fitur tersebut dapat tersedia pada Visual Studio Code jika menambahkan extension.  Sebagai contoh, untuk mengembangkan aplikasi web dengan ASP.NET Core framework, maka dapat digunakan extension Yeoman & Generator ASP.NET.  Pada posting sebelumnya di sini http://www.rezafaisal.net/?p=3113, telah dibahas bagaimana menyiapkan project ASP.NET Core dengan generator tersebut.  Tetapi pada posting tersebut belum dijelaskan fitur lain dari extesion ini yang dapat digunakan untuk membuat file class, file komponen view seperti yang dimiliki oleh Visual Studio Code.

Fitur generator file dari Yeoman ini dapat dilakukan dengan menggunakan penulisan perintah pada Integrated Terminal pada Visual Studio Code.  Jadi langkah yang harus dilakukan adalah mengaktifkan Terminal dengan memilih menu View > Integrated Terminal.  Untuk mengetahui perintah-perintah dan file apa saja yang dapat dibuat oleh generator ini maka dapat diketikan perintah berikut pada terminal.

yo aspnet --help

 

Maka akan dapat dilihat output seperti berikut ini.

Usage:
  yo aspnet:app [options] [<type>] [<applicationName>] [<ui>]

Options:
-h, –help # Print the generator’s options and usage
–skip-cache # Do not remember prompt answers Default: false

Arguments:
type # the project type to create Type: String Required: false
applicationName # the name of the application Type: String Required: false
ui # the ui library to use (bootstrap OR semantic) Type: String Required: false

Description:

Creates a basic ASP.NET Core application
Subgenerators:

yo aspnet:angularcontroller [options] <name>
yo aspnet:angularcontrolleras [options] <name>
yo aspnet:angulardirective [options] <name>
yo aspnet:angularfactory [options] <name>
yo aspnet:angularmodule [options] <name>
yo aspnet:appsettings [options]
yo aspnet:bowerjson [options]
yo aspnet:class [options] <name>
yo aspnet:coffeescript [options] <name>
yo aspnet:dockerfile [options]
yo aspnet:gitignore [options]
yo aspnet:gruntfile [options]
yo aspnet:gulpfile [options] <name>
yo aspnet:htmlpage [options] <name>
yo aspnet:interface [options] <name>
yo aspnet:javascript [options] <name>
yo aspnet:json [options] <name>
yo aspnet:jsonschema [options] <name>
yo aspnet:middleware [options] <name>
yo aspnet:mvccontroller [options] <name>
yo aspnet:mvcview [options] <name>
yo aspnet:nuget [options]
yo aspnet:packagejson [options]
yo aspnet:program [options]
yo aspnet:startup [options]
yo aspnet:stylesheet [options] <name>
yo aspnet:stylesheetless [options] <name>
yo aspnet:stylesheetscss [options] <name>
yo aspnet:taghelper [options] <name>
yo aspnet:textfile [options] <name>
yo aspnet:tfignore [options]
yo aspnet:typescript [options] <name>
yo aspnet:typescriptconfig [options] <name>
yo aspnet:typescriptjsx [options] <name>
yo aspnet:usersecrets [options] <name>
yo aspnet:webapicontroller [options] <name>

 

Sedangkan jika ingin mendapatkan informasi bantuan tentang spesifik suatu perintah pembuatan file template (misal untuk membuat file mvcview) dapat digunakan perintah berikut ini.

yo aspnet:mvcview --help

 

Dan berikut adalah output dari perintah di atas.

Usage:
  yo aspnet:mvcview [options] <name>

Options:
-h, –help # Print the generator’s options and usage
–skip-cache # Do not remember prompt answers Default: false

Arguments:
name Type: String Required: true

 

Untuk mengembangkan aplikasi web dengan ASP.NET Core ada beberapa file yang sering dibuat adalah:

  • File appsettings.json untuk menyimpan file konfigurasi.
  • File class.
  • File mvccontroller, file class komponen controller.
  • File mvcview, file komponen view.
  • File webapicontroller, file controller Web API.
  • File stylesheet, file CSS.
  • file htmlpage, file HTML.

{appsettings.json}

Untuk membuat file ini digunakan perintah berikut.

yo aspnet:appsettings

 

Hasilnya adalah file dengan nama appsettings.json dengan isi sebagai berikut.

{htmlpage}

Untuk membuat file HTML dengan nama Index.html digunakan perintah berikut.

yo aspnet:htmlpage Index.html

 

Hasilnya adalah file Index.html dengan isi sebagai berikut.

<!doctype html>
<html lang="">
  <head>
      <meta charset="utf-8" />
      <title></title>
      <meta name="description" content="" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <!-- Place favicon.ico in the root directory -->
  </head>
  <body>

</body>
</html>

 

{stylesheetcss}

Untuk membuat file CSS dengan nama default.css maka digunakan perintah berikut ini.

yo aspnet:stylesheet default

 

{class}

Untuk membuat class HelloWorld maka digunakan perintah berikut ini.

yo aspnet:class HelloWorld

 

Dan berikut adalah file class HelloWorld.css sebagai berikut.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace HelloWorldASPNETCore
{
public class HelloWorld
{
public HelloWorld()
{
}
}
}

 

{mvccontroller}

Untuk membuat class controller HomeController digunakan perintah berikut ini.

yo aspnet:mvccontroller HomeController

 

Hasilnya adalah sebagai berikut.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

// For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860

namespace HelloWorldASPNETCore
{
public class HomeController : Controller
{
// GET: /<controller>/
public IActionResult Index()
{
return View();
}
}
}

 

{mvcview}

Untuk membuat file view komponen dengan nama Index.chtml digunakan perintah berikut ini.

yo aspnet:mvcview Index.cshtml

 

Hasilnya adalah sebagai berikut.

@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    // ViewBag.Title = "Index Page";
}

 

Dengan adanya fitur ini maka pembangunan aplikasi web ASP.NET Core akan lebih mudah dan cepat.

Semoga posting ini bermanfaat Smile

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.