prettier自动格式化去换行的实现代码

Prettier 自动格式化去换行的实现

Prettier 是一款代码格式化工具，能够自动为代码添加缩进、格式化代码样式等特性，并且运行速度较快，常用于开发中的自动化构建流程中。Prettier 在格式化代码时会默认去掉多余的换行，本文将详细介绍 Prettier 自动格式化去换行的实现。

安装 Prettier

使用 npm 命令安装 Prettier

npm install prettier --save-dev

Prettier 配置文件

在项目根目录下创建 .prettierrc 或 .prettierrc.json 文件，并添加以下内容：

{
  "printWidth": 80,
  "trailingComma": "none",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

• printWidth: 指定每行代码字符数，超出则换行，建议设置为 80
• trailingComma: 控制对象、数组字面量末尾是否添加逗号
• tabWidth: 表示一个制表符等于几个空格，默认为 2
• semi: 控制是否添加分号
• singleQuote: 是否使用单引号代替双引号

配置编辑器

在 VS Code 中，按下 Ctrl + .，选择 Configure Language Specific Settings...，在弹出的窗口中添加配置：

"[javascript]": {
  "editor.formatOnSave": true
}

这样在保存 js 文件时会自动调用 Prettier 进行代码格式化。

配置构建工具

在构建工具（如 webpack、gulp 等）中，通过引入 Prettier 插件实现代码格式化：

const prettier = require('prettier');

gulp.task('js', function() {
  return gulp
    .src('src/js/*.js')
    .pipe(prettier())
    .pipe(gulp.dest('dist/js'));
});

以上是通过 Gulp 构建工具配置的，代码会自动将 src/js/*.js 下的文件格式化后输出到 dist/js 下。

示例一

原代码：

function getData(){
return {
id: 1,
name: 'test',
age: 18
}
}

使用 Prettier 格式化后：

function getData() {
  return {
    id: 1,
    name: "test",
    age: 18
  };
}

可以看到，使用 Prettier 格式化后，代码自动添加了缩进，并在大括号内去除了多余的空格。

示例二

原代码：

function getData(){return{id:1,name:'test',age:18}}

使用 Prettier 格式化后：

function getData() {
  return {
    id: 1,
    name: "test",
    age: 18
  };
}

可以看到，Prettier 不仅添加了缩进，还自动将代码格式化成多行的形式，去掉了多余的空格和换行。