Angular项目如何做代码格式规范

[deepthan]

angular项目如何做代码格式规范

代码规范插件

针对angular的风格指南,采用TSLint+codelyzer进行代码的规范检查，可以通过 tslint rules、Codelyzer core rules 找到每项规则的说明。

规则的写法要么是 boolean 类型，或者使用数组对该规则指定额外参数。

TSLint 有许多规则是针对任何 TypeScript，而 codelyzer 是专门针对 Angular

• Tslint详解
• TSLint 和 Codelyzer 核心规则

如何美化代码

TSLint 并不支持美化（虽然有几个项看起来像是在“美化”），而美化的工作取决于你采用什么 IDE。

EditorConfig

不建议依赖 IDE 默认的代码格式配置，所以就有一个 .editorconfig 组织来规范一些简单的统一规范配置。

Angular 项目时也会有 .editorconfig 的配置，虽然有这个配置文件，但在 VSCode 也有自己的一套规范并且优先级更高，所以要想让 EditorConfig 生效需要额外安装 EditorConfig for VS Code 插件。

Editorconfig 只包含一些最基础的项，要想让代码统一风格的美化还是需要更强大的 Prettier。

Prettier

它支持市场上许多语言，其中包含 TypeScript、HTML、Less 这一些都符合 Angular 项目的必备；你需要引入 prettier以及 VSCode Prettier - Code formatter 扩展。

• Prettier详解
• Prettier - Code formatter 详解

Prettier 配置

在根目录下创建 .prettierrc 配置文件以及 .prettierignore 忽略美化配置文件；Editorconfig 选项与 Prettier 选项高度重叠，并且后者会强制替换前者。

Prettier 与 TSLint

Prettier 配置 项会有部分与 tslint.json 项重复，例如：Prettier 的 printWidth 与 tsline.json 的 max-line-length，对于 Prettier 以她为优先，反之使用 ng lint 会以 tslint.json 优先。
这对我们来说有些困惑，TSLint 包含了一些代码”美化性"（例如：max-line-length），事实上，这更应该是 Prettier 的专长（所有配置都跟代码美化相关）。
好在 tslint-config-prettier 帮助清理这些可能会产生冲突规则的解决方案：

"extends": [
  "tslint:recommended",
  "tslint-config-prettier"
]

将 prettier 提供一种检查机制：

tslint-config-prettier-check ./tslint.json

你会发现默认的 Angular 项目中会有 max-line-length、object-literal-key-quotes、quotemark 三项是冲突的，我们可以关掉 tsline.json 这三项的配置，让 Prettier 来代替。

{
  "rules": {
    "max-line-length": [false, 140],
    "object-literal-key-quotes": [false, "as-needed"],
    "quotemark": [false, "single"]
  }
}

提交前自动检测格式并修复

安装 husky、lint-staged，并且对package.json做如下配置，即可向源码仓库 Commit 时自动先执行命令行并且不发生错误才会 git add

 "husky": {
    "hooks": {
      "pre-commit": "ng lint"
    }
  }