setup with VSCode & CodePen

Visual Studio Code is the text editor I use most for web development and the one the textbook will assume you’re using. It’s free, robust, easy to learn, and there are lots of great free extensions available; it also can function as a full-service IDE, though most of you won’t need that capability for this class. Learn how to use extensions to customize and enhance your VSCode experience here.

Here are the extensions I use and recommend for web development in my own VSCode implementation. Click on the name of each to learn how to use it.

  • Open in Default Browser: allows you to launch a preview of your web app directly from an html document
  • Auto Close Tag: automatically adds closing tags to your HTML/XML code
  • Auto Rename Tag: when you rename an opening HTML/XML tag, automatically changes the closing tag to match
  • Color Highlight: displays swatches of and highlights CSS colors in your code for easy identification
  • Paste and Indent: automatically adds the appropriate indents to code pasted into your project
  • Path Intellisense: autocompletes filenames within your project
  • Beautify: automatically formats JS, JSON, HTML, CSS, and SASS code
  • Project Manager: allows you to switch easily between projects that are active in your editor

VSCode also offers lots of styling options through colors, themes, and icons. Use whatever you like best. Here’s one of my favorites:

However, you’re welcome to use any text editor you like, or to try Brackets instead.

The beautifully designed and web-optimized Brackets text editor is another very nice entry-level web development environment.

Here are some good Brackets extensions for beginners. There are lots of others out there, though, so make sure to explore the Extension Manager.

  • Beautify: organizes your code, adds consistent indents, and generally makes it pretty with just a click
  • Brackets File Icons adds file icons to the Brackets file tree on the left-hand side of the editor; makes it easier to identify documents and document types
  • Swatcher: generates color hints and palettes and includes its own color picker
  • Lorem Pixel allows you to generate dummy images to use as placeholders in your designs
  • Code Folding lets you collapse longer portions of your code into a single line for easier readability
  • Color Picker is a simple, CSS-optimized color picker extension
  • CSScomb will sort your CSS properties within each selector declaration in a predefined order, which helps maintain a uniform code style and improves readability
  • Live Reload monitors changes in the file system and refreshes your projects automatically
  • CSSLint flags errors in your CSS

COMP 126 students are also asked to create a free account at Codepen…

…which I’ll use for lots of demos and examples. It’s both a simple, quick online web development environment and a vibrant web dev community–a great place to explore, learn from, revise, experiment with, and appreciate other developers’ work.