Javascript: add semicolon in correct position?


#1

Is there a way to add a semicolon in the correct position? When writing Javascript, I often find myself writing code like this:

var foo = function foo(a, b, c) {
    ...
};

The beginning of the line works nicely: I just type until I hit the open parenthesis. That will auto-close, positioning the cursor (caret?) between them. Good. So after I’m done with a, b, c I can either move the cursor to the right or hit the closing parenthesis. Then I type another space. And then I type the open brace. And that’s when it gets inconvenient because the brace auto-closes, positioning the cursor between the braces, but the semicolon at the end is missing. So then I hit Return, and this opens a new line for me, but then I have to move the cursor down to the closing brace and append the semicolon and then move up again to type the code I want.

What I want is for a way to have this happen automatically, i.e. either when I hit the open brace, not only append the closing brace but also the semicolon.

Or make ctrl-; not move the cursor. (Then I can hit it between the braces before hitting Return.)

Or something?


#2

Finishing a javascript function without a semicolon is valid syntax, even for JS Lint.


#3

I guess the same question applies to objects and they do require the semi-colon.

You could look at turbo-javascript or atom-semicolons and perhaps some other packages. Or coffeescript :wink:


#4

My understanding is that

function foo() { ... }

does not require a trailing semicolon, but

var foo = function foo() { ... };

is different. Of course, semicolons are auto-inserted anyway, but I prefer to add semicolons myself.


#5

JavaScript NEVER requires semi-colons


#6

It seems atom-semicolons just removes them. (Maybe I’m misunderstanding the code.) And I mentioned the turbo-javascript function ctrl-return in my original post.


#7

I wonder whether I can get used to that coding style… Somehow I’m really attached to these little buggers…


#8

JavaScript doesn’t require whitespace, either. Lots of people use semicolons to add clarity, and Atom should support that.


#9

Atom does support the use of semicolons. Let’s try to keep things in perspective.

@kgrossjo, I feel like what you’re asking for isn’t something that should be provided in the way you’re suggesting. Reading your description of the problem I thought, “Hey, maybe the bracket-matcher package could be extended to support this.” But as I was getting up this morning I thought better of it. We already have a system for doing stuff like this … snippets:

'.source.js':
  'function':
    'prefix': 'fn'
    'body': """
    function $1($2) {
        $0
    };
    """

You just type fn, press TAB, enter a couple things and :boom: you’ve got your semi-colon in the right spot.


#10

I would have never thought of snippets. Chic! Très chic!


#11

I also use a custom command to add a ; to the current line and a line break:

atom.workspaceView.command 'custom:semicolonize', ->
    editor = atom.workspace.getActiveEditor()
    editor.moveToEndOfLine()
    editor.insertText(";\n")

#12

It’s also worth looking at the snippets that the language-javascript package already provides. There may be snippets that work better for you or would help you make your own snippets better.


#13

@kgrossjo @DawnPaladin I was merely reminding that JS doesn’t require anything regarding semi-colons.

As for coding styles, I won’t engage in a discussion about what’s better or worst as I consider this as purely formal, and I have myself no problem switching from one convention to another when needed (even if I have my own preferences on the matter).

Regarding your initial question (way to ensure semi-colons insertion in specific situation), I think there’s really a room/need for a JS formatting package, I would like to see something in the mood of FDT AS3 formatter or what JDT formatter did for java code, with a complete UI and a preview of what the selected rules do. For reference, it seems there’s already some formatters for ES that could be used as a starting point for such package.
The solution @leedohm suggested is also a good option.


#14

Looking nice. Though I wouldn’t want the cursor to move. (Or I’d like that the cursor jumps back to where it was before, which has the same effect.)


#15

Another option to explore might be fixmyjs. It may, admittedly, do more than you’re looking to do, but it shares the motivation to make tools automatically fix what they know is “wrong”.


#16

For SublimeText there is a plugin called Auto Semicolon, I am working on one for Atom at the moment, I haven’t pushed it up yet but will if you would like to take a look.