CODEWITHSUNDEEP
visual-studio-code
eryrewy
eryrewy

Reputation: 1093

How to add semicolon to the end of the line in visual studio code

I press Shift+Enter, but not working, Ctrl+Enter start a new line, but not add semicolon at the end of previous line. Is there a shortcut?

Upvotes: 106

Views: 138229

Answers (17)

Vadym
Vadym

Reputation: 1283

There is a way to have a semicolon appended automatically by VSCode.

By default this property is disabled:

  1. For Windows ctrl + ,
  2. For Mac cmd + ,

Settings -> in Search bar type: 'semicolon' -> change values to 'insert' for both JS and TS, save and close.

Now every time, on save, VSCode will look for missing semicolons inside the file you're in and append them.

Settings

Upvotes: 11

Zokirjon Gofurboyev
Zokirjon Gofurboyev

Reputation: 387

Best and easiest way is to enable it inside VS Code

Settings -> Search bar -> type 'semicolon'-> change default value of 'ignore' to 'insert' for both JS and TS -> Save and close

Whenever you press Ctrl + S, VS Code automatically inserts semicolons to places where it is missed

Upvotes: 1

mercury
mercury

Reputation: 2755

2021

settings >search for colon You will find a javascript option to insert the semi-colon.

Upvotes: 21

Gabriel Wu
Gabriel Wu

Reputation: 2086

You can try Semicolon Insertion Shortcut.

enter image description here

Upvotes: 0

Cesar Devesa
Cesar Devesa

Reputation: 1297

Add semicolon to the end of the line and go to the next line

Shortcode: ctrl+;

Install plugin: multicomando

ext install ryuta46.multi-command

Edit file: keybindings.json

// Place your key bindings in this file to override the defaults
[
    {
        "key": "ctrl+;",
        "command": "extension.multiCommand.execute",
        "args": { 
            "sequence": [
                "cursorEnd",
                { "command": "type", "args": { "text": ";" } },
                "lineBreakInsert",
                "cursorDown"
            ]
        },
        "when": "editorTextFocus"
    }
]
  • This plugin promotes a sequence of commands. Infinite possibilities!

I hope it helps someone!

Upvotes: 0

Hu Cai
Hu Cai

Reputation: 89

Add the following configuration in settings.json：

"css.completion.completePropertyWithSemicolon": true

or you can cancel by:

"css.completion.completePropertyWithSemicolon": false

other

"scss.completion.completePropertyWithSemicolon": true,
"less.completion.completePropertyWithSemicolon": true

Upvotes: 0

Ali Khani
Ali Khani

Reputation: 1

Go to settings: Look for this settings if you are writing javascript: enter image description here

And/or go to settings: Look for this settings if you are writing typescript: enter image description hereGo to settings: Look for this settings if you are writing javascript:

Format your code and semi colons will be added \o/ Yeah

*The catch: As the settings says: Your workspace needs to have typescript 3.7 or newer.

This solution works for me

Upvotes: 0

LightMan
LightMan

Reputation: 3575

(March 2022) Missing semi colons can be added automatically without the needing of an extension (*with a little catch ;) They are added every time your code is formatted.

Go to settings: Look for this settings if you are writing javascript: enter image description here

And/or go to settings: Look for this settings if you are writing typescript: enter image description hereGo to settings: Look for this settings if you are writing javascript:

Format your code and semi colons will be added \o/ Yeah

*The catch: As the settings says: Your workspace needs to have typescript 3.7 or newer.

Upvotes: 1

Duncan Faulkner
Duncan Faulkner

Reputation: 134

I know this is a really old post but Prettier - code formatter for vs code adds the semi colon (amongst other formatting).

ext install esbenp.prettier-vscode

Upvotes: 1

Drenai
Drenai

Reputation: 12357

There is no way to do it by default that I could find. I just had to make do as best I could.

I ended up adding a binding via File>Preferences>Keyboard Shortcuts, and then pressing ; after the shortcut. Having the semicolon is part of the binding is as close as I could get... at least my finger is already over that key

// Place your key bindings in this file to overwrite the defaults
[
    {
        "key": "ctrl+;",
        "command": "cursorEnd",
        "when": "editorTextFocus"
    }
]

This simply means that Ctrl+; brings you to the end of the line, and then tap ; again.

Update (May 2021)

Started using VSCode Vim keybindings extension a few months ago. Highly recommend it. Out of interest, semi-colon end of the line is A; with vim keys⌨️

Upvotes: 9

user3857864
user3857864

Reputation: 29

If you need semicolons on Javascript/Typescript using vscode do:

