VIM-code-editor

Abrar Mehedi — Sat, 10 Dec 2022 14:52:10 +0000

🧑‍💻 VIM Code Editor

Vim is a “modal” text editor based on the vi editor written by Bill Joy in the 1970s for a version of UNIX.

💳 What is modal?

When you’re using most word processors and text editors, the alphanumeric keys (i.e., a through z, 1 through 9) are only used to input those characters unless they’re modified by a control key. In Vim, the mode that the editor is in determines whether the alphanumeric keys will input those characters or move the cursor through the document.

📖 The Basics of Moving in Vim

h ⇒ moves the cursor one character to the left.
j ⇒ moves the cursor down one line.
k ⇒ moves the cursor up one line.
l (L) ⇒ moves the cursor one character to the right.
0 ⇒ moves the cursor to the beginning of the line.
$ ⇒ moves the cursor to the end of the line.
w ⇒ move forward one word.
b ⇒ move backward one word.
G ⇒ move to the end of the file.
gg ⇒ move to the beginning of the file.
`. ⇒ move to the last edit.

📝 Editing Vim Style

d ⇒ starts the delete operation.
dd ⇒ One line delete or cut
dw ⇒ will delete a word.
d0 ⇒ will delete to the beginning of a line.
d$ ⇒ will delete to the end of a line.
dgg ⇒ will delete to the beginning of the file.
dG ⇒ will delete to the end of the file.
u ⇒ will undo the last operation.
Ctrl-r ⇒ will redo the last undo.

🔎 Searching and Replacing

/text ⇒ search for text in the document, going forward.
n ⇒ move the cursor to the next instance of the text from the last search. This will wrap to the beginning of the document.
N ⇒ move the cursor to the previous instance of the text from the last search.
?text ⇒ search for text in the document, going backwards.

📑 Copying and Pasting

yy ⇒ To Copy a line
dd ⇒ To cut a line
p/P ⇒ Paste a line

📚 Saving and Quitting

:q ⇒ Quite
:q! ⇒ Quite and not save
:w ⇒ Save
:wq ⇒ Save and Quite
:wq! ⇒ To save Read only File (If have permission)
:x ⇒ Save and Quite {Not Recommended} 😳

🧑‍💻 Contributors

Abrar Mehedi 👉 Follow me on Github

Visual Studio Code Customization

Abrar Mehedi — Sat, 10 Dec 2022 14:46:45 +0000

📝 Why?``
I am using Visual Studio code since 2018 and this time I created lots of projects with this code editor. VS Code is my favorite code editor. It's fast and flexible. no matter which operating system I am using VS code is my go-to editor. Over a long period of time, I needed lots of modifications, I changed the look, features, extensions as well as theme. No theme is perfect for my personalization, so I customized a theme in my way. Also, I like to customize extension features. So every time why I set up a new work environment I need to do it manually. So, I uploaded all settings here. So I can do this fast. You can use any one of them.

🛠 VS Code Settings

{ "editor.fontFamily": "Operator Mono, Fira Code", "editor.fontSize": 20, "editor.tabSize": 2, "editor.wordWrap": "on", "editor.cursorSmoothCaretAnimation": true, "editor.cursorBlinking": "expand", "prettier.proseWrap": "always", "editor.formatOnSave": true, "editor.formatOnPaste": true, "editor.formatOnType": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, "workbench.colorCustomizations": { "editorGroupHeader.tabsBackground": "#2c2c54", "activityBar.background": "#2c2c54", "sideBar.background": "#141422", "minimap.background": "#141422", "tab.activeBackground": "#706fd3", "tab.inactiveBackground": "#191846", "terminal.border": "#2c2c54", "terminal.background": "#2c2c54", "statusBar.background": "#474787", "scrollbarSlider.background": "#474787", "scrollbarSlider.hoverBackground": "#706fd3" }, "editor.tokenColorCustomizations": { "comments": "#95afc0" }, "editor.linkedEditing": true, "editor.bracketPairColorization.enabled": true, "editor.guides.bracketPairs": true, "editor.guides.bracketPairsHorizontal": true, "editor.hover.enabled": false, "window.zoomLevel": 1, "files.autoSave": "afterDelay", "files.autoSaveDelay": 10, "liveServer.settings.CustomBrowser": "chrome:PrivateMode", "liveServer.settings.donotShowInfoMsg": true, "liveServer.settings.donotVerifyTags": true, "liveSassCompile.settings.formats": [ { "format": "compressed", "extensionName": ".min.css", "savePath": "/css" } ], "liveSassCompile.settings.generateMap": false, "workbench.iconTheme": "material-icon-theme", "workbench.colorTheme": "Andromeda", "workbench.editor.enablePreview": false, "terminal.integrated.defaultProfile.windows": "Git Bash", "terminal.integrated.fontSize": 20, "terminal.integrated.fontWeight": null, "diffEditor.wordWrap": "on", "bracketPairColorizer.depreciation-notice": false, "security.workspace.trust.untrustedFiles": "open" }
`

⚙️ VS Code Extension

Auto Close Tag
Auto Rename Tag
Debugger for Chrome
indent-rainbow
HTML CSS Support
JavaScript (ES6) code snippets
Live Server
Live Sass Compiler
Material Icon Theme
Prettier - Code formatter
WordPress Snippets
Simple React Snippets

🎨 VS Code Themes

Andromeda 👈
Dracula Official
Night Owl
Shades of Purple
SynthWave '84

Ayu (Theme)

✒ Font Info
Fira Code
Operator Mono

DEV Community: Abrar Mehedi