Senin, 24 October 2022

Vscode: Panduan untuk Tampilan Bersih dan Minimalis

Saya akan menunjukkan beberapa settings yang default harus saya pakai dalam menggunakan vscode.

Visual Studio Code
Code Editor

Karena sewaktu saya upload video tentang bagaimana pengaturan yang saya pakai dalam menggunakan phpstorm. Dan banyak yang minta juga tentang vscode, sehingga saya juga berfikir untuk membuat nya.

Oia, disini saya tidak membahas tentang extension, karena jika mengenai extension itu bisa dilihat disini, kemudian jika mau nonton secara action, bisa langsung di ya.

No defaults

Berikut ini adalah pengaturan untuk menghilangkan semua default yang diberikan vscode seperti preview, multi cursor, trailing whitespace dll.

"editor.copyWithSyntaxHighlighting": false,
"diffEditor.ignoreTrimWhitespace": false,
"editor.emptySelectionClipboard": false,
"workbench.editor.enablePreview": false,
"window.newWindowDimensions": "inherit",
"editor.multiCursorModifier": "ctrlCmd",
"files.trimTrailingWhitespace": true,
"diffEditor.renderSideBySide": false,
"editor.snippetSuggestions": "top",
"editor.detectIndentation": false,
"window.nativeFullScreen": false,
"files.insertFinalNewline": true,
"files.trimFinalNewlines": true,

Give a breath

Saya tidak pernah menggunakan aktivitas bar untuk install extension dan sebagainya, saya lebih memilih untuk menggunakan shortcut dari pada harus klik satu persatu. Untuk folding dan minimap juga saya tidak pakai, sehingga saya akan hilangkan juga.

"workbench.activityBar.visible": false,
"workbench.statusBar.visible": false,
"workbench.editor.showTabs": false,
"editor.renderIndentGuides": false,
"editor.minimap.enabled": false,
"editor.lineNumbers": "off",

Selanjutnya saya juga tidak suka dengan suggestion noise yang dibawa vscode by default. Sehingga saya akan hilangkan itu semua dengan key ini.

Noise

Kita ingin vscode ini benar-benar bersih, maka setting dibawah akan menjawab pertanyaan Anda selama ini.

"breadcrumbs.enabled": false,
"scm.diffDecorations": "none",
"editor.hover.enabled": false,
"editor.matchBrackets": "never",
"workbench.tips.enabled": false,
"editor.colorDecorators": false,
"git.decorations.enabled": false,
"workbench.startupEditor": "none",
"editor.lightbulb.enabled": false,
"editor.selectionHighlight": false,
"editor.overviewRulerBorder": false,
"editor.renderLineHighlight": "none",
"editor.occurrencesHighlight": false,
"problems.decorations.enabled": false,
"editor.renderControlCharacters": false,
"editor.hideCursorInOverviewRuler": true,
"editor.gotoLocation.multipleReferences": "goto",
"editor.gotoLocation.multipleDefinitions": "goto",
"editor.gotoLocation.multipleDeclarations": "goto",
"workbench.editor.enablePreviewFromQuickOpen": false,
"editor.gotoLocation.multipleImplementations": "goto",
"editor.gotoLocation.multipleTypeDefinitions": "goto",

Saya cuma bisa bilang, jika Anda tidak suka dengan peraturan ini, jangan digunakan. Karena ini lumayan extreme juga.

Keyboard Shortcut

Karena unfold dan fold sudah dimatikan dari setting tadi, maka kita bisa menggunakan shortcut untuk itu.

// macOS
{
    "key": "shift+cmd+[",
    "command": "editor.fold",
    "when": "editorFocus"
},
{
    "key": "shift+cmd+]",
    "command": "editor.unfold",
    "when": "editorFocus"
},

// Windows
{
    "key": "shift+ctrl+[",
    "command": "editor.fold",
    "when": "editorFocus"
},
{
    "key": "shift+ctrl+]",
    "command": "editor.unfold",
    "when": "editorFocus"
},

Kemudian untuk menduplikasi line dan join line, saya biasa menggunakan cmd+l dan cmd+j.

// macOS
{
    "key": "cmd+l",
    "command": "editor.action.copyLinesDownAction",
    "when": "editorTextFocus"
},
{
    "key": "cmd+j",
    "command": "editor.action.joinLines",
    "when": "editorTextFocus"
},

// Windows
{
    "key": "ctrl+l",
    "command": "editor.action.copyLinesDownAction",
    "when": "editorTextFocus"
},
{
    "key": "ctrl+j",
    "command": "editor.action.joinLines",
    "when": "editorTextFocus"
},

Untuk keyboard shortcut dan full setting yang saya pakai bisa dilihat di github ya. Jika kalian bukan pengguna vscode, entah itu phpstorm, saya juga sudah memperlihatkan settings nya disini, untuk youtube nya juga ada dan bisa dilihat disini. Semoga bermanfaat, saya akan melihat Anda lagi di artikel yang akan datang.