/vscode

Visual Studio Code configuration for django

vs code

Vscode icon

# vsconfig

Visual Studio Code configuration for django

folder structure be like

.vscode

  • launch.json
  • settings.json
  • tasks.json

⇒ To create settings.json

ctrl+shift+p

python:Select Interpreter

⇒ To create launch.json:

ctrl+shift+p

Python > Django

⇒ To create tasks.json:

Run Build Task (Ctrl+Shift+B).

Ctrl+Shift+B

⇒ To create project.code-workspace:

File > Add Folder to Workspace...

File > Save Workspace As...

choose a name for this file for example project

⇒ set shotcut to folders to collapse

click on Manage (setting like icon on left lower corner) > Keyborad Shortcuts(or press ctrl+k and ctrl+s consecutively)

search workbench.files.action.collapseExplorerFolders

+ to add a shortcut

⇒ Prevent closing of previous open window

click on Manage (setting like icon on left lower corner) > Settings(or press ctrl+,)

search workbench.editor.enablePreview

⇒ To create project.code-workspace:

File > Add Folder to Workspace...

File > Save Workspace As...

choose a name for this file for example project

this file contains the settings related to the currunt project

this is helpful incase you want some settings or configuration only for your current folder but not for all vscode global settings.

⇒ format on save

setting > Format on Save

check this field

Make this to true so the pritter will format the document.

⇒ move the cursor to last working position

Alt + ←

⇒ move the cursor to last working position bacword or forward

Alt + ← or Alt + →

settings > open folder in new window

⇒ open folder in new window

settings > open folder in new window

dropdown to on

⇒ Stop closing the non changed tab

workbench.editor.enablePreview

settings > workbench.editor.enablePreview

uncheck to make changes(means set to false)

⇒ enable emmet after vscode django extenstion

setting > click on Extensions > click on Edit in settings.json

add"emmet.includeLanguages": {"django-html": "html"},

⇒ Move back to last cursor position

ctrl + u

⇒ split

ctrl + \

⇒ collapse all code

ctrl + k + 0

⇒ expand all code

ctrl + k + j

⇒ join lines

make selection of the lines which you want in one line

F1

search join lines

hit enter

⇒ Switch between recent tabs

ctrl + Tab

⇒ Run currunt line code

(this will run the code in a new python shell) shift + enter

⇒ Get out of the qoutes or get cursor out of the string

Ctrl + Shift + \

⇒ Show/Hide panel(the cmd panel)

Ctrl + j

⇒ Scroll Fast

alt + scroll

⇒ move the cursor to error

f8

⇒ Go to the defination

crtl+click or f12

⇒ How to enable auto import

install pylance extention

now to go to settings and search python.analysis.autoImportCompletions

mark it check

increarse the depth for auto import

go to settings and search python.analysis.packageIndexDepths

click on Edit in settings.json

increase the depth. restart vs code and wait for a bit

⇒ add some cusotm key shortcut

go to

File > Preferences > > Keyboard Shortcuts

search for Terminal Focus Previous Terminal

workbench.action.terminal.focusNext

add shotrcut ctrl+shift+alt+.

⇒ How to enable auto import

install pylance extention

now to go to settings and search python.analysis.autoImportCompletions

mark it check

increarse the depth for auto import

go to settings and search python.analysis.packageIndexDepths

click on Edit in settings.json

increase the depth. restart vs code and wait for a bit

⇒ search for Terminal Focus Next Terminal

ctrl+shift+alt+,

workbench.action.terminal.focusPrevious

⇒ search for Tasks: Restart Running task

ctrl+shift+alt+b

workbench.action.tasks.restartTask

⇒ search for Collapse Folders in Explorer

ctrl+shift+alt+c

workbench.files.action.collapseExplorerFolders

{
  "key": "ctrl+shift+alt+oem_period",
  "command": "workbench.action.terminal.focusNext"
}


{
  "key": "ctrl+shift+alt+oem_comma",
  "command": "workbench.action.terminal.focusPrevious"
}


{
  "key": "ctrl+shift+alt+b",
  "command": "workbench.action.tasks.restartTask"
}

{
  "key": "ctrl+shift+alt+c",
  "command": "workbench.files.action.collapseExplorerFolders"
}