CODEWITHSUNDEEP
keyboard-shortcutssublimetext3ubuntu-14.04
xkeshav
xkeshav

Reputation: 54022

need keyboard shortcut to change css code, inline to branched in ubuntu sublime text3

What is the keyboard-shortcut in sublime text3 (on ubuntu) change css from inline to branched ( I don't know what it called exactly ) and back

inline

body { background-color: #112D2A; font-size: 12px; margin: 0; padding: 0; font-family: Verdana, Geneva, sans-serif; }

I want to change above inline way css into branched way css

branched

body { 
      background-color: #112D2A;
      font-size: 12px;
      margin: 0;
      padding: 0;
      font-family: Verdana, Geneva, sans-serif; 
}

what I have tried

Ctrl+Shift+M select the content within {

Ctrl+Shift+Space select the content within { block by block

Ctrl+Shift+J doesnt' work

and if it does'n exist then how do we add in key binding, what will be argument?

Upvotes: 0

Views: 371

Answers (1)

try-catch-finally
try-catch-finally

Reputation: 7634

I used Sublime 3 only once to look for new features and as far as I know there'S no builtin one-click feature.

Beside writing your own plugin you might do this how I would do this by using the builtin multi-select/multi-caret feature:

Oneline to multiline

Line:

body { background-color: #112D2A; font-size: 12px; margin: 0; padding: 0; font-family: Verdana, Geneva, sans-serif; }

  1. Select the first semicolon (; means it's selected):

body { background-color: #112D2A; font-size: 12px; margin: 0; padding: 0; font-family: Verdana, Geneva, sans-serif; }

  1. Press Ctrl + D until you've selected all ;:

body { background-color: #112D2A; font-size: 12px; margin: 0; padding: 0; font-family: Verdana, Geneva, sans-serif; }

  1. Enter ; to get rid of the selections and to collapse the selection into multiple cursors after the semicolons (the | indicates the cursor):

body { background-color: #112D2A;| font-size: 12px;| margin: 0;| padding: 0;| font-family: Verdana, Geneva, sans-serif;| }

  1. Press RETURN to insert newlines:

body { background-color: #112D2A;
| font-size: 12px;
| margin: 0;
| padding: 0;
| font-family: Verdana, Geneva, sans-serif;
| }

  1. Press ESC to leave the multi select/caret mode
  2. Correct the break after the first curly brace.

Et voila.

After step 3. you might add another caret after the first curly brace by holding Ctrl and clicking at that place to skip step 6.

Multiline to oneline

Lines:

body {
   background-color: #112D2A;
   font-size: 12px;
   margin: 0;
   padding: 0;
   font-family: Verdana, Geneva, sans-serif;
}

  1. Add extra tab / space befor closing curly brace (see step 4)

body {
   background-color: #112D2A;
   font-size: 12px;
   margin: 0;
   padding: 0;
   font-family: Verdana, Geneva, sans-serif;
   }

  1. Place the cursor in the first column of the second line and press Shift + Alt + Down till the last line:

body {
|   background-color: #112D2A;
|   font-size: 12px;
|   margin: 0;
|   padding: 0;
|   font-family: Verdana, Geneva, sans-serif;
|}

  1. Press Backspace

body { background-color: #112D2A;| font-size: 12px;| margin: 0;| padding: 0;| font-family: Verdana, Geneva, sans-serif;| }

  1. Press DEL to delete the superflous space chars / tabs

  2. Press ESC to cancle the selection

Et voila.

Upvotes: 1

Related Questions