Settingan J.Son Default VCODE

{
    "editor.minimap.enabled": false,
    "explorer.openEditors.visible": 0,
    "editor.formatOnSave": true,
    "workbench.colorTheme": "One Dark Pro",
    "editor.fontSize": 12,
  "window.zoomLevel": 1,
    "window.zoomLevel": 0,
    "explorer.confirmDragAndDrop": false,
    "php.suggest.basic": false,
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "workbench.iconTheme": "vscode-icons",
    "explorer.confirmDelete": false,
    "liveServer.settings.donotShowInfoMsg": true,
  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    "editor.fontFamily": "Fira Code",
    "vsicons.dontShowNewVersionMessage": true,
    "editor.fontLigatures": true,
    // Enable per-language
"[javascript]": {
    "editor.formatOnSave": true
},
"[php]": {
  "editor.formatOnSave": true
}

}



=============================================

Baca Selengkapnya »

User Snipset Visual Code

• Buatlah file j.son
• Masuk file - preference kemudian user snipset

{
"aqil php": {
"prefix": "php",
"body": "<?php $1 ?>",
}

"aqil phpp": {
"prefix": "phpp",
"body": "<?= $1 ?>",
}
 
"aqil echo": {
"prefix": "ec",
"body": "echo \"${1:text}\" ",
}
"aqil Fungsi": {
"scope": "php",
"prefix": "fung",
"body": "function ${1:nama_fungsi}(${2:\\$variable}) {\t${3:#code...};}",
}
 
"aqil Coment": {
"scope": "javascript,html, php",
"prefix": "comen",
"body": "$BLOCK_COMMENT_START ${1:placeholder} $BLOCK_COMMENT_END"
}
 
"aqil Input": {
"prefix": "inpul",
"body": [
"<p>",
"<label for=\"$1\"> ${2:Username}</label>",
"\t<input type=\"${3:text}\" name=\"$4\" placeholder=\"$5\" id=\"$6\" value=\"$7\">",
"</p>",
]
}
 
 
 
"aqil Form": {
"prefix": "formul",
"body": [
"<form action=\"${1:file.php}\" method=\"${2|GET,POST|}\">",
"\t<fieldset>",
"\t<legend >${3:judul}</legend>",
"\t$5",
"\t</fieldset>",
"</form>"
],
}
 
"aqil label": {
"prefix": "fielku",
"body": [
"<fieldset>",
"<legend align=\"$1\">${2:username}</legend>",
"$3",
"</fieldset>"
],
}
}

Baca Selengkapnya »

Font Fira Code untuk VS CODE

 "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true,
      // Set the default
"editor.formatOnSave": false,
// Enable per-language
"[javascript]": {
    "editor.formatOnSave": true
},
"[php]": {
  "editor.formatOnSave": true
}

copy code di atas, lalu pastekan di Settting.json VSCODE
simpan dan reload kembali VSCOdenya.

klik di sini untuk font Fira Code

Taq untuk php

{
	"PHP Tag": {
	"prefix": "php",
	"body": "<?php $1 ?>"
	},
	"Inline Echo": {
	"prefix": "phpp",
	"body": "<?= $$1; ?>"
	},
	"Input Label": {
	"prefix": "formel",
	"body": [
	"<label>",
	"\t${3:Username}",
	"\t<input type=\"${1:text}\" name=\"${2:username}\">",
	"</label>"
	]
	},
	"My Form": {
	"prefix": "myform",
	"body": "<form method=\"${1|get,post|}\" action=\"$2\">$3</form>"
	}
	}

Baca Selengkapnya »

Ekstensi yang harus Diinstall di VSCode

short cut untuk menampilkan tampilan ekstensi : CTRL + Shift + X

• Matikan Editor Open dengan cara Ctrl +, (koma)

1. Masuk setting atau Ctrl + , (koma)
2. Ketik open edit visible, untuk menghilangkan tampilan open edit, kemudian ubah nilainya yang semula 9 menjadi 0
3. Ketik minimap, hilanngkan centangnya
4. Install font firacode, Masukkan file j.son edit
5. Kemudian masukkan populer ekstensi
6. Tambahkan esktensi live server chrome, setingannya bisa dilihat di blog

1. Auto Close Tag
2. Auto Rename Tag
3. Beauty
4. Bracket Pair Colorizer
5. CSS Peek
6. HTML CSS Support
7. HTML Snippets
8. Indent Rainbow
9. Intillisense for CSS class name in HMTL
10. JS-CSS-HTML Formatter
11. One Dark Pro (tema)
12. Open in Browser
13. PHP Intelephense, ketik @builtin php, disable PHP Language Features.
14. Material Icon Theme
15. VSCode Icon Team
16. Live Server, untuk php lihat tutorial berikut : ingat cukup foldernya saja, tanpa ditulis index.php

Baca Selengkapnya »

Shorcut Visual COde | Emmet Abreviation

klik di sini

Shortcut Penting VSCOde

1. Ctrl+Space : untuk menampilkan saran/penawaran
2. Ctrl+Shift+ P : untuk menampilkan thme color menampilkan, dll
3. Ctrl + B : menghilangkan taskbar
4. Ctrl + , (koma) : untuk menampilkan setingan font/ ukuran dsb.
5. Ctrl + D, untuk mengganti semua nilai yang sama.
6. Alt + Z, untuk wrapt text spy bisa dikecilkan windowsnya.
7. Ctr+/ (slash) : untuk menampilkan komentar
8. Alt + panah bawah : switch tukar (caranya teksnya di blok dulu)

Baca Selengkapnya »

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,

Baca Selengkapnya »