VS Code Settings, Extensions, tips and techniques and solutions to common issues for my Web Development setup

Image for post
Image for post
Photo by NeONBRAND on Unsplash

To install any extensions from Pallette

Apply permanent global word wrap

Simulating “alert” in VS-Code by console-logging it

if (typeof alert === "undefined") {
global.alert = function (message) {
console.log(message)
}
}
alert("Hello World")

Syncing All VS-Code Extensions, themes and cofigurations across multiple computers

Possible Issues you may face while syncing

Issue in vscode — “Experimental support for decorators is a feature that is subject to change in a future release”

{  "compilerOptions": {    "experimentalDecorators": true,    "allowJs": true
}
}

Set tab-space-style for 2-spaces

Delete Trailing Spaces on Save

Change the global font-size

Managing Multiple Terminals — Integrated Terminal

Install typings

Change Keymap / Keyboard shortcuts so I can assign custom keymap / custom keyboard shortcuts / custom keybinding

multi line-editing-in-vscode

Ignore / Exclude some folders (like e.g. node_modules ) when searching across project — search.exclude` setting

"files.exclude": {
"*/**/node_modules/": true,
"wp-includes/": true,
"wp-admin/": true,
"wp-*.*": true,
"wp-config.*": false,
"xmlrpc.php": true,
"*/**/cache/": true,
"*/**/uploads/": true,
"*/**/infinitewp/": true,
"*/**/.github/": true,
"*/**/coverage/": true,
"*.pyc": true,
"**/*.min.js": true,
"*.min.css": true,
"*.pdf": true,
"*.min.js.map": true,
"*.pyo": true,
"*.exe": true,
"*.dll": true,
"*.obj": true,
"*.o": true,
"*.a": true,
"*.lib": true,
"*.so": true,
"*.dylib": true,
"*.ncb": true,
"*.sdf": true,
"*.suo": true,
"*.pdb": true,
"*.idb": true,
"**/.DS_Store": true,
"*.class": true,
"*.psd": true,
"*.db": true,
"*.sublime-workspace": true,
"yarn.lock": true,
".gitignore": false
},

Emmet with JS / JSX for React project so after entering div and tab it properly expands like it does in .html file

"emmet.syntaxProfiles": { "javascript": "jsx" },
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"jsx-sublime-babel-tags": "javascriptreact"
}
"files.associations": {
"*.js": "javascriptreact"
}

To replace multiple word simultaneously — like when working with React replace all “class” with “className”

To manually terminate a task in Visual Studio Code? — e.g. when a non-ending while loop keeps on running or a bad recursion is accidentally executed

{
“key”: “ctrl+shift+alt+t”,
“command”: “workbench.action.tasks.terminate”
}
Image for post
Image for post
Image for post
Image for post

To highlight current line ? Very important while searching variable in a long file

"workbench.colorCustomizations": {  "editor.lineHighlightBackground": "#254117"
}

To set different color schemes with multiuple vscode windows open

{
"workbench.colorTheme": "Material Theme Darker High Contrast"
}

To git push using VS-Code’s built in Source Control tab

Add open with vscode to context menu in Ubuntu, by right clicking

sudo add-apt-repository ppa:daniel-marynicz/filemanager-actions
sudo apt update
sudo apt install filemanager-actions-nautilus-extension

Clean Uninstall and Reinstall

~/.vscodeand~/.config/Code

Issue — High CPU usage in vscode

Edit multiple lines simultaneously

Reopen your latest closed file

Make VS Code change language to JavaScript React when open a JSX file

"files.associations": {
"*.js": "javascriptreact"
}
Image for post
Image for post
"files.associations": {
"*.js": "javascript",
"*.ejs": "html"
}

Some shortcuts I use all the time in a regular day

And some other super useful Markdown related shortcuts

Image for post
Image for post

Markdown preview side by side

Making Custom snippets — Super time saving

Image for post
Image for post
"console": {
"prefix": "cl",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}

Custom snippets for React’s .js files to include className={“”}

{
"react-css-modules": {
"prefix": "cssm",
"body": [
"className={styles[\"\"]}"
],
"description": "react-css-modules"
}
}
Image for post
Image for post

List out or Print the full List of Extenstions that you are currently using

code --list-extensions | xargs -L 1 echo code --install-extension
code --install-extension 2gua.rainbow-brackets
code --install-extension aaron-bond.better-comments
code --install-extension adpyke.codesnap
code --install-extension alefragnani.Bookmarks
code --install-extension alefragnani.numbered-bookmarks
code --install-extension alexeyvax.vscode-open-native-terminal
code --install-extension bceskavich.theme-dracula-at-night
code --install-extension bierner.markdown-preview-github-styles
code --install-extension ChakrounAnas.turbo-console-log
code --install-extension chrisdias.vscode-opennewinstance
code --install-extension christian-kohler.npm-intellisense
code --install-extension christian-kohler.path-intellisense
code --install-extension CoenraadS.bracket-pair-colorizer
code --install-extension Compulim.compulim-vscode-closetag
code --install-extension dbaeumer.vscode-eslint
code --install-extension dzannotti.vscode-babel-coloring
code --install-extension ecmel.vscode-html-css
code --install-extension eg2.tslint
code --install-extension eg2.vscode-npm-script
code --install-extension emilast.LogFileHighlighter
code --install-extension emmanuelbeziat.vscode-great-icons
code --install-extension Equinusocio.vsc-community-material-theme
code --install-extension Equinusocio.vsc-material-theme
code --install-extension equinusocio.vsc-material-theme-icons
code --install-extension eriklynd.json-tools
code --install-extension esbenp.prettier-vscode
code --install-extension fabiospampinato.vscode-open-in-terminal
code --install-extension faceair.ayu-one-dark
code --install-extension fms-cat.theme-monokaisharp
code --install-extension formulahendry.auto-close-tag
code --install-extension formulahendry.auto-complete-tag
code --install-extension formulahendry.auto-rename-tag
code --install-extension formulahendry.code-runner
code --install-extension formulahendry.terminal
code --install-extension gencer.html-slim-scss-css-class-completion
code --install-extension gerane.Theme-Sunburst
code --install-extension ghgofort.neon-vommit
code --install-extension goessner.mdmath
code --install-extension HookyQR.beautify
code --install-extension httpsterio.henna
code --install-extension ivanzusko.theme-jo-light
code --install-extension James-Yu.latex-workshop
code --install-extension jasonnutter.search-node-modules
code --install-extension jdinhlife.gruvbox
code --install-extension jolaleye.horizon-theme-vscode
code --install-extension josef.rouge-theme
code --install-extension kamikillerto.vscode-colorize
code --install-extension kube.theme-kay
code --install-extension leizongmin.node-module-intellisense
code --install-extension MaxfieldWalker.vscode-color-theme-spirited-away
code --install-extension mdickin.markdown-shortcuts
code --install-extension mgmcdermott.vscode-language-babel
code --install-extension michelemelluso.code-beautifier
code --install-extension mikestead.dotenv
code --install-extension mohsen1.prettify-json
code --install-extension monokai.theme-monokai-pro-vscode
code --install-extension mrmlnc.vscode-scss
code --install-extension ms-azuretools.vscode-docker
code --install-extension ms-python.anaconda-extension-pack
code --install-extension ms-python.python
code --install-extension ms-vscode.node-debug2
code --install-extension ms-vscode.Theme-MaterialKit
code --install-extension ms-vsliveshare.vsliveshare
code --install-extension msjsdiag.debugger-for-chrome
code --install-extension msjsdiag.vscode-react-native
code --install-extension mushan.vscode-paste-image
code --install-extension naumovs.color-highlight
code --install-extension nickdemayo.vscode-json-editor
code --install-extension Nimda.deepdark-material
code --install-extension njpwerner.autodocstring
code --install-extension Nuuf.theme-hackershaze
code --install-extension P-de-Jong.vscode-html-scss
code --install-extension philsinatra.nested-comments
code --install-extension PKief.material-icon-theme
code --install-extension pranaygp.vscode-css-peek
code --install-extension rafamel.subtle-brackets
code --install-extension redhat.vscode-yaml
code --install-extension rsbondi.highlight-words
code --install-extension Shan.code-settings-sync
code --install-extension shardulm94.trailing-spaces
code --install-extension shd101wyy.markdown-preview-enhanced
code --install-extension shubham-saudolla.lilac
code --install-extension sibiraj-s.vscode-scss-formatter
code --install-extension sldobri.daily
code --install-extension sleistner.vscode-fileutils
code --install-extension SmukkeKim.theme-setimonokai
code --install-extension sourcegraph.sourcegraph
code --install-extension sourcegraph.vscode-sourcegraph-theme
code --install-extension spywhere.guides
code --install-extension steoates.autoimport
code --install-extension stevencl.addDocComments
code --install-extension streetsidesoftware.code-spell-checker
code --install-extension teabyii.ayu
code --install-extension thebarkman.vscode-djaneiro
code --install-extension tht13.python
code --install-extension torn4dom4n.latex-support
code --install-extension trybick.terminal-zoom
code --install-extension ueno.react-native-code-styles
code --install-extension vincaslt.highlight-matching-tag
code --install-extension voldemortensen.rainbow-tags
code --install-extension vscode-icons-team.vscode-icons
code --install-extension wmaurer.change-case
code --install-extension yzhang.markdown-all-in-one
code --install-extension ZainChen.json
code --install-extension Zignd.html-css-class-completion

Written by

DataScience | ML | 2x Kaggle Expert. Ex Fullstack Engineer and Ex International Financial Analyst. https://www.linkedin.com/in/rohan-paul-b27285129/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store