2 Steps to Make Project Always in Dart Format
Tags: flutter, dart
Published: 2022-07-09 03:49:28

Maintaining flutter projects and open source packages, keeping all source in dart format is important to let other collaborators to review your PRs with ease and passing flutter analyse for package. Since most of my projects are on GitHub and GitLab, free monthly GitHub Action and GitLab CI helped me a lot.

## 1. Local Pre-commit Hook

I have added a pre-commit hook to my flutter project which can ensure the source fits dart format before commit.

1. open terminal goto `.git/hooks` and create a file `pre-commit`.
1. run `chmod +x pre-commit` to make the file executable. 
1. update the `pre-commit` file with following script.
1. a message will show and block the commit if the commit is not following dart format

```bash
#!/bin/sh

DARTFMT_OUTPUT=`dart format lib test | grep "0 changed"`
if [ -n "$DARTFMT_OUTPUT" ]; then
  echo "[pre-commit] All Dart files are formatted."
  echo "[pre-commit] $DARTFMT_OUTPUT"
  exit 0
else  
  echo "[pre-commit] Files are changed, please verify and re-attempt commit"  
  echo "[pre-commit] $DARTFMT_OUTPUT"
  exit 1

fi
```

## 2. Test Before Merge PR
Many platform provide custom CI action allow perform test before merging PR. For example, GitHub Action, GitLab CI and CodeMagic are able to conduct the format test. Depending on cost and platform using, no need to implement every platform. This move is to avoid the commits made by web portal causing incorrect format since some situations not every collaborators are developer. 
 
### GitHub Action

For project using GitHub, I will add a yaml file to `.github/workflows/`. For example, this is my `.github/workflows/dart-format.yaml` which will run once at pull request to avoid merging some reviews directly on web accidentally causing dart format incorrect.

```yaml
name: Dart-Format

on: [pull_request]

jobs:
  build:
    runs-on: ubuntu-latest

    container:
      image:  google/dart:latest

    steps:
      - uses: actions/checkout@v2

      - name: Print Dart SDK version
        run: dart --version
      
      - name: Verify formatting
        run: dart format --output=show --set-exit-if-changed .
```

### GitLab CI
Similarly, GitLab also can setup a file declare to do different action on different situation. I will create a `.gitlab-ci.yml` in the project. The following file will run the dart format checking when I pushed something.

```yaml
stages:   
	- test

dart-format-test:
   image: cirrusci/flutter
   stage: test
   script:
   - flutter format lib test --set-exit-if-changed
   only:
     - pushes
```

### CodeMagic
I have put the bash script which is the same as the local one to the pre-test part. If the format is not correct, it will soon stop further action and notify me.


![code magic pre-test script](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v8axpvarj8reykd2xwut.png)



**Support me if you like the content🍖**
[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/N4N8D1EWN)

**Connect🍻**
[![GitHub - MayLau-CbL](https://img.shields.io/badge/GitHub-MayLau--CbL-informational?style=for-the-badge&logo=github)](https://github.com/MayLau-CbL)

[![Twitter - @MayLauDev](https://img.shields.io/badge/Twitter-%40MayLauDev-informational?style=for-the-badge&logo=twitter)](https://twitter.com/MayLauDev)

[![Hashnode - @MayLau](https://img.shields.io/badge/Hashnode-%40MayLau-informational?style=for-the-badge&logo=hashnode)](https://maylau.hashnode.dev/)