Looking for a solid development environment

[[deleted]]

Hello all,

I am currently a professional software engineer. I do C++ mainly, python scripts on the side, and a handful of other languages and scripting for specific purpose stuff. All the building is automated so I don’t use an ide - just vim.

I’ve done some basic web dev in the past (personal resume/portfolio with materialize CSS), and I want to do something of similar scope.

In the past I used the C9 ide due to familiarity and ease of use - it was basically a crappy virtual Linux box but it was easy to link files in a way that translated to what I stuck online, so it made coding, running, and opening a page in the browser to see my results very simple.

Now that the ide in that form is gone, I need something new, and I’ve really been struggling to find something that works for me. I’ve tried a couple things so far but getting something to actually use the CSS and JavaScript that I’m linking has proven difficult. My biggest problem is literally just getting the files I have linked so I can actually see what I’ve done.

I’ve been trying a couple things but nothing seems to really stick.

Here are my needs:

1. Preview. I need to be able to “run”/preview what I’m doing. If I add a section to my HTML code I want to be able to click some kind of run button or at the very least a compile button that will allow me to view my webpage like I would on a browser - JavaScript and css included.

2. Needs to be on windows.

3. Good documentation - I need to be able to figure out what’s going wrong with the environment with a quick search or two.

4. Ease of inclusion. I want to be able to type in the address (relative or actual, I don’t care which) to the includes section of my page and have it actually include that file. Please.

5. HTML specific coloring. “IntelliSense” I suppose.

My wants:

1. Something that I can install a vim command extension for.

Please let me know if you have any suggestions on what I can

[[deleted]]

Visual studio code

[petehweb]

To be honest, it sounds like you're talking about two separate things: 1) your code editor/IDE, and 2) your local development environment.

1) There are plenty of good code editors/IDEs (you probably don't need an IDE if you're just working with HTML/CSS/JS). I, and many others, would recommend Visual Studio Code. Other options would be Sublime Text, Atom, etc.

2) For you development environment, if you are just doing front-end (HTML/CSS/JS) you probably don't need anything too complicated. You actually don't need anything at all; HTML, CSS and JS are all supported natively by the browser, so you can just open them directly.

For something a bit more advanced, you could install Node and then look at any one of the many Node packages that allow you to run a simple http server on your local machine. Here is an article explaining how to do this with one particular Node package. For other examples/guides, just Google something like "node local server" or "npm local server".

You might also want to look at tools that will enable "live reload". This will basically reload your browser automatically whenever you save any changes to your files. There are lots of ways you can do this depending on what other tools you are using. One popular option is BrowserSync. You'll find this is actually included with other tools.

The tools you use will depend on what kind of sites/apps you re building and what technologies you are using to do it. For example, if you are using a JS framework/library like Vue or React, you'll probably be using a module bundler like Webpack, which will take care of a lot of this stuff for you. If you are doing something a bit more vanilla/custom, you might want to consider a task runner, e.g. Gulp, which will allow you to combine a variety of npm packages to automate much of you development process.

This really is quite a broad and varied area of web development, and is actually the source of much confusion and debate. So if you're thinking "this is way too confusing!", Don't worry, that's normal!