Tutorial VSCode

KELEBIHAN

VISUAL STUDIO CODE (VS CODE) DARI SUBLIME

Kenapa pindah ke VS Code?

1.       Karena Visual Studio Code Gratis.

2.       Untuk pengajaran persis sama dengan siswa gak ada sama sekali, tanpa ada plugin.

3.       Sudah ada plug in favorit yaitu Emmet, untuk menulis html dan css.

4.       Sudah ada linter, untuk mengecek kesalahan yang kurang. Contoh titik koma

5.       Plugin untuk sublime tapi kalau VS code namanya eksensi.

6.       Adanya intellisense, ngetik kemudian diberi saran/ penawaran, lebih lengkap dari sublime.

7.       Bekerja dengan warna, sudah dimunculkan warnanya apa. Dan ketika disorot warnanya sudah ada color picker.

8.       Punya sidebar, paling atas untuk esplorer.

9.       Untuk membuat folder coba yang didalamnya ada file cs.js. maka tinggal ketik new, dan coba/cs.js

10.    Karena dapat mudah mengelola ekstension/plug in. Sidebar kiri paling bawah.

11.    Dapat mudah dengan terintegerasi dengan GIt.

12.    Sublime lebih cepat, untuk PC yang rendah, lebih cepat sublime.

Mengkonfigurasi VSCode :

1.       Kunjungi websitenya : https://code.visualstudio.com

2.       Adanya commad pallete : Ctrl + Shift + P

3.       Atau File preference – setting

4.       Hilangkan ope editor : tekan Ctrl, (control koma) ketik open edito visible. Ubah angka 9 menjadi nol.

5.       Minimap centang enible.

6.       Font size gunakan 24, line hight : 40

7.       Mengganti tema, pilih ekstensi (sidebar paling bawah), pilih one dark pro, material theme.

8.       Mengubah font default, pilih : source code pro.

9.       Control P untuk mencari file yang ada di folder

10.    Ekstensi yang sering digunakan dalam php

a.       Php intelephense, matikan vitur bawaan php di VScode. Yaitu PHP suggest basic

b.       Bootsrap

c.        Laravel snipset 5.

Shortcut Visual Code Cheat Sheet

10 Ekstension VS Code

Shortcut untuk menampilkan ekstension : Ctrl + Shift + X

1.       Sublime text keymap

2.       Open in browser atau live server (klik kanan open with live server)

3.       Autorename tag atau seleksi control D

4.       Intellisense for css class name untuk bootsrap

5.       CSS Peek

6.       Indent-Rainbow

7.       Bracket pair colorize, kurung kurawal.

8.       Beautify : format ident dalam format yang sama, caranya biar bisa rapi ketika disave, yaitu preference kemudian pilih user setting, centang format on save

9.       PHP intellisense

10.     Php intelephense,