在实际项目中，团队成员编写的代码样式往往不统一。 特别是前端代码。 例如，在JavaScript中，字符串可以是单引号' This is string '或双引号' This is string '。 对于JavaScript语言，这两种格式都是正确的，但对于项目，这是没有规范的表示形式。

今天，我们将共享名为prettier的前端工具，以实现前端项目的标准化。

创建

在Angular项目中集成prettier

angular项目

ng new prettierProject

安装premier页面

NPM install---save-dev---save-exact prettier

prettier配置

{

“单队列”: true，

' tabWidth': 2，

' trailingComma': 'none '，

' semi': true，

“bracketSpacing': false，

' printWidth': 140，

' overrides': [

{

' files': [

' *.json '，

'.eslintrc '，

'.tslintrc '，

'.prettierrc '

]、

'选项' : {

' parser': 'json '，

' tabWidth': 2

}

(，

{

' files': [

' *.ts '

]、

'选项' : {

' parser': 'typescript '

}

}

]

}

配置预览图像

在项目的根目录下创建. prettierignore文件：

package.json

package-lock.json

磁盘

. angulardoc.json

. vs代码/*

该文件告诉prettier不需要格式化这些文件。

配置prettier和tslint共存

NPM install-- save-devtslint-config-prettier

将以下配置添加到tslint.json文件中：

{

' extends': [

' tslint:latest '，

' tslint-config-prettier '

]

}

配置git hook

安装husky并创建Git hook

NPM install---- save-dev pretty-quick husky

将以下配置：添加到package.json中

' husky': {

' hooks': {

'预提交' : ' pretty-quick-- staged '

}

}