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

If, for example, we want to install the html-css-class-completion extension, launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

Apply permanent global word wrap

First open settings by File > Preference > Settings >OR

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

“alert” is not part of JavaScript, it’s part of the window object provided by web browsers. So it doesn’t exist in the vs-code context.

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

I used this super-popular extension -

Possible Issues you may face while syncing

I got something like, “Error — Toggle Developer tools”

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

I had to resort to following steps to resolve this issue.

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

Set tab-space-style for 2-spaces

STEP-1

Delete Trailing Spaces on Save

Install the extension > Trailing Space

Change the global font-size

File -> Preferences -> User Settings

Managing Multiple Terminals — Integrated Terminal

You can create multiple terminals open to different locations and easily navigate between them. Terminal instances can be added by hitting the plus icon on the top-right of the TERMINAL panel or by triggering the “Ctrl+Shift+ `” command (thats the tilda key). This creates another entry in the dropdown list that can be used to switch between them.

Install typings

Install typings to bring in the .d.ts files which power javascript intellisense.

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

File > Preference > Keyboard Shortcuts > Search in the search-box to find the action (for example “toggle” ) > double click on the default and press the key combination that I want > Hit Enter

multi line-editing-in-vscode

Keep the cursor on the first line > Shift + Alt + ↑ or ↓

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

Exclude folder option to remove unwanted folders like node_modules or others you don’t want to open in Visual Studio Code.

"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

Step A> From the bottom of VS code select JavaScript React as the language.

"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”

select the first “class” and then press Ctrol + D and the next “class” will be selected > press Ctrol + D another time and the next “class” will be selected. After all are selected, just delete “class” and type “className” and all of them will be changed.

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

As of now, in Unix there’s no key shortcut to terminate a running task. So you need to create your own shortcut for it. Go to File->Preferences->Keyboard Shortcuts and add your shortcut to the keybindings.json.

{
“key”: “ctrl+shift+alt+t”,
“command”: “workbench.action.tasks.terminate”
}
  • Kill a specific network process by specifying a port number (Ctrl + Del, on mac Cmd + Del)
  • Show and kill specific active network processes manually (Ctrl + Shift + Del, on mac Cmd + Shift + Del).
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

Try this in your settings.json:

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

To set different color schemes with multiuple vscode windows open

Need to be done each time I want to apply this setting on different windows

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

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

1> View > SCM > Ctrl + Shift + G G

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

A> First install FileManager Actions

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

Clean Uninstall and Reinstall

sudo apt-get purge –auto-remove

~/.vscodeand~/.config/Code

Issue — High CPU usage in vscode

Suddenly one day my vscode taking 35% CPU. Found out this great feature.

Edit multiple lines simultaneously

Just copying and pasting code is a bit old fashioned. In VS Code, you can edit multiple lines by adding cursors to different locations. This is very useful if you are going to use the same code on different lines. Instead of copying and pasting the code in all places, you can hold Alt and click to add a cursor in the places you want to type or edit the code. After adding cursors, edit the code to see the changes in the places where the cursors were added.

Reopen your latest closed file

Just press CTL+SHIFT+T. This will reopen the latest closed window. You can press this is multiple times to open multiple windows. This also works in your browser if you closed a tab that you don’t want to

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

Within VS Code, in the bottom right of the window you will see a smiley face — to the left of that is the language the currently visible file is associated with (e.g. JavaScript). Ensure your currently opened file is 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

  1. CTRL+, = Open user settings
  2. CTRL+K CTRL+S = Show shortcuts
  3. CTRL+G = Go to line
  4. CTRL+P = Go to file
  5. SHIFT+ALT+I = Insert cursor at end of each line selected
  6. CTRL+SHIFT+L = Select all occurrences of current selection
  7. CTRL+L = Select current line
  8. CTRL+F2 = Select all occurrences of current word

And some other super useful Markdown related shortcuts

Following are from the very useful extension

Image for post
Image for post

Markdown preview side by side

https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced

Making Custom snippets — Super time saving

First make one for Console.log(“”) in all .js file

Image for post
Image for post
  • prefix is the shorthand you will use to call on the code snippet.
  • body is the code snippet that will be injected.
  • and well description describes what the code snippet does.
  • $1 and $2 are placeholders for the code you will add to complete the snippet (you can move from one placeholder to another using the tab key).
"console": {
"prefix": "cl",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}

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

Ctrl + Shift + P to open pallette > Type 'snippet' > Select 'Configure User Snippets' >

{
"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

In case you need to send all your installed extensions to a colleague.

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

MachineLearning | DataScience | DeepLearning. Previously Frontend Engineer. Ex International Banking 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