How do you refactor JavaScript, HTML, CSS, etc?

Question

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)?

Seems like there is no answer nowadays. God save the "Search/Replace". Amen. — Alex Siman, Sep 28 '09 at 20:55
@OliverWatkins ... and you are using a loosely-typed language... — SnakeDoc, Dec 13 '13 at 19:03

score 5 · Answer 1 · answered May 12 '11 at 01:44

5

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

answered May 12 '11 at 01:44

ripper234

222,824
274
634
905

score 4 · Answer 2 · answered Sep 18 '09 at 19:21

4

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:

answered Sep 18 '09 at 19:21

Pascal Thivent

562,542
136
1,062
1,124

3

Eclipse's Javascript refactoring is not very good. It NPEs whenever you try to extract method, and its rename misses regularly. – Sean McMillan Jul 14 '10 at 22:03

Oliver Watkins · Answer 3 · 2013-10-01T09:37:16.687

4

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/

edited Oct 01 '13 at 09:37

answered Feb 13 '13 at 14:45

Oliver Watkins

12,575
33
119
225

score 2 · Answer 4 · answered Sep 18 '09 at 18:56

2

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.

answered Sep 18 '09 at 18:56

3

What if you inherit a project with hundreds of JS source files and realize that a variable has a misleading name? Wouldn't automatic refactoring help? – hidarikani Dec 31 '13 at 16:41
Surely this applies to all languages? The reasoning suggests that refactoring is something done by people who just can't write good code... – Joe Jul 11 '16 at 15:39

score 1 · Answer 5 · edited May 23 '17 at 10:29

1

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!

edited May 23 '17 at 10:29

Community

1
1

answered Oct 19 '10 at 22:09

Raja

2,846
5
19
28

You definitely shouldn't do JS development in MS Visual Studio. – Aleks N. Aug 19 '12 at 17:00

Kzqai · Answer 6 · 2009-11-24T22:34:13.433

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.

How do you refactor JavaScript, HTML, CSS, etc?

6 Answers6

Linked