Geek Answers Handbook

Angular JS (and especially Angular Material Design) do not deviate much from Sublime Text 3

I have been using sublime text for 2 months and I really like it. However, I am starting to implement angular design materials on my website, and I have a problem with the indentation process: it has no padding and does not interfere with the structure. I put a screenshot at the bottom of the message.

FYI I have not installed the indented package or HTML syntax, and I have not changed the default indentation settings.

When I extract the entire angular material design element from my code, it works well, but as soon as I add the <md-x></md-x> , it becomes wild.

The code works fine, but it is very difficult to code it.

I tried a clean installation of sublime text 2 without any packages or altogether changed and still does not work. (I use sublime text 3 for my daily coding).

So my question is: how can I fix this?

Thanks in advance for a nice day!;)

PS: The following code is a copy-paste from https://material.angularjs.org/#/getting-started , reformatted with hate, from my exalted text. 3rd indent.

 <html lang="en" ng-app="StarterApp"> <head> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.7.0/angular-material.min.css"> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body layout="column" ng-controller="AppCtrl"> <header> <md-toolbar layout="row"> <button ng-click="toggleSidenav('left')" hide-gt-sm class="menuBtn"> <span class="visuallyhidden">Menu</span> </button> <h1>Hello World</h1> </md-toolbar> </header> <div layout="row" flex> <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$media('gt-sm')"> </md-sidenav> <div layout="column" flex md-theme="green" id="content"> <md-content layout="column" flex class="md-padding"> <h2></h2> </md-content> </div> </div> <!-- Angular Material Dependencies --> <script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.7.0/angular-material.min.js"></script> <script src="js.js"></script> </body> </html>
+8
javascript angularjs sublimetext2 sublimetext3
source share
1 answer

You can create a keyboard shortcut for indenting the code. To add a key combination, you need to select the option Settings → Key bindings - user and add the following line.

 { "keys": ["f5"], "command": "reindent"}

Now just Ctrl + A in your code and press f5. Your code will be indented correctly. You can add another key instead of f5.

You can also add the following plugin for a better AngularJS experience on exalted. https://github.com/angular-ui/AngularJS-sublime-package

+3
source share

More articles:


All Articles