MAXIMAGO Essentials

A Visual Studio Code extension collection recommended by MAXIMAGO developers.

Unfortunately, VSCode currently does not support "soft" dependencies. Therefore, you need to install and then uninstall this extension in case you want to disable or remove specific extensions from the collection.

Code cxtensions

Code extensions add language features or other useful tools to the Visual Studio Code Editor.

• Angular Language Service

  Autocompletion for Angular HTML templates

• TSLint

  Forces compliance with configurable coding conventions in the IDE

• EditorConfig

  Overrides user/workspace settings in VSCode with settings specified in the file .editorconfig if one exists

• Debugger for Chrome

  Integrates Chrome Debugger for JavaScript/TypeScript into the internal VSCode Debug Window

• Prettier

  Code formatter for JavaScript, TypeScript and CSS

• Auto Import

  Adds TypeScript import statements to the context menu. Also works with relative paths!

• Docker

  Syntax highlighting, commands, linting etc. for Dockerfiles

• Auto Complete Tag

  Automatically closes HTML tags and renames opening and closing brackets synchronous

• Document This

  Generates JSDoc comments in JavaScript and TypeScript files

• Markdown Preview Github Styles

  Renders Markdown integrated in the IDE with well-known Github styles

• CSS Class Completion

  Autocompletion for CSS classes in HTML templates

Testing

These extensions support developers by integrating tests into the IDE:

• Jest

  Runs Jest tests in VSCode and renders the results in the IDE

• Wallaby.js (liable to pay costs)

  A high performance in-place runner for various JavaScript Testing Frameworks like Jasmine, Jest etc.

Editor Extensions

These extensions enhance the Visual Studio Code Editor and add useful features or information:

• GitLens

  Integrates git into VSCode - big time!

• Path Intellisense

  Autocompletion for relative paths within the application, e.g. for images, stylesheets etc.

• Settings Sync

  Synchronizes all local Visual Studio Code settings between different machines using Github Gists

• SVG Viewer

  Renders vector graphics integrated in VSCode

• Quokka.js

  Runs JavaScript code live in the IDE - like an interactive playground for code

• Rainbow Brackets + IndentRainbow

  The first extension colors pairs of brackets differently while the latter colors the indents of code blocks.

• Angular Switcher

  Switches between code, template, stylesheet and test of Angular components with shortcuts

• ActiveFileInStatusBar

  Displays the full path of the current file in the status bar

• AutoRunCommand

  Runs custom scripts when VSCode starts. Useful for Wallaby.js and other tools

• Color Highlight + Color Info

  The first extension underlines HEX colors values with the appropriate color in the editor. The latter displays additional information about CSS colors in a tooltip

• CSS Peek

  Displays a preview of CSS definitions when hovering the appropriate class in HTML templates

• CamelCaseNavigation

  Moves the text cursor to the next camel|hump instead of the beginning of the word when pressing CTRL+Left/Right. Love or hate!

Themes & Icons

Themes and icons change the visual appearance of Visual Studio Code:

• One Dark Material Theme

  A dark theme inspired by the popular Atom editor

• Ayu Theme

  A theme with bright colors and different backgrounds

• Material Icon Theme

  Icon pack in Google Material style

• VSCode Icons

  Various icons for different file types and directories