Angular JS（尤其是 Angular Material 设计）在 Sublime Text 3 上的缩进效果不佳

Question

我已经使用 sublime text 两个月了，到目前为止我真的很喜欢它。但是，我开始在我的网络应用程序上实施 angular 设计 material 并且我遇到了缩进过程的问题：它不能很好地缩进并且弄乱了结构。我在 post 的底部放了一张截图。

仅供参考，我没有安装缩进或 HTML 语法相关包，也没有更改默认缩进首选项。

当我从我的代码中取出所有 angular material 设计元素时，它运行良好，但一旦我添加 <md-x></md-x> 标签，它就会变得疯狂。

该代码运行良好，但以这种方式编写代码真的很困难。

我已经尝试过全新安装 sublime text 2，没有任何软件包或根本没有更改，但它仍然无法正常工作。（我在日常编码中使用 sublime text 3）。

所以我的问题是，我该如何解决这个问题？

提前致谢，祝您有愉快的一天！ ;)

PS ：以下代码是 https://material.angularjs.org/#/getting-started 的复制粘贴，由我的 sublime text 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>

Answer 1

您可以创建一个快捷键来缩进代码。要添加快捷键，您需要 select 选项 Preferences -> Key Bindings - user 并添加以下行。

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

现在只需在您的代码中按 Ctrl+A 并按 f5 键。您的代码将正确缩进。您也可以添加其他键来代替 f5。

另外为了更好的在sublime上使用AngularJS可以添加如下插件。 https://github.com/angular-ui/AngularJS-sublime-package

Angular JS（尤其是 Angular Material 设计）在 Sublime Text 3 上的缩进效果不佳

Angular JS (and especially Angular Material Design) don't indent well on Sublime Text 3

javascript

angularjs

sublimetext2

sublimetext3