pwadev

Progressive Web Apps Development

Version 0.1.5 : 2019-07-12, 10:59:16

Work in Progress

Site Menu

VScode

VScode

Vscode is an alias for the Microsoft Visual Studio code editor

  • VScode is a lightweight open-sourced desktop editor than runs on Linux, Macs, and Windows

  • VScode is Central Command for creating, testing, and deploying PWAs, such as this one

  • It is used for creating and editing web standard HTML, CSS, JavaScript, and Markdown source files

  • VScode has built-in git

  • The built-in command line interface is used to interact with Gatsby, GitHub, and Netlify

Features

Multi-root Workspaces - One can work with multiple project folders in VScode with multi-root workspaces. This can be very helpful when working on more than one projects or repo at a time. For example, one may want in the same workspace the product’s documentation repo and the product source code repo.

  • Simple to use builtin git commands user interface that enables using source control management without leaving the editor, including viewing pending changes diffs.

  • Customize options.

  • Look and feel customization

  • Built-in command line terminal

  • Syntax highlighting, bracket-matching, auto-indentation, box-selection, snippets, etc…

  • Built-in support for IntelliSense code completion, rich semantic code understanding and navigation, and code refactoring.

Extensions

Checkout the VScode Market Place for extensions

Some usefull VScode extensions used to develop this site are:

  • Bookmarks
  • Bracket Pair Colorizer
  • Change-case
  • Code spell checker
  • Dracula Official Theme
  • File Utils
  • file-icons
  • Git history
  • Gitflow 4 Code
  • GitLens
  • GraphQL for VScode
  • Instant Markdown
  • Markdown All in One
  • Markdown shortcuts
  • One Dark Pro
  • Project Manager
  • Text Manipulator
  • Vscode Icons

Markdown Preview

VScode supports Markdown files out of the box. Start writing Markdown text, save the file with the .md extension and then toggle the visualization of the editor between the Markdown and the VScode rendering preview of the Markdown. VScode automatically synchronizes the Markdown editor and the preview views. Rendering is basic Markdown

In the Gatsby develop mode, navigate in the browser to the Markdown page being edited. Refresh the page after a VScode save. Setting a VScode user preference, clicking on the browser will do a VScode save and refresh the page. Rendering is exactly the same as when rendered in the user’s browser

The VScode Instant Markdown Extension instantly delivers a preview of a Markdown file as it is being edited in the instant-markdown browser tab without having to do a VScode save when using the Gatsby develop app. Rendering is basic Markdown

Bottom Line

Probably the best Central Command and text editor I’ve used