Mengoptimalkan VsCode

Ini tulisan kedua saya tentang vscode, dalam tulisan ini saya hanya ingin berbagi sedikit tentang  pengaturan vscode yang bagi saya cukup membantu dalam  meningkatkan kinerja. Jadi, berikut ini beberapa pengaturan yang saya gunakan, boleh diikuti boleh tidak, bebas.

1. Plugin Atom Keymap

Sebelum menggunakan VsCode saya pengguna atom, untuk mempercepat adapatasi saya memasang plugin ini untuk menyesuaikan shortcut-shortcut di VsCode agar menyerupai Atom. Yah lumayan gak perlu nginget-nginget lagi shortcut yang baru.

2. Plugin Auto Rename Tag

Plugin yang cukup sederhana namun lumayan menghemat waktu, plugin ini membuat kita hanya perlu mengubah tag awal saja dan pasangan tag tersebut akan ikut keubah. Detailnya silahkan lihat gif berikut.

3. [*] Snippet

Maksudnya tanda bintang di atas itu ya sesuaikan dengan bahasa atau snippet yang akan digunakan, ini juga membantu mengurangi waktu daripada bikin atau ngetik ulang kan lama, dengan snippet udah langsung beres. Contohnya snippet blade ini

4. Custom Snippet

Jika tadi merupakan snippets hasil pasang dari yang sudah tersedia, pada vscode pun kita masih bisa menambahkan custom snippet sendiri, caranya juga mudah File -> Prefrences -> User Snippet -> [ pilih snippet yang ingin ditambahkan]

Setelah memilih snippet yang akan ditambahkan maka editor akan membuka tab baru, saya menambahkan snippet vue maka berkas yang dibuka vue.json, isinya seperti ini :

{
/*
  // Place your snippets for Vue here. Each snippet is defined under a snippet name and has a prefix, body and 
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
  // same ids are connected.
  // Example:
  "Print to console": {
    "prefix": "log",
    "body": [
      "console.log('$1');",
      "$2"
    ],
    "description": "Log output to console"
  }
*/
  
}

Lalu tambahkan dengan snippet yang akan dibuat, vue.json tadi jadinya seperti ini

{
/*
  // Place your snippets for Vue here. Each snippet is defined under a snippet name and has a prefix, body and 
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
  // same ids are connected.
  // Example:
  "Print to console": {
    "prefix": "log",
    "body": [
      "console.log('$1');",
      "$2"
    ],
    "description": "Log output to console"
  }
*/
  "v-template": {
    "prefix": "v-template",
    "body": [
            "<template>",
              "  <div>",
              "     {{ hello }}",
              "   </div>",
            "</template>",
            "<script>",
            "export default {",
            "    data(){",
            "      return {",
            "         hello: null",
            "            }",
            "         },",
            "        created() {",
            "",
            "         },",
            "         methods: {",
            "",
            "          }",
            "}",
            "</script>"
    ],
    "description": "Snipet Sederhana"
  }
}

Enaknya gak perlu restart editor untuk bisa langsung digunakan, hasil dari snippet yang saya tambahkan itu seperti berikut :

5. Modifikasi shortcut

Salah satu fitur favorit di vscode adalah inline/integrated terminal, shortcut yang ada yaitu ctr+`

hanya buka tutup terminal, sedangkan yang saya butuhkan itu pindah dari editor ke terminal biar gak perlu pake mouse gitu, caranya gak terlalu sulit ternyata. Pertama pilih File->Preferences->Keyboad Shortcutlalu pilih atau klik link keybindings.json sehingga akan membuak editor tab baru, lalu tambahkan script berikut di editor keybinding tersebut :

{
        "key": "ctrl+`",
        "command": "workbench.action.terminal.focus"
    },
    {
        "key": "ctrl+`",
        "command": "workbench.action.focusActiveEditorGroup",
        "when": "terminalFocus"
    }

Lalu kita bisa pindah antara editor dengan terminal dengan cuku menekan ctrl+`

Ya segitu aja dulu, kalau tar nemu sesuatu lagi nulis lagi.

Referensi :

https://stackoverflow.com/questions/42796887/switch-focus-between-editor-and-integrated-terminal-in-visual-studio-code

https://code.visualstudio.com/docs/editor/userdefinedsnippets