Web Development Extension Pack

A collection of essential extensions for web development based in Node.js, React, NextJS, Styled Components and GraphQL created by vinirossa.

Included extensions

Development Tools

• Prettier - Code formatter
• ESLint
• Auto Import
• Auto Rename Tag
• htmltagwrap
• CSS Peek
• Version Lens
• Code Runner
• Live Server
• Debugger for Chrome

Language Support

• Visual Studio IntelliCode
• npm Intellisense
• HTML CSS Support
• vscode-styled-components
• GraphQL
• Apollo GraphQL
• JavaScript and TypeScript Nightly
• Jest
• Sass
• EditorConfig for VS Code
• Markdown All in One
• DotENV
• YAML

Code Snippets

• HTML Snippets
• JavaScript (ES6) code snippets
• Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets
• ES7 React/Redux/GraphQL/React-Native snippets
• Next.js snippets
• Jest Snippet
• ExpressSnippet
• EJS language support

Want to install only some extensions?

To install only some of the fonts, just edit the package.json file removing the unwanted extensionPack consequences and then follow the procedures below to install locally.

How to develop and install locally

• Clone the repository

$ git clone https://github.com/vinirossa/vscode-webdev-pack

• Install vsce

$npm install -g vsce

• Create the extension package

$vsce package

• Install the extension via the .vsix file

1. Open VS Code
2. Select Extensions from the menu
3. Click More > Install from VSIX...
4. Select the reloaded-extension-pack-x.x.x.vsix file
5. Click Reload Now to reload the VS Code

For more information

• See my Github