Menu
I've been using sublime text for 2 months and I really like it so far. However, I am starting to implement angular design material on my webapps and I have an issue with the indentation process : it doesn't indent well and mess with the structure. I have put a screenshot at the bottom of the post.
FYI I have no indentation or HTML syntax related package installed and I didn't change the default indentation preferences.
When I take all the angular material design element out of my code, it works well but as soon as I add a <md-x></md-x> tag, it goes wild.
The code works perfectly well but it's really difficult to code that way.
I've tried a clean install of sublime text 2 with no packages or changed at all and it still doesn't work well. (I use sublime text 3 for my everyday coding).
So my question is, how can I fix that?
Thanks in advance and have a nice day! ;)
PS : The following code is a copy-paste from https://material.angularjs.org/#/getting-started reformatted with hate by my sublime text 3 indentation process.
<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>
713
You can create a shortcut key to indent your code. To add a shortcut key in you need to select the option Preferences -> Key Bindings - user and add the following line.
{ "keys": ["f5"], "command": "reindent"}
Now Just Ctrl+A in your code and press f5 key. Your code will be indented properly. You can add other key also in place of f5.
Also for better experience of AngularJS on sublime you can add the following plugin. https://github.com/angular-ui/AngularJS-sublime-package
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
