Home » Html » How do you refactor JavaScript, HTML, CSS, etc? [closed]

How do you refactor JavaScript, HTML, CSS, etc? [closed]

Posted by: admin November 29, 2017 Leave a comment

Questions:

I’m using Eclipse and the current solution (which I dislike) is to use “Search/Replace”. This is an error prone solution.

Do you know any better approach to refactor JavaScript, HTML, CSS resources safely in big applications? Or do you use any other cool refactoring tool(s)?

Answers:

IntelliJ seems to support Javacsript/HTML/CSS refactoring out of the box.

Questions:
Answers:

Eclipse Galileo for Java EE 3.5 has built-in support for JavaScript, with auto-complete, refactoring, etc. For HTML/XHTML/CSS, I’m not aware of any special features to ease refactoring apart from the project-wide search/replace.

From this point of view, IntelliJ IDEA seems thus to have much better support. See:

Questions:
Answers:

Because Javascript is weakly typed, effortless refactoring is nearly impossible. JetBrains Webstorm is the best thing out there that does something that “resembles” refactoring.

And please look at this comparison of Javascript refactoring of common Javascript IDEs : http://blue-walrus.com/2013/08/review-javascript-ides/

Questions:
Answers:

The trick is to maintain CSS clean and transparent from the beginning and clean it up as soos as things are starting to get messy.

CSS is one of those things that are terribly hard to clean up LATER.

Also, when naming selectors, choose names wisely in order to avoid coincidence with the other code of the application (at least when case-sensitive). This will help you with search & replace approach.

Questions:
Answers:

Check out CodeRush, a plugin for MS Visual Studio. It claims to support over 50 different refactorings for JavaScript.
How far did DevExpress get with Javascript refactoring?

Hope that helps!

Questions:
Answers:

One possibility that I’ve come across (though haven’t used extensively yet) for css is:
https://addons.mozilla.org/en-US/firefox/addon/5392

The Dustme Selectors firefox addon, which is supposed to let you weed out css selectors that aren’t used when you browse a subset of pages.

Another solution that I have used for minor css checks is:
http://www.cleancss.com/

Some of the “color word to color code efficiency changes” are probably very minimal unless you have a large number of occurrences of them, but it’s useful for analysis in general as well.