Angular JS(尤其是 Angular Material Design)在 Sublime Text 3 上不能很
Angular JS (and especially Angular Material Design) don't indent well on Sublime Text 3
我已经使用崇高文本 2 个月了,到目前为止我真的很喜欢它。但是,我开始在我的 Web 应用程序上实现角度设计材料,并且我在缩进过程中遇到了问题:它不能很好地缩进并弄乱结构。我在帖子底部放了一个屏幕截图。
仅供参考,我没有安装缩进或HTML语法相关的软件包,也没有更改默认缩进首选项。
当我从代码中删除所有角度材料设计元素时,它运行良好,但是一旦我添加<md-x></md-x>
标签,它就会变得疯狂。
代码运行良好,但以这种方式编码真的很困难。
我已经尝试在没有软件包或根本没有更改的情况下全新安装崇高的文本 2,但它仍然无法正常工作。(我在日常编码中使用崇高的文本 3)。
所以我的问题是,我该如何解决这个问题?
提前感谢,祝你有美好的一天! ;)
PS :以下代码是通过我的崇高文本3缩进过程重新格式化 https://material.angularjs.org/#/getting-started 仇恨的复制粘贴。
<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>
您可以创建一个快捷键来缩进代码。要添加快捷键,您需要选择选项首选项 -> 键绑定 - 用户并添加以下行。
{ "keys": ["f5"], "command": "reindent"}
现在只需在代码中按 Ctrl+A 并按 f5 键。您的代码将正确缩进。您也可以添加其他键来代替 f5。
另外,为了在sublime上更好地体验AngularJS,您可以添加以下插件。https://github.com/angular-ui/AngularJS-sublime-package
相关文章:
- Angular JS IE9 Hashbang url rewriting
- 如何使用skip参数使用angular ui引导进行服务器端分页
- 在自定义mean.io包中使用angular-chart.js作为依赖项
- 无法在数据endVal中设置值=“”;{{ucount}}”;使用Angular JS的CountUp
- 如何将输入(type=text)从html表单传递到javascript函数
- 使用angular重定向到html页面
- angular.js没有'无法在PhoneGap中处理视图标记
- Javascript(Angular)从一个对象数组到第二个数组查找值
- angular 1.5应用程序中的导航栏
- angular的下拉菜单
- Angular只从数组中获取所需的数据
- Angular JS(尤其是 Angular Material Design)在 Sublime Text 3 上不能很
- angular.js - update `ng-model` with text.value
- 输入类型text和email在angular指令中的行为不同(双向数据绑定)
- 通过angular指令设置元素的属性text/value
- 当使用$http发送字符串请求时,请求体作为对象返回.Post (angular)和bodyparser.text()
- 在Angular中,如何使用input type=text字段来只接受数字、负号和小数,别无其他
- Sublime Text和Angular JS的问题
- Angular-ui select2 tagging -预选标签id/text
- 响应类型为text/plain的Angular资源总是生成一个字符串数组