2015-01-31 7 views
8

Ich habe erhabenen Text seit 2 Monaten und ich mag es wirklich so weit. Ich fange jedoch an, eckiges Designmaterial auf meinen Webapps zu implementieren, und ich habe ein Problem mit dem Einrückungsprozess: Es rutscht nicht gut ein und verschmiert mit der Struktur. Ich habe einen Screenshot an den unteren Rand des Beitrags gestellt.Angular JS (und besonders Angular Material Design) nicht gut Eindruck auf Sublime Text 3

FYI Ich habe keine Einrückung oder HTML-Syntax-bezogenes Paket installiert und ich habe die Standard-Einzug Einstellungen nicht geändert.

Wenn ich alle eckigen Material Design-Element aus meinem Code nehmen, funktioniert es gut, aber sobald ich ein <md-x></md-x> Tag hinzufügen, geht es wild.

Der Code funktioniert perfekt, aber es ist wirklich schwierig, so zu codieren.

Ich habe versucht eine saubere Installation von sublime Text 2 ohne Pakete oder gar nicht geändert und es funktioniert immer noch nicht gut. (Ich verwende erhabenen Text 3 für meine tägliche Kodierung).

Also meine Frage ist, wie kann ich das beheben?

Vielen Dank im Voraus und einen schönen Tag! ;)

PS: Der folgende Code ist eine Copy-Paste aus https://material.angularjs.org/#/getting-started mit Hass von meiner erhabenen Text 3 Eindringprozesses umformatiert.

<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> 

Antwort

3

Sie können einen Tastenkürzel zum Einrücken Ihres Codes erstellen. Um einen Tastenkürzel hinzuzufügen, müssen Sie die Option Einstellungen -> Tastenbelegung - Benutzer auswählen und die folgende Zeile hinzufügen.

Jetzt nur Strg + A in Ihrem Code und drücken Sie die Taste f5. Ihr Code wird korrekt eingerückt. Sie können einen anderen Schlüssel auch anstelle von f5 hinzufügen.

Auch für eine bessere Erfahrung von AngularJS auf sublime können Sie das folgende Plugin hinzufügen. https://github.com/angular-ui/AngularJS-sublime-package

+0

Danke, hat den Trick! * Daumen hoch * –

+0

@ QuentinVaucelle-Auzel Sie haben gerade das Paket installiert und dann die Standardeinrückung verwendet? Ich habe das gleiche Problem, aber das löst es nicht für mich. – Endanke

Verwandte Themen