My VSCode settings
- Font - Fira Code
- Tab Size - 4
- Theme - One Monokai
* shift + option + f => Format code
* command + p => Go to File (File search)
* control + g => Go to Line number (in file)
* control + ` => Open Editor Terminal
* command + / => Comment the line(s) of code using //
* fn + up/down arrow => Page Up / Page Down
* option + w => Select a text and press these keys to add tag before and after the text (htmltagwrap plugin)
* command + b => Toggle open/close of sidebar
* command + j => Toggle open/close bottom bar
* command + shift + t => Open last closed tab
* command + shift + e => Open Folder explorer
* command + shift + f => Search for string pattern in the whole project
* control + tab => Switch between Open tabs
* shift + option + command + up/down/right/left => Grows the cursor in that direction
- shift + option (while dragging with mouse) => For selective vertical selection
* option + mouse-click => Put multiple cursors at different positions
* shift + command + L => Create cursors on all occurrences of a string
- select one instance of a string e.g. background-color and press ⇧⌘L. Start typing.
* shift + option + up/down => Copy a line and insert it above or below the current position
* option + up/down => Move an entire line or selection of lines up or down
* shift + command + k => Delete the entire line
* command + p -> type @ => Organises your code into methods and properties in the order they were written
-> type @: => Groups the methods and properties (Eg. Variables and functions)
-> type : => Allows to jump to a line number (Also tells total line numbers)
-> type ? => Lists and shows all the symbols (like above) you can use
* command + option + [or] => Folding and Unfolding code sections (Eg. functions, classes etc)
- command + K command + 0 => Fold all sections
- command + K command + J => Unfold all sections
* commmand + shift + / => Toggle Block comment /* */
This command gives the plugin list and orders them in a direct install format
code --list-extensions | xargs -L 1 echo code --install-extension
Run the following in the terminal to install plugins
code --install-extension bradgashler.htmltagwrap
code --install-extension christian-kohler.npm-intellisense
code --install-extension christian-kohler.path-intellisense
code --install-extension CoenraadS.bracket-pair-colorizer
code --install-extension eg2.vscode-npm-script
code --install-extension esbenp.prettier-vscode
code --install-extension formulahendry.auto-close-tag
code --install-extension formulahendry.auto-rename-tag
code --install-extension kamikillerto.vscode-colorize
code --install-extension kisstkondoros.vscode-gutter-preview
code --install-extension naumovs.color-highlight
code --install-extension pflannery.vscode-versionlens
code --install-extension pranaygp.vscode-css-peek
code --install-extension robertohuertasm.vscode-icons
code --install-extension spywhere.guides
code --install-extension wix.vscode-import-cost
code --install-extension flowtype.flow-for-vscode
! + tab => (in an html file) generates the basic template for index.html
- Add emmet to jsx
- Add JS Snippets https://code.visualstudio.com/docs/editor/userdefinedsnippets https://adtmag.com/blogs/dev-watch/2017/05/vs-code-snippets.aspx
- Add CSS Snippets
- Add React Snippets