2015-01-31 10 views
8

Ho usato il testo sublime per 2 mesi e mi piace molto finora. Tuttavia, sto iniziando a implementare materiale di design angolare sulle mie applicazioni web e ho un problema con il processo di indentazione: non rientra bene e rovina la struttura. Ho messo uno screenshot nella parte inferiore del post.JS angolare (e in particolare il disegno di materiale angolare) non rientrano bene su Sublime Text 3

FYI Non ho installato indentazione o pacchetto relativo alla sintassi HTML e non ho modificato le preferenze di indentazione predefinite.

Quando togli tutto il materiale angolare di design dal mio codice, funziona bene ma non appena aggiungo un tag <md-x></md-x>, diventa selvaggio.

Il codice funziona perfettamente ma è davvero difficile codificarlo in questo modo.

Ho provato un'installazione pulita di sublime testo 2 senza pacchetti o modificata del tutto e non funziona ancora bene. (Uso il testo sublime 3 per la mia codifica quotidiana).

Quindi la mia domanda è, come posso risolvere il problema?

Grazie in anticipo e buona giornata! ;)

PS: Il seguente codice è un copia-incolla da https://material.angularjs.org/#/getting-started riformattato con l'odio dal mio processo di rientro del testo sublime 3.

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

risposta

3

È possibile creare un tasto di scelta rapida per il rientro del codice. Per aggiungere un tasto di scelta rapida è necessario selezionare l'opzione Preferenze -> Associazioni tasti - utente e aggiungere la riga seguente.

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

Ora basta Ctrl + A nel codice e premere il tasto f5. Il tuo codice sarà rientrato correttamente. È possibile aggiungere altre chiavi anche al posto di f5.

Anche per una migliore esperienza di AngularJS su sublime è possibile aggiungere il seguente plug-in. https://github.com/angular-ui/AngularJS-sublime-package

+0

Grazie, ha fatto il trucco! * thumbs up * –

+0

@ QuentinVaucelle-Auzel hai appena installato il pacchetto e poi hai utilizzato il rientro predefinito? Sto avendo lo stesso problema ma questo non lo risolve per me. – Endanke