(upbeat music)
- Let's run through why
a good editor is so important.
Syntax highlighting is definitely top of my list.
Code is instructions for a machine,
but it's also read by humans,
ourselves and our collaborators.
And being able to tell what the language keywords are
at a glance is really helpful.
All editors recommended here let you switch themes
so you can get the colors just how you like them to.
So looking at this,
this is the editor that's just built into macOS,
and I have this really small JavaScript file here.
You can see I've got stuff like spell checking
that I don't really care about
and I can't really tell what anything is.
Contrast that with the same file in Visual Studio Code.
So I can tell just at a glance what everything is here.
All of my language keywords are highlighted in blue,
the comments are green, strings are red,
much, much better.
Most editors also include specific kinds of enhancements
that go beyond reproducing exactly what we type.
We type lots of punctuation in JavaScript,
of course, as you can see here.
So having an editor that manages quotation marks,
parentheses, brackets,
and all that kind of stuff saves keystrokes.
So for example, if I were to type a new function here,
I type one paren and I get both of them there,
and they're automatically matched.
And if I delete that first one, they both go away.
Likewise, my braces, if I start typing a string.
So that kind of enhancement might seem rather small
but as you're typing lots and lots of code,
it gets to be really, really helpful.
Some editors also include tools like Emmet
that can make writing blocks of HTML and CSS a lot easier.
So for example, if I create a new file here,
and I'll switch it using the mode selector to HTML,
I can type CSS-type syntax.
And you can see that I have this pop-up that says
it recognizes this as an Emmet abbreviation.
So if I hit the Tab key,
I get a whole bunch of nested divs, just like that.
And there are abbreviations for CSS and HTML
built in right out of the box.
So that can make building a website a lot faster.
Another thing that most editors do
is opening a folder of files and treating them as a project.
Visual Studio Code can do this.
It's a giant file explorer, so I can see everything.
And the other nice thing about this
is that once opened as a project,
there's often a command to open
any file in the project by name.
So in Visual Studio Code, out of the box,
on a Mac that's Command + P.
And now I can start typing
anything that I happen to know is in the project
and it will show up.
Really useful.
Another big one is search and replace,
especially across many files.
Writing code or markup
we want not to repeat ourselves as much as possible.
So when it's time to change something
in a bunch of different places,
it's crucial to have search and replace
that's easy to use and powerful.
One specific thing that's usually important to me
is regular expression support,
which is a way to describe what you're searching for
it in a more abstract way.
I've been using BBEdit on the Mac for a long, long time.
And as much as I enjoy other editors,
whenever I have to do multi file,
regular expression based searches,
I always go back to BBEdit.
It's manual has an overview of learning regular expressions
that I found to be really helpful in days of yore
when I was first getting started with this stuff.
This is an example
of a really simple regular expression type search.
I turn it on by enabling Grep here, this checkbox.
And then I get syntax highlighting
for the special parts that are regular expressions.
So in this case, I'm looking for every script tag
that starts with HTTP and I'm changing them to HTTPS.
So the scripts are going to stay the same
but I'm just changing the path,
so they are loaded over a secure protocol instead.
And this little bit of garbage here
that you may not recognize is a regular expression
that I can then substitute in the replacement like this.
So what that means is that if I start back at the top
of the file,
now I can do a clever search and replace.
I can do a replace and find all the way down
and it switches all of this out.
Now, of course, with only these five script tags,
I could have done this in a much more simple way.
But if you had some resources that you wanted loaded
over HTTP and some that you wanted loaded over HTTPS
for some reason, being able to restrict it in this way
using regular expressions is really helpful.
So that's just a very, very tiny example
but something that could be worth looking into later.
So let's talk about some of the available options
for editors.
Sublime Text is one that is wildly popular.
It is technically paid, but it has a very generous
free trial, very worth exploring.
There are several open source options
that are also completely free:
Visual Studio Code;
there's also Brackets from Adobe and Atom from GitHub;
and then finally, there's my old friend, BBEdit,
which I just love and always have to mention,
but it is available on the Mac only.
As with Sublime, it's a commercial product,
but there is a very generous free trial
that is basically unlimited.
If you're a web designer or developer
with a bit of experience,
you probably already have an editor that you like
but you might not have tried an IDE.
Editors like Sublime, Visual Studio Code,
and other recent editors are closing the gap
with more traditional IDEs with plug-ins and so forth.
But with a purpose-built IDE,
you get a lot of extra smarts out of the proverbial box,
both about JavaScript and about your own site or project.
You open a folder in the IDE
and it does a bunch of analysis on your code,
building a knowledge base that it uses to help you.
Some examples of the things that make an IDE great
are debugging JavaScript everywhere.
So this means not just in the browser
but also on the command line
or any place else that you might run
into JavaScript somehow.
Usually an IDE is going to be able to handle that.
I should mention that IDEs are not the only place
where you'll see at least some non browser-based debugging.
Like Visual Studio Code, for example,
has some quite robust tools built-in
for debugging command-line JavaScript.
Code completion is a feature that you'll see
in many regular editors, but it's much better in IDEs
most of the time.
Because of the static analysis
that an integrated development environment does
on your code, not only will it be aware
of JavaScript's language keywords and that sort of thing,
but it will also know about all the code
that you have written yourself, all the function names,
all the classes, all that sort of thing,
and it'll be able to complete those names
as you start to type them,
saving lots and lots of keystrokes.
It will also know about any frameworks you've imported,
jQuery, React, all that sort of thing.
Mistake avoidance is another feature
of IDEs that's particularly helpful.
This can range from things like parameter hints,
which help you figure out what order the parameters
might go in and what those values are
for a given function, warnings for violations of strict mode
or other things that you might only see
when you load your JavaScript in a browser;
an IDE can usually tell you those beforehand.
And then other inspections and linting,
linting meaning error checks,
checks against coding standards, that sort of thing.
Full project navigation and search.
Again, this is something that you'll often see
to a certain degree in editors as well.
But I'm talking about things that go beyond go to line
or go to a certain file.
There's also symbol inspection.
So you can go to a particular file where a certain function
is defined for example.
And then finally refactoring assistance.
So this is like search and replace
but it's more context aware and smart.
So it's one thing to rename a string,
but it's another thing when your IDE can tell you,
do you want to do a search and replace
for this particular string and say
just your code comments or just where it's used
as a function name, that sort of thing.
So here are some options for IDEs that you might want
to explore.
WebStorm and PhpStorm from JetBrains are commercial products
with very generous free trials.
I happen to use PhpStorm in most of my work
because I do JavaScript and PHP development.
And PhpStorm basically wraps WebStorm with PHP as well.
Komodo IDE from ActiveState is another
very popular commercial product, very polished.
NetBeans from Apache is totally free.
And then the Eclipse project
from the Eclipse Foundation is also free.
So they're all worth checking out.
If you've never used one before,
checking out WebStorm or PhpStorm
is what I would recommend first.
Even if you can't afford to pay for them,
the free trials will let you explore what the options are
and then maybe help guide you
into things that you will find useful
with some of the other free options.
So that's an overview of some of the things
that are great about editors and IDEs.
It's a very personal choice,
and I recommend you check out all the options
that are available and see what fits with you.
(upbeat music)