Settings

type "semicolon"

you will have options for Javascript & Tyepscript

select the "insert" option as desired

You can also select semicolons for css, less, or scss

/*******/

You can select the "Show matching extensions" and get some extra help with extensions that address the same issue.

Upvotes: 0

animeshNP
animeshNP

Reputation: 51

I just started using Visual Studio Code and felt this requirement myself yesterday. After a quick google search I found this nice extension called "Prettier". Being a little new to VSCode it took me a few hours to get it all setup but it works like a charm now. Here are the steps and my setup. I hope it helps others.

My coding environment: VSCode running on a Windows 10 desktop environment connecting to my codebase SMB share hosted on my development machine which is running Ubuntu server 18.04.

Solution Steps

  • Install node on the Windows desktop
  • Run, npm install -g prettier
  • Install the Prettier extension in VSCode

  • Edit the settings.json file for VSCode and add the following

        "editor.defaultFormatter": "esbenp.prettier-vscode",
     "[javascript]": {
          "editor.defaultFormatter": "esbenp.prettier-vscode"
     }
    // Set the default
    "editor.formatOnSave": true

  • Add the .prettierrc file at the root of my codebase on the ubuntu host (e.g.: /var/www/html/tutorials) with the following basic styling configuration

    {
      "semi": true,
      "trailingComma": "all",
      "singleQuote": true,
      "printWidth": 80
    }
  • Restart VSCode and open the code file
  • Use the existing VSCode keyboard shortcuts to apply formatting to the entire file (Ctrl+K Ctrl+F) or to a selection (Shift+Alt+F)
  • Or simply saving the file Ctrl+S adds the formatting while saving the file with no additional work required
  • Viola!

Upvotes: 5

koadesu
koadesu

Reputation: 81

Try install the following ext then use shortcut: Ctr+; (Cmd+;)

Upvotes: 8

ST7
ST7

Reputation: 2432

Now there is an extension called Colonize:

Shift+Enter Insert semicolon at the end of line and continue on the same line

Alt+Enter Insert semicolon at the end of line and continue on the new line

Ctrl+Alt+Enter Insert semicolon and stay at the same position

Upvotes: 143

fahirmdz
fahirmdz

Reputation: 17

Ctrl+Shift+P and open Preferences:Open keyboard shortcuts (JSON) in VS Code

and insert

{
    "key": "tab",
    "command":"cursorEnd",
    "when":"editorTextFocus"
}

tab is optional, ofc. Put whatever you want from the keys on the keyboard.

Upvotes: 0

weakish
weakish

Reputation: 29902

I wrote an extension to mimic IntelliJ's complete statement. Pressing ctrl+; (cmd+; on mac) appends ; to the line end, and moves cursor to line end. If the line already ends with ;, pressing ctrl+; just moves cursor to line end.

There is also experimental support for complete structures like class, interface, function, if, switch, for, and while. (Not understanding semantic of languages, so it may not work as you expected.)

You can install it as VSIX at GitHub.

The version vscode marketplace is outdated. (Unfortunately my M$ account has been suspended, thus I cannot update it.)

Upvotes: 14

dclark
dclark

Reputation: 371

Visual Studio Code doesn't appear to directly support adding a semi-colon to the end of a line via a keyboard shortcut, meaning it'll need a custom extension to support it. Fortunately, Sergii Naumov has created one for us, named (appropriately) 'Trailing Semicolon'.

To install this extension:

  1. Launch Visual Studio Code
  2. Press "Ctrl+P" (or "Command+P" on the Mac)
  3. type "ext install Trailing Semicolon" to search for the extension
  4. With the extension visible below the search box, click the Install Extension icon in the bottom right of the extension. (It's a cloud with an arrow pointing down...)

You will need to restart Visual Studio Code to enable the extension (Visual Studio Code should prompt you to restart once the extension has been successfully downloaded.)

According to Sergii, the default keybinding for the extension is "cmd+;". On my Mac, this meant pressing "Command+;", which worked great.

On my Windows 10 PC, I tried several key combinations ("Window+;" "Ctrl+;" "Alt+;" etc.), and nothing worked. I opened the Keyboard Shortcut preferences (File > Preferences > Keyboard Shortcuts) and searched for the new extension. I found it listed at the end of the keybindings:

{ "key": "win+;",                 "command": "extension.trailing-semicolon",
                                  "when": "editorTextFocus" }

The "win" key binding apparently doesn't work. I copied this binding to the keybindings.json file, changed "win+;" to "ctrl+;" and it worked like a charm!

Hope that helps.

Upvotes: 23

Related Questions