Top Vscode Extensions for front-end developer

Hi everyone, i am The_olajumoke and i am a front-end developer(React.js). Vs code is a free, powerful, lightweight code editor for Windows, macOS and Linux and I'm going to be sharing Vs code extensions that help me effectively carry out projects.

Mithril Emmet

Emmet is a very useful extension for web developers, you can easily create your markup by writing in abbreviations that would expand into code snippets. It is known for greatly improving HTML and CSS workflow as it enables high speed coding and editing.

Live Server

Live server helps in solving the issue of having to go back and forth in seeing changes on your site. With the live-server extension, this process is automated for you. A local development server is created for you where you can automatically see your changes in VSCode.

Bracket Pair Colorizer

Bracket Pair Colorizer saves you the stress of searching for the opening and closing brackets. It makes it easy to identify each set of brackets by giving the same colors to your opening and closing bracket.

Live Share

Live Share quickly helps developers collaborate on projects without having to sync or clone code or even configure the same settings. You are able to share your code , edit and debug with your team or colleagues.

ESLint

ESLint is an extension that helps developers write clean code. it has the goal of making code more consistent and avoiding bugs. It has a list of lining rules that runs through the project to find errors or problematic patterns, which then alerts the developer of these errors.

Prettier - Code formatter

Prettier is widely used by developers because it helps in reformating your code to ensure consistent rules are being followed for spacing, semicolons, single quotes/double quotes, etc. It enforces a consistent style for your code and makes coding more defined.

Tailwind CSS IntelliSense

Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and lining.

Auto Rename Tag

As the name implies, it helps you automatically rename the opening or closing tag without having to go all the way down or up searching for the same tag to rename.

With these extensions, web development becomes easy, structured and more consistent. Installing these tools support your development workflow and helps you become a better developer. Feel free to comment on your best Vs code extension so far.