首页手记 Prettier项目实战：入门教程与实践指南

Prettier项目实战：入门教程与实践指南

标签：

前端工具

概述

本文将详细介绍Prettier的安装、配置、基本用法以及与各种编辑器和构建工具的整合。通过这些步骤，确保团队成员能够编写一致且美观的代码。文章将从介绍Prettier的概念开始，逐步展示如何安装、配置，以及如何在不同编辑器和构建工具中使用Prettier。最后，还将通过一个实战项目展示Prettier的实际应用。

Prettier简介与安装

什么是Prettier

Prettier 是一个广泛使用的代码格式化工具，能够自动地为代码应用一致的格式。它支持多种编程语言，如 JavaScript、TypeScript、Python、HTML、CSS 以及 YAML 等。Prettier 提供了一种统一的代码风格，帮助团队成员编写一致且美观的代码，减少了因风格差异造成的代码审查和维护工作。

Prettier 的主要特点包括：

强大的自定义配置能力，允许用户根据项目需求调整格式规则。
跨语言支持，能够处理多种语言的格式化需求。
集成到各种编辑器和构建工具中，无缝地融入开发流程。
与版本控制系统集成，确保代码提交的一致性。

安装Prettier

首先，需要确保已安装 Node.js，因为 Prettier 是一个基于 Node.js 的工具。可以通过官网下载安装包，或者使用包管理器如 nvm 来安装。

# 使用nvm安装Node.js
nvm install --lts

安装 Prettier 的过程相对简单，可以通过 npm 或 yarn 安装。

# 使用npm安装Prettier
npm install --save-dev prettier

# 或使用yarn安装Prettier
yarn add --dev prettier

配置Prettier

配置 Prettier 可以通过创建一个 .prettierrc 文件来实现。这个文件允许用户自定义代码格式化规则。以下是一个 .prettierrc 文件的示例：

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false
}

在这个示例中，配置项包括：

semi: 在语句末尾是否添加分号，设置为 true 表示启用。
singleQuote: 使用单引号还是双引号，设置为 true 表示使用单引号。
trailingComma: 在多行声明中添加尾随逗号，可以设置为 none、es5 或 all。
printWidth: 每行的最大字符数。
tabWidth: 缩进的空格数，设置为 2 表示使用两个空格。
useTabs: 是否使用制表符进行缩进，设置为 false 表示使用空格。

Prettier基本用法

格式化代码

Prettier 提供了多种命令行选项来格式化代码，可以通过以下命令格式化单个文件或整个目录。

格式化单个文件

npx prettier --write path/to/file.js

这将格式化指定的文件，并将结果写回到源文件。

格式化整个目录

npx prettier --write path/to/directory

这将递归地格式化目录中的所有文件。

示例代码

假设你有一个简单的 JavaScript 文件 example.js，内容如下：

const message = 'Hello, world!';
console.log(message);

使用命令行进行格式化：

npx prettier --write example.js

格式化后的代码如下：

const message = 'Hello, world!';
console.log(message);

自定义配置

在实际项目中，可能需要根据项目的需求调整 Prettier 的配置。可以通过创建一个 .prettierrc 文件来实现。

例如，假设需要在项目中使用更宽松的空格规则，可以在 .prettierrc 文件中进行如下配置：

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "arrowParens": "always",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "trailingComma": "none"
}

这些配置项可以根据项目的需求进行调整。

示例代码

假设你有一个简单的 JavaScript 文件 example.js，内容如下：

const message = 'Hello, world!';
console.log(message);

使用上述配置进行格式化：

npx prettier --write example.js

格式化后的代码如下：

const message = 'Hello, world!';
console.log(message);

Prettier与代码编辑器集成

VSCode集成实例

在 Visual Studio Code 中集成 Prettier 的步骤如下：

安装Prettier插件

打开 Visual Studio Code。
在左侧栏点击扩展按钮。
搜索 Prettier 插件。
点击 Install 按钮安装 Prettier 插件。

配置Prettier

安装完成后，配置 Prettier 以确保它使用正确的配置文件。首先，确保 .prettierrc 文件存在于项目根目录下。然后，打开 Visual Studio Code 的设置，找到 "Settings" 并打开。

在搜索框中输入 prettier，然后找到并开启 Prettier: Enable 设置。同时，确保 Prettier: Use A Specific Prettier Configuration 设置为 true，并且将 Prettier: Path To Prettier Config 设置为项目根目录下的 .prettierrc 文件的路径。

