全栈工程师-前端开发-Prettier_Prettier在Angular项目中的实践.docxVIP

PAGE1

PAGE1

Prettier在Angular项目中的实践

1Prettier简介与安装

Prettier是一个流行的代码格式化工具，它能够自动格式化包括JavaScript、TypeScript、HTML、CSS在内的多种语言的代码，确保代码风格的一致性。在Angular项目中使用Prettier，可以简化团队成员之间的代码风格差异，提高代码的可读性和维护性。

1.1安装Prettier

在Angular项目中安装Prettier，可以通过npm或yarn进行。打开终端，运行以下命令：

#使用npm

npminstall--save-devprettier

#使用yarn

yarnadd--devprettier

2Angular项目中配置Prettier

配置Prettier，需要在项目根目录下创建或修改.prettierrc文件。以下是一个基本的配置示例：

{

semi:true,//使用分号

trailingComma:es5,//在多行列表的末尾添加逗号

singleQuote:true,//使用单引号

printWidth:100,//每行最大长度

tabWidth:2,//每个tab的空格数

useTabs:false,//不使用tab，使用空格

jsxSingleQuote:true,//JSX中使用单引号

arrowParens:always,//箭头函数的括号总是显示

endOfLine:lf//换行符使用LF

}

3Prettier与AngularCLI的集成

要将Prettier与AngularCLI集成，可以使用husky和lint-staged来在提交代码前自动运行Prettier。首先，安装这些依赖：

npminstall--save-devhuskylint-staged

然后，在package.json中添加以下脚本：

scripts:{

format:prettier--write\src/**/*.{ts,html,scss}\,

format:check:prettier--check\src/**/*.{ts,html,scss}\

}

接下来，在package.json中添加lint-staged配置：

lint-staged:{

src/**/*.{ts,html,scss}:[

prettier--write,

gitadd

]

}

最后，配置husky来在提交前运行lint-staged：

npxhuskyadd.husky/pre-commitnpx--no-pnplint-staged

4使用Prettier格式化Angular组件

Prettier可以格式化Angular组件的.ts、.html和.scss文件。例如，格式化一个组件的TypeScript文件：

//Before

constapp={

name:AngularApp,

version:1.0

};

//After

constapp={

name:AngularApp,

version:1.0,

};

HTML文件：

!--Before--

div

pAngularApp/p

/div

!--After--

div

pAngularApp/p

/div

注意，Prettier对HTML的格式化可能不如对JavaScript的格式化那么显著，但它仍然可以调整缩进和换行符。

SCSS文件：

//Before

.container{

width:100%;

height:100%;

background-color:#fff;

}

//After

.container{

width:100%;

height:100%;

background-color:#fff;

}

5Prettier在Angular项目中的自动化应用

为了确保所有团队成员的代码风格一致，可以设置CI/CD流程，在构建或提交代码前自动运行Prettier。例如，在GitHubActions中，可以添加以下工作流：

name:FormatCode

on:

push:

branches:

-main

jobs:

format:

runs-on:ubuntu-latest

steps:

-uses:actions/checkout@v2

-