Evergreen DokuWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
**New Developers Working Group**

====== VSCode ======
===== Useful extensions=====

  * [[https://marketplace.visualstudio.com/items?itemName=everettjf.filter-line|Filter Line]] -- useful for narrowing down a search through log files
  * [[https://marketplace.visualstudio.com/items?itemName=emilast.LogFileHighlighter|Log File Highlighter]] -- color codes different parts of a .log file
  * [[https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow|Indent Rainbow]]
  * **Angular Language Service**
  * **Axe Accessibility Linter**
  * Bookmarks
  * Better AsciiDoc
  * Compare Folders
  * **Git History**
  * **Git Lens**
  * **Live Share** is used sometimes in New Devs for collaborative work
  * **PowerShell**
  * PostgreSQL
  * Regex Previewer
  * Remote Explorer
  * Remote SSH
  * **Rewrap** lets you press Alt-Q to automatically wrap lines in commit messages
  * Tab Groups
  * **TODO Highlight** highlights keywords like ''TODO''

===== Settings and Configuration =====

If your server runs Linux and you get an error about the number of files in the workspace, you may need to [[https://stackoverflow.com/questions/53930305/nodemon-error-system-limit-for-number-of-file-watchers-reached#55543310|adjust the inotify file watch limit]].

To exclude compiler files from file search results, [[https://twitter.com/DeborahKurata/status/1674128560821538816|add **/.angular to the patterns that are excluded from search]].

===== File Associations and Syntax Highlighting =====

To make VSCode show the correct syntax highlighting for Template Toolkit files, edit your ''settings.json'' file to set ''files.associations'' as the following:

<code>
"files.associations": {
        "*.tt2": "html",
        "*colors.tt2": "perl",
        "*.css.tt2": "css",
    },
</code>

''*.js.tt2'' files are best displayed as HTML or Perl.

===== HTML in VSCode =====

VSCode supports [[https://docs.emmet.io/abbreviations/|Emmet syntax]] in new files, which can be very helpful for creating quick mockups.

With Emmet, you can quickly wrap a selection in an HTML tag. Press Ctrl-Shift-P to bring up the command palette, then type 'wrap' and press Enter. You will be prompted for the tag you want to wrap your selection with. If Wrap is your most recent command, you will be able to use it again without typing the word 'wrap'; you can just press Ctrl-Shift-P and then Enter when you see 'Emmet:Wrap' highlighted.

===== Git in VSCode =====

  * [[https://code.visualstudio.com/docs/sourcecontrol/overview#_vs-code-as-git-editor|Use VSCode as the editor for commit messages]]
  * [[https://code.visualstudio.com/docs/sourcecontrol/overview#_vs-code-as-git-difftool-and-mergetool|Use VSCode as diff, merge, and interactive rebase tools]]
  * Use the ''git.alwaysSignOff'' setting to [[https://github.com/microsoft/vscode/issues/83096|automatically sign off on commits]]

===== Command Line Tools for the VSCode Terminal =====

To open a file from the Terminal command line into a new window in the VSCode editor, use:
<code>
code path/to/filename.ext
</code>

To open the file in your current workspace (assuming the file exists somewhere in your working directory), use ''-r'':
<code>
code -r path/to/filename.ext
</code>

You can edit ''~/.bash_aliases'' to rename that command to something easier to remember, like...
<code>
alias vscode='code -r'
</code>

...which would allow you to edit the file with 
<code>
vscode path/to/filename.ext
</code>

See the [[newdevs:git:commands#aliases|aliases section of the Git Commands]] page for other bash aliases that might be useful in your workflow.

See the [[newdevs:landscape:tools]] page for other editors and development tools.