Skip to content

A small collection of commonly used vscode extensions for front end web development

Notifications You must be signed in to change notification settings

AlbanyCanCodeCourses/fewd-extention-pack

Repository files navigation

ACC_FEWD_ExtentionPack

Click here to download this extention pack from the Visual Studio Code Marketplace

You may download this extention pack it from within VSCode by clicking View > Extentions then search for ACC_FEWD_ExtentionPack

The ACC_FEWD_ExtentionPack pack includes:

Why was this extention pack created?

This extention pack was created to help ACC Front End students streamline their workflow while working on their Front End Projects.

GitLens

GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

Git Lens for VS Code

Git Graph

View a Git Graph of your repository, and easily perform Git actions from the graph. Configurable to look the way you want!

Git Graph for VS Code

Git Blame

See Git Blame information in the status bar for the currently selected line.

Git Blame for VS Code

Git History

View git log, file history, compare branches or commits

Git History for VS Code

Path Intellisense

Visual Studio Code plugin that autocompletes filenames.

Path Intellisense for VS Code

Prettier

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Auto Rename Tag

Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

Auto Rename Tag for VS Code

ESLint

Integrates ESLint into VS Code. If you are new to ESLint check the documentation.

CSS Peek

This extension extends HTML and ejs code editing with Go To Definition and Go To Symbol in Workspace support for css/scss/less (classes and IDs) found in strings within the source code.

CSS Peek for VS Code

Color Highlight

This extension styles css/web colors found in your document.

Live Server

Launch a local development server with live reload feature for static & dynamic pages.

Live Server for VS Code

Live Share Extension Pack

This extension pack includes everything you need to start collaboratively editing and debugging in real time, including integrated audio and text chat. This provides you and your team/class with a one-click installation, in order to begin pair programming, performing remote code reviews, driving interactive lectures, and more, without needing to leave Visual Studio Code.

Live Share Extension Pack for VS Code

Material Icon Theme

The Material Icon Theme provides lots of icons based on Material Design for Visual Studio Code.

Material Icon Theme for VS Code

Quokka.js

Quokka.js is a rapid prototyping playground in your editor, with access to your project’s files, inline reporting, code coverage and rich output formatting. Runtime values are updated and displayed in your IDE next to your code, as you type.

Quokka.js for VS Code

Quokka Statusbar Buttons Extension

Adds buttons to the status bar in Visual Studio Code (VSC) to control Quokka:

Statusbar Buttons Extension for VS Code

VS HTML to CSS

Generate CSS classes from HTML structure

VS HTML to CSS for VS Code

HTML to CSS autocompletion

Intellisense suggestions/completions for classes and ids from markup documents to CSS, SCSS, Less, Sass, Stylus stylesheets

HTML to CSS autocompletion for VS Code

About

A small collection of commonly used vscode extensions for front end web development

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published