Scribd
Upload
7 views8 pages

Code Editors Extensions

The document outlines various extensions for three code editors: Brackets, Phoenix Code Editor, and Visual Studio Code, highlighting their functionalities such as code formatting, HTML generation, and FTP support. It also includes shortcuts for Phoenix Code Editor and a detailed list of useful extensions for Visual Studio Code, including Prettier, ESLint, and Live Server. These tools aim to enhance web development efficiency and improve code quality across different platforms.

Uploaded by

Nnaemeka Alumona
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views8 pages

Code Editors Extensions

The document outlines various extensions for three code editors: Brackets, Phoenix Code Editor, and Visual Studio Code, highlighting their functionalities such as code formatting, HTML generation, and FTP support. It also includes shortcuts for Phoenix Code Editor and a detailed list of useful extensions for Visual Studio Code, including Prettier, ESLint, and Live Server. These tools aim to enhance web development efficiency and improve code quality across different platforms.

Uploaded by

Nnaemeka Alumona
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

1.

BRACKETS EXTENSION

1. CanIUse

Quickly see the current level of browser support a certain web


technology has without leaving Brackets. This extension sources
its data from Can I use.

2. HTML Skeleton

HTML Skeleton helps you set up your HTML files quickly by


automatically inserting basic markup such as
the doctype declaration, <html>, <head>, <body>,
etc.Related: A Generic HTML5 Template

3. HTML Wrapper

Rapidly mark up a list of text into list items (<li>), table rows
(<tr>), hyperlinks, (<a>), and more with HTML Wrapper.

4. Brackets Icons

This is a super simple extension that adds file icons in


Brackets’s sidebar. The icons are excellent visual cues that
make it much easier to identify the file you’d like to work on.

5. Autoprefixer
Automatically and intelligently add vendor prefixes to your CSS
properties with the Autoprefixer extension. It uses browser
support data from Can I use to decide whether or not a vendor
prefix is needed. It’ll also remove unnecessary vendor prefixes.

6. JS CSS Minifier

This extension will remove unneeded characters from your


JavaScript and CSS files. This process is called minification, and
it can improve your website’s speed.

7. CSSLint

This extension highlights CSS errors and code-quality issues.


The errors and warnings reported by this extension are based
on CSS Lint rules.

8. Emmet

Emmet is a collection of tools and keyboard shortcuts that can


speed up HTML- and CSS-authoring.

9. Lorem Ipsum Generator


Need some text to fill up your design prototype? The Lorem
Ipsum Generator extension helps you conveniently generate
dummy text. (And if you need image placeholders, have a look
at Lorem Pixel or DEVimg.)

10. Beautify

This extension will help keep your HTML, CSS, and JavaScript
code consistently formatted, indented, and — most importantly
— readable. An alternative option to check out is the CSSComb
extension.

11. Simple To-Do

Make sure you don’t forget your project tasks by using the
Simple To-Do extension, which allows you to create and
manage to-do lists for each project within Brackets.

12. eqFTP

Transferring and syncing your project’s files to your web host or


server requires FTP or SFTP, but such a fundamental web
development feature doesn’t come with Brackets. To remedy
the situation, use the eqFTP extension, an FTP/STFP client that
you can operate from within Brackets.

2. PHOENIX CODE EDITOR


Extensions

 Phoenix extensions are tools/functionalities we can import


in Phoenix to make our life as a web developer much
easier
 Choose File > Extension Manger... or click the Extension
Manager icon in the right pane to open the Extension
Manager
 Install the following extensions:
o Emmet
o Color Highlighter

Shortcuts
shortcut action

CTRL+ALT+B Beautify code

CTRL+ALT+P Start Live Preview

CTRL+SHIFT+ Surround code with ...


A

CTRL++ Increase font size

CTRL+- Decrease font size

CTRL+/ One line comment

CTRL+SHIFT+/ Multi line comments

CTRL+E Quick edit CSS style on


element

ALT+click Multi cursors

3. VISUAL STUDIO CODE


1. Prettier

Prettier is a useful tool that automatically formats your code


using opinionated and customizable rules. It ensures that all
your code has a consistent format and can help enforce a
specific styling convention in a collaborative project involving
multiple developers.

The Prettier extension for Visual Studio Code brings about a


seamless integration between the code editor and Prettier,
allowing you to easily format code using a keyboard shortcut, or
immediately after saving the file.

2. JavaScript Booster

This extension upgrades Visual Studio Code with code actions to


perform common refactoring tasks that occur when
programming with JavaScript.

3. ESLint

ESLint is a tool that finds and fixes problems in your JavaScript


code. It deals with both code quality and coding style issues,
helping to identify programming patterns that are likely to
produce tricky bugs.

The ESLint extension for Visual Studio Code enables integration


between ESLint and the code editor. This integration allows
ESLint to notify you of problems right in the editor.
4. GitLens

GitLens is another powerful extension that helps you take full


advantage of Git source control in Visual Studio Code.

GitLens displays views containing essential repository data and


information on the current file, such as file history, commits,
branches and remotes.

5. Live Server

The Live Server extension for VSCode starts a local server that
serves pages using the contents of files in the workspace. The
server will automatically reload when an associated file is
changed.

6. CSS Peek

The CSS Peek Extension lets you quickly view the CSS style
definitions for various class names and IDs assigned in HTML.

There are three ways to use CSS Peek:

 You can hold down the Ctrl key and hover over a class name
or ID to peek at its definition.
 You can use a keyboard shortcut to open a persistent
definition window that displays the CSS definition of a class
name or ID.

 You can use a keyboard shortcut to navigate to where the


definition is located in its CSS file.

7. Intellisense for CSS Class Names in HTML

This extension can work hand in hand with CSS Peek, it provides
code completion for the HTML class attribute from existing CSS
definitions found in the current Visual Studio Code workspace.

8. JavaScript (ES6) Code Snippets

As the name suggests, this is an extension that comes fully


loaded with heaps of time-saving code snippets for JavaScript,
in ES6 syntax.

9. Visual Studio Intellicode

Artificial Intelligence continues to increase worker productivity


in various jobs, and developers are not left out. IntelliCode is a
tool that produces smart code completion recommendations
that make sense in the current code context.

10. VSCode Icons

Icon packs are available to customize the look of files of


different types in Visual Studio Code. They enhance the look of
the application and make it easier to identify and distinguish
files of various sorts.

You might also like