kita coba yuuuuuuuuuuukkkkkk......
penelusuran tetem masih berlanjut,.......
let's together............rencang-rencang...........
Kemampuan Visual Studio sebagai IDE keluaran Microsoft tentu sudah tidak perlu diragukan lagi, dengan segala fitur ‘pintar’ yang ada, otomatisasi pengaturan sana sini membuat pembangunan aplikasi terasa lebih mudah bagi para developer. Bertahun-tahun sudah IDE ini memberikan support terbaiknya untuk pengembangan aplikasi yang berbasis .NET , seperti C++, C#, VB, dll. Namun akan kontras jadinya jika kita membicarakan kemampuannya untuk pengembangkan aplikasi berbasis Web, dengan basis language seperti JavaScript, ASP , CSS, HTML5 dll. Visual Studio seakan-akan setengah hati dalam memberikan support, beberapa fitur utama yang menjadi andalan, seperti intellisense akan sulit ditemui ketika digunakan untuk membangun aplikasi berbasis Web.
Namun apa yang tertulis diatas telah menjadi masa lalu bagi IDE ini, seperti yang telah saya singgung dalam artikel sebelumnya, melalui Visual Studio 2012, Microsoft memperkenalkan kembali Visual Studio sebagai IDE andalan yang secara native telah mendukung pembangunan aplikasi berbasis Web Scripting Language. Artikel ini akan membahas lebih detail fitur baru apa saja yang dapat dirasakan para web developer dengan language JavaScript & CSS melalui IDE Visual Studio 2012 ini
JavaScript
Seberapa besar perbaikan fitur yang hadir untuk mendukung kenyamanan ber-javascript ria? I’ll tell you that it has becoming a very handy tools for us web developer.
Starts from The Small One…
Smart Indentation
Pemberian Indentasi (tulisan menjorok ke dalam) pada sebuah kode lazim dilakukan, selain untuk menunjukan batasan pada suatu struktur syntax, juga berguna untuk merapihkan baris kode sehingga lebih mudah dibaca. Identasi umumnya berjarak 1 “Tab” keyboard, atau bisa juga 4 ketukan “Space Bar” keyboard (4 spasi), melakukannya secara manual tentu merepotkan bagi programmer pemula, pun mungkin sama merepotkannya jika bahasa pemrograman tertentu memiliki aturan indentasi yang ketat (seperti F#)
Untuk itulah pada Visual Studio , terdapat fitur Smart Indentation, dimana ketika membuat baris baru IDE akan melihat konteks kode yang ada dan secara otomatis memberikan indentation yang sesuai berdasarkan analisis tersebut, sehingga tentu saja programmer tidak perlu direpotkan lagi dengan membuat indentasi yang sesuai, Sounds great, huh? Walaupun sebenernya ini bukanlah fitur yang benar-benar baru dari Visual Studio, implementasi fitur ini telah dilakukan pada versi VS lalu untuk bahasa seperti C#, VB, dll. Namun sekali lagi, Web Scripting, contohnya JavaScript seperti di anak tirikan, karena pada versi sebelumnya masih berupa Block Indentation. Tapi... itu dulu, pada Visual Studio 2012 fitur itu telah ada untuk JavaScript.
Bracket Matching
Masih seputar perubahan kecil lainnya, Visual Studio 2012 telah memberikan kemampuan tambahan bagi JavaScript untuk mengenali pasangan curly brace “{“ atau brace “(“ yang ada, tentu hal ini cukup berarti, mengingat kesalahan-kesalahan kecil seperti kurangnya bracket penutup, ataupun lebihnya tentu bukan hal yang asing bagi programmer. Kesalahan kecil namun bisa membuat rambut anda rontok jika harus memperbaikinya, karena mengenali range scope suatu bracket pada code yang berjumlah besar sangatlah merepotkan.
Dengan adanya fitur ‘baru’ ini maka ketika pointer kita arahkan pada suatu bracket, Visual Studio kemudian akan memberikan highlight pada pasangannya seperti yang terlihat pada gambar, cukup membantu bukan? setidaknya dalam menekan resiko pertumbuhan programmer botak.
Code Folding
And…. anothers rebranding feature, serupa dengan 2 fitur sebelumnya, Code Folding pun merupakan fitur yang “baru tidak baru”, karena selain fitur ini telah diimplementasikan pada versi VS lalu juga telah banyak diimplementasikan pada berbagai kode editor umumnya, fitur yang dapat melakukan peringkasan pada suatu fungsi, maupun meng-expand-nya, sehingga hanya menampilkan bagian headernya saja.
Small but worth to mention, doesn’t it?
Comes The Real Deal..
Getting Things done with Intellisense JS
Boleh jadi, fitur ini salah satu yang ditunggu-tunggu, fitur yang sangat membantu bagi para .NET developer, kini hadir untuk para Web Developer, ya. Intellisense merupakan fitur pintar yang dapat memberikansuggesting kepada anda mengenai fungsi terkait apa saja yang tersedia, maupun fungsi apa yang sesuai untuk memanipulasi tipe variabel tertentu.
Mari kita buktikan, berikut ini merupakan screenshot potongan kode yang ditulis di Visual Studio 2012, deklarasi variable string dilakukan sebelumnya, dan ketika kita akan memanipulasi variabel tersebut, Visual Studio hanya akan menampilkan fungsi yang terkait dengan manipulasi type string saja dalam intellisensenya
masih belum percaya? mari tambahkan variabel lagi dengan tipe numeric, dan cermati ketika hal yang sama dilakukan, yang tampil dalam intelisense hanya fungsi untuk memanipulasi tipe data numeric.
and that’s the real deal, fitur ini pasti akan sangat membantu dalam menyelesaikan pekerjaan anda.
Much More Intellisense for Third party JS Library : jQuery!
Apa jadinya jika fitur pintar tersebut dapat juga mendukung eksternal library? atau non standard library. Tentunya akan sangat menarik bukan? ya.. kesenangan memang tidak berhenti hanya sampai situ, yang sangat sangat menarik adalah, kemampuan intellisense ini juga mendukung library pihak ketiga, apalagi kalau bukan library JavaScript terpopuler yaitu jQuery. Cukup ketikan simbol ala jQuery ‘$(‘ pada editor JavaScript, kemudian Visual Studio akan tampil dengan dokumentasi lengkapnya.
tidak hanya itu, coba lanjutkan kode tersebut, maka otomatis intellisense akan menampilkan pilihan yang sesuai dengan format anda, sama seperti layaknya JavaScript
seemingly integrated, oh.. what a great feature
Documentation
Fungsi yang baik adalah fungsi yang disertai dokumentasi kegunaan, minimal baris komentar yang menjelaskan kegunaanya, mungkin akan menyenangkan jika fungsi yang kita tulis muncul dalam fitur intellisense lengkap dengan dokumentasi yang kita buat, terdengar menarik? percayalah hal itu mungkin, dan mudah untuk dilakukan.
Sangat simple, cukup tambahkan double flash seperti komentar pada umumnya, dan baris komentar itu akan muncul seperti dokumentasi intellisense lainnya, that’s all? yes it is.
Penasaran dengan suatu fungsi? take a look at Go to Definition Features
Pengguna C# di Visual Studio mungkin sudah terbiasa dengan fitur yang satu ini, fitur yang dapat membantu anda untuk jump in ke asal muasal suatu fungsi, sehingga memudahkan dalam mengetahui alur kode sekaligus melakukan debuging. Sekarang fitur ini telah hadir untuk JavaScript, cukup arahkan pointer pada suatu fungsi, dan tekan F12, secara otomatis, Visual Studio akan membawa anda menuju file tempat fungsi tersebut berasal.
Satu hal yang menjadi catatan, untuk bisa berjalan, anda harus menambahkan reference pada file .js bersangkutan, caranya? cukup drag n drop saja, dan dengan otomatis Visual Studio akan menambahkan baris kode seperti dibawah atau bisa juga menyimpannya pada file global yaitu _references.js.
CSS
Selesai dengan JavaScript, bagian berikut ini akan menyinggung dua fitur penting CSS di Visual Studio 2012
CSS Vendor Spesific Intellisense
Menulis hal yang sama berulang-ulang itu membosankan, mungkin sama membosankannya dengan web developer yang harus menulis code CSS berulang kali hanya untuk menampilkan style yang sama. Ya… membosankan,namun hal Ini lumrah karena tiap browser memiliki aturan sendiri agar style tersebut dapat berjalan, itu yang mengharuskan mereka menulis ekstra kode yang intinya sih untuk satu style itu, namun dengan bentuk penulisan yang sedikit berbeda.
Seakan mengerti kebutuhan tersebut, Visual Studio 2012 hadir dengan fitur CSS Vendor Spesific Intellisense, coba anda lihat potongan kode di bawah ini
hey i know that code, so what?
ini bagian menariknya, code diatas terbentuk secara otomatis, ketika anda berniat membuat style transform rotate, cukup ketikan sebagian, maka fitur intellisense akan melengkapinya untuk anda dan ditambah, fitur ini akan otomatis memasukan baris kode tambahan agar style tersebut dapat berjalan di semua browser, keren bukan? hilang sudah pekerjaan membosankan itu.
CSS Color Editor
Terkadang para web developer terkendala penentuan warna, bukan baju, namun kode warna untuk css, biasanya kalau master design tidak tersedia, atau hanya berupa gambar, seringkali diperlukan tools tambahan untuk mendapatkan kode warna yang sesuai. namun visual studio 2012 telah mengintegrasikan toolstersebut,sehingga anda cukup menekan ctrl + space atau menuliskan kode color dan secara otomatis css editor akan menampilkan color picker
and.. that’s all about javascript & css on visual studio 2012, silahkan anda nilai sendiri, sudah cukup membantukah fitur tersebut bagi anda? jika penasaran, saya sarankan anda buktikan sendiri, dan rasakan kemudahannya.
try it and love it.. see you on the next article, folks.
artikel ini dipersembahkan oleh :
http://students.netindonesia.net/blogs/awwal_m/archive/2012/08/25/lebih-dekat-bersama-fitur-baru-javascript-amp-css-pada-visual-studio-2012.aspx
terimakasih banget buat link2..., yang udah ketemu...,
jangan lupa ya teman... "IKATLAH ILMU KITA DENGAN MENULISNYA , KARENA SETIAP GORESANNYA AKAN SELALU TERASA..... :)" GOOD LUCK....FRIENDS...
