p1-insta4288-static

VSCode for Web Development

This document contains tips and tricks for web development in VS Code. While VS Code is a reasonable choice, other popular choices include Pycharm, Vim, or Emacs (though of course, Prof. Leach’s choice of Vim is the correct one).

VSCode extensions

If you decide to use VSCode, the CS 4288 staff recommends taking a look at these VSCode extensions. None are required, but you might find some of them useful.

Python An extension that adds better Python language support to VSCode, useful for all projects.
Prettier An extension that formats code in HTML and Javascript. Useful for P1-3 and P5.
Jinja An extension that adds Jinja syntax highlighting to VSCode, useful for P1-3 and P5.
Live Share An extension that enables collaborative editing in VSCode.
Remote - SSH An extension that enables VSCode to connect to a remote file server over SSH, useful for deploying P2 and P3 on AWS .
ESLint An extension to lint Javascript code, useful for P3.
Indent-rainbow An extension to help visualize Python indentations.
GitLens An extension to better visualize the history of code changes
Tabnine (Note: the basic version is free but you need to make an account). An extension that adds AI autocompletion features to VSCode.
Auto Close Tag An extension that automatically adds matching closing HTML tags. Warning: Exercise caution.

VSCode settings

These are a few VSCode settings you might like. To edit your VSCode settings, press Cmd+Shift+P (Ctrl+Shift+P on Windows) to open the Command Pallette and enter Preferences: Open Settings (JSON).

Enable Pylint, pycodestyle, and pydocstyle

"python.linting.enabled": true,
"python.linting.pylintEnabled": true,
"python.linting.pycodestyleEnabled": true,
"python.linting.pydocstyleEnabled": true

These lines may be grayed out and VSCode may throw some error notifications asking you to install some libraries. Ignore these! This will be fixed later when you create a virtual environment and select it as your Python Interpreter.

Disable VSCode auto-activating virtual environments in built-in terminals:

"python.terminal.activateEnvironment": false,
"python.terminal.activateEnvInCurrentTerminal": false

Auto Format on Save:
```
"editor.formatOnSave": true
```
Auto Format on Paste:
```
"editor.formatOnPaste": true
```

Bracket Pair Colorization (formerly a separate extension):

"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs":"active"

Prettier Formatting for HTML, JavaScript, TypeScript, and React:

"[html]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

VSCode keyboard shortcuts

Check out some VSCode keyboard shortcuts Note that option is equivalent to Windows Alt, Cmd is equivalent to Windows Ctrl.

Add or remove additional cursors to your text editor by holding down option and clicking
Highlight text and repeatedly press Cmd+D to add cursors to the next occurrences of the highlighted text
Move the cursor from word to word by holding down option and using the left/right arrow keys
Move an entire line up or down by holding down option and using the up/down arrow keys
Duplicate an entire line by holding down option+shift and using the up/down arrow keys

Acknowledgments

Original document written by the UMich EECS 485 staff, fall 2020.

This document is licensed under a Creative Commons Attribution-NonCommercial 4.0 License. You’re free to copy and share this document, but not to sell it. You may not share source code provided with this document.