使用Prettier格式化代码

在 VSCode 中，使用快捷键 Shift + Alt + F 可以格式化当前文件。

示例代码

假设你有一个简单的 JavaScript 文件 example.js，内容如下：

const message = 'Hello, world!';
console.log(message);

在 VSCode 中使用 Prettier 格式化后，代码将变成如下所示：

const message = 'Hello, world!';
console.log(message);

Sublime Text集成实例

在 Sublime Text 中集成 Prettier 的步骤如下：

安装Prettier插件

打开 Sublime Text。
安装 Package Control 插件。
使用 Package Control 安装 Prettier - Code formatter。

配置Prettier

安装插件后，可以使用以下快捷键格式化代码：

Ctrl + Shift + P 打开命令面板。
输入 Prettier 并选择相应的命令。

示例代码

假设你有一个简单的 JavaScript 文件 example.js，内容如下：

const message = 'Hello, world!';
console.log(message);

在 Sublime Text 中使用 Prettier 格式化后，代码将变成如下所示：

const message = 'Hello, world!';
console.log(message);

Atom集成实例

在 Atom 中集成 Prettier 的步骤如下：

安装Prettier插件

打开 Atom。
在 Atom Packages 选项中搜索 Prettier。
点击 Install 按钮安装插件。

配置Prettier

安装插件后，可以通过以下步骤配置 Prettier：

在 Atom 中打开命令面板，输入 Preferences 进入设置。
在设置中找到 Settings 并打开。
确保 .prettierrc 文件存在于项目根目录下。
在 Settings 中找到 Prettier 选项，并确保 Use .prettierrc 选项设置为 true。

使用Prettier格式化代码

在 Atom 中，使用快捷键 Ctrl + Alt + P 可以格式化当前文件。

示例代码

假设你有一个简单的 JavaScript 文件 example.js，内容如下：

const message = 'Hello, world!';
console.log(message);

在 Atom 中使用 Prettier 格式化后，代码将变成如下所示：

const message = 'Hello, world!';
console.log(message);

Prettier与版本控制系统的整合

配置Git钩子

使用 Git 钩子可以确保在代码提交前进行格式化。

使用husky配置Git钩子

安装 husky：

npm install husky --save-dev

在 package.json 中配置 pre-commit 钩子：

{
  "scripts": {
    "pre-commit": "prettier --check ."
  }
}

使用 husky 来创建钩子文件：

npx husky install
npx husky add .husky/pre-commit "npm run pre-commit"

示例代码

假设你有一个简单的 JavaScript 文件 example.js，内容如下：

const message = 'Hello, world!';
console.log(message);

在配置了 Git 钩子后，每个提交前都会自动运行 prettier --check . 检查代码格式。如果格式不正确，提交将被阻止。

配置GitHub Actions

在 GitHub Actions 中可以配置持续集成来确保代码格式一致。

配置文件

创建 .github/workflows/format.yml 文件：

name: Format Code
on:
  push:
  pull_request:
jobs:
  format:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install Prettier
        run: npm install --global --save-dev prettier
      - name: Run Prettier
        run: npm run format

示例代码

假设你有一个简单的 JavaScript 文件 example.js，内容如下：

const message = 'Hello, world!';
console.log(message);

通过 GitHub Actions 的配置，在每次提交或拉取请求时，都会自动运行 Prettier 格式化代码。

配置GitLab CI/CD

在 GitLab CI/CD 中配置持续集成来确保代码格式一致。

配置文件

创建 .gitlab-ci.yml 文件：

stages:
  - format

format:
  stage: format
  script:
    - npm install --global --save-dev prettier
    - prettier --check .

示例代码

假设你有一个简单的 JavaScript 文件 example.js，内容如下：

const message = 'Hello, world!';
console.log(message);

通过 GitLab CI/CD 的配置，在每次提交时，都会自动运行 Prettier 格式化代码。

Prettier与构建工具的整合

Webpack配置Prettier

在 Webpack 中，可以使用 prettier-loader 插件来配置 Prettier。

安装依赖

npm install prettier prettier-loader --save-dev

配置Webpack

在 webpack.config.js 中配置 prettier-loader：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'prettier-loader',
          options: {
            semi: true,
            singleQuote: true,
            trailingComma: 'es5',
          },
        },
      },
    ],
  },
};

