Visual Studio Code (VS Code) is a free, cross-platform source Code editor developed by Microsoft. Based on its rich plug-in system and language support, it has become the most flow integrated development environment. This article introduces some of the best front-end refactoring plug-ins I’ve used.

JavaScript Booster

JavaScript Booster is a code refactoring tool with a variety of coding operations, such as converting var to const or let, removing redundant else statements, and merging declarations and initializations. Just note the light bulb on the left and press it to see how to convert the code below the cursor.

Stepsize

Stepsize allows you to bookmark and report technical debt and code to be refactored. If you come across Code that needs refactoring, but you don’t have time to do it right away, you can make it visible and ask questions directly in VS Code.

Abracadabra

VS Code comes with some basic refactoring. Abracadabra uses a fast way for your editor to make quick fixes to suggest refactoring when appropriate, customize UX options to your needs, with.js,.jsx,.ts,.tsx and.vue files.

Glean

Glean provides refactoring tools for your React code base: extract JSX into a new component, transform class components into functional components, wrapped in Hooks. It allows you to extract JSX into new components, transform class components into functional components, and vice versa, wrap JSX with conditions, rename state variables and their setters, and so on.

SonarLint

SonarLint highlights errors and security holes as you write code and provides clear remedial guidance so you can fix them before your code is submitted. SonarLint in VS Code supports parsing JavaScript, TypeScript, Python, Java, HTML, and PHP Code.

Prettier

Prettier is a very popular extension that provides automatic code formatting for most programming languages, and is especially useful in HTML javascript and other languages.

Copyright notice, this article first in digital magic box www.dm2box.com/ welcome to reprint.