示例代码

假设你有一个简单的 JavaScript 文件 example.js，内容如下：

const message = 'Hello, world!';
console.log(message);

配置完成之后，Webpack 会自动使用 Prettier 格式化 JavaScript 文件。

Gulp配置Prettier

在 Gulp 中，可以使用 gulp-prettier 插件来配置 Prettier。

安装依赖

npm install prettier gulp prettier-loader gulp-prettier --save-dev

配置Gulp

创建 gulpfile.js 文件：

const { src, dest } = require('gulp');
const prettier = require('gulp-prettier');

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

exports.default = format;

示例代码

假设你有一个简单的 JavaScript 文件 example.js，内容如下：

const message = 'Hello, world!';
console.log(message);

运行 gulp 命令后，Gulp 会将 src 目录下的所有 JavaScript 文件使用 Prettier 格式化并输出到 dist 目录。

Grunt配置Prettier

在 Grunt 中，可以使用 grunt-prettier 插件来配置 Prettier。

安装依赖

npm install grunt-prettier --save-dev

配置Grunt

编辑 Gruntfile.js 文件：

module.exports = function(grunt) {
  grunt.loadNpmTasks('grunt-prettier');

  grunt.initConfig({
    prettier: {
      options: {
        singleQuote: true,
        trailingComma: 'es5',
      },
      all: {
        src: 'src/**/*.js',
        dest: 'dist',
      },
    },
  });

  grunt.registerTask('default', ['prettier']);
};

示例代码

假设你有一个简单的 JavaScript 文件 example.js，内容如下：

const message = 'Hello, world!';
console.log(message);

运行 grunt 命令后，Grunt 会将 src 目录下的所有 JavaScript 文件使用 Prettier 格式化并输出到 dist 目录。

Prettier项目实战案例

实战项目设置

为了展示 Prettier 的实际应用，我们将创建一个简单的项目，实现用户登录功能。

创建一个新的项目文件夹，例如 prettier-demo。
初始化项目：

cd prettier-demo
npm init -y

安装 Prettier 和相关插件：

npm install prettier --save-dev
npm install prettier-vscode --save-dev

创建文件结构：

mkdir src
touch src/index.js
touch .prettierrc

实战项目中使用Prettier

配置Prettier

编辑 .prettierrc 文件：

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false
}

编写示例代码

编辑 src/index.js 文件：

const message = 'Hello, world!';
console.log(message);

运行 Prettier 格式化：

npx prettier --write src/index.js

使用VSCode集成Prettier

安装 VSCode 插件 Prettier - Code formatter，并根据前面的步骤配置 VSCode。

使用Gulp集成Prettier

创建 gulpfile.js：

const { src, dest } = require('gulp');
const prettier = require('gulp-prettier');

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

exports.default = format;

运行 Gulp：

npx gulp

实战项目总结与优化

在实战项目中，我们通过配置 Prettier 的方式，确保了代码格式的统一和美观。通过在编辑器和构建工具中集成 Prettier，进一步简化了开发流程。

优化建议

自动化提交前格式化：使用 Git 钩子或 CI/CD 工具在每次提交前自动运行 Prettier。
持续集成：确保 Prettier 成为持续集成的一部分，确保代码格式在每次提交时都符合标准。
团队协作：确保团队成员都了解并使用 Prettier，避免因代码格式不同而产生的冲突。

通过这些优化，可以进一步提升项目的代码质量和开发效率。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

守着星空守着你

手记
篇

粉丝

39

获赞与收藏

267

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30583 343

网络编程入门教程

20个小节 12561 237

Pandas 入门教程

25个小节 18499 337

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Prettier项目实战：入门教程与实践指南

格式化单个文件

格式化整个目录

示例代码

示例代码

安装Prettier插件

配置Prettier

使用Prettier格式化代码

示例代码

安装Prettier插件

配置Prettier

示例代码

安装Prettier插件

配置Prettier

使用Prettier格式化代码

示例代码

使用husky配置Git钩子

示例代码

配置文件

示例代码

配置文件

示例代码

安装依赖

配置Webpack

示例代码

安装依赖

配置Gulp

示例代码

安装依赖

配置Grunt

示例代码

配置Prettier

编写示例代码

使用VSCode集成Prettier

使用Gulp集成Prettier

优化建议

阅读免费教程