standardize our prettier automatic code editing

@trtincher

Overview

In the dev meeting @trtincher and @martham0 noticed that our code extensions were changing the code in our pull requests unintentionally. We need to come up with a solution to standardize this.

Action Items

Come up with a solution
get bonnies approval
finish writing out issue

Resources/Instructions

Possible solutions

github actions
CI tools (travis ci or jenkins)
addition to readme
.prettierrc file

This will be looked at further in break out rooms.

@drubgrubby

@drubgrubby and I are going to meet this week to go over this issue

@dmcneary

Good source from @dmcneary https://mskelton.medium.com/auto-formatting-code-using-prettier-and-github-actions-ed458f58b7df

@drubgrubby

@drubgrubby @ahdithebomb @martham0 @dmcneary @hackforla/owners @ExperimentsInHonesty @pawan92

This is a demo repo with GitHub action configured to run prettier on all pull request.

I believe you can check it out in action by creating a pull request with weirdly formatted js,md and json files .
Before we add the new GitHub action to run prettier on pull request we should first run prettier on master and apply all the necessary changes

Blockers

Needs approval

Resources/Instructions

Create a GitHub action with the code snippet below

name: Format
on:
  pull_request:
    branches: [master]
jobs:
  format:
    runs-on: ubuntu-latest

    steps:

    - name: Checkout
      uses: actions/checkout@v2
      with:
        ref: ${{ github.head_ref }}

    - name: Prettify code
      uses: creyD/prettier_action@v3.1
      with:
        # This part is also where you can pass other options, for example:
        prettier_options: --write **/*.{js,md,json}

    - name: Commit changes
      uses: stefanzweifel/git-auto-commit-action@v4.1.2
      with:
        commit_message: Apply formatting changes
        branch: ${{ github.head_ref }}

Output of running prettier on master as it is.

@cnk

@cnk - We are looking at implementing something to clean up and standardize code being submitted. We have started down a path using Prettier, which seems promising and @akibrhast has done some great testing and research.

In your advisory capacity, can you suggest how best to proceed in implementing something like this? It seems like it could be a great benefit, but I can see how it might cause some problems if not implemented carefully. Being the careful one, I want to make sure we're doing our due diligence.

Do you have any thoughts on this? Thanks.

I have some serious reservations about automating changes to our html/md files because they contain a mix of html, javascript, and Liquid template tags. We have already released a couple of bugs because someone's code editor "fixed" some things it did not understand.

Do you have a link to anything showing that prettier understands Liquid?

Something like https://prettier.io/docs/en/precommit.html would be a bit safer - but then everyone would have to have node installed to work on the project.

@akibrhast

@akibrhast - (From cynthia) "Do you have a link to anything showing that prettier understands Liquid?"

@cnk

@cnk @drubgrubby
According to this, it seems that it Shouuuuld be fine ... 😅 😅 😅 😅
https://prettier.io/blog/2018/05/27/1.13.0.html#preserve-liquid-tag-contents-4484-by-duailibe

Navigation Menu

Repository navigation

standardize our prettier automatic code editing #935

Overview

Action Items

Resources/Instructions

Blockers

Resources/Instructions

11 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

standardize our prettier automatic code editing #935

Description

Overview

Action Items

Resources/Instructions

Activity

pawan92 commented on Feb 14, 2021

jbubar commented on Feb 14, 2021

ItsLaszlo commented on Feb 17, 2021

akibrhast commented on Feb 17, 2021

Blockers

Resources/Instructions

akibrhast commented on Feb 17, 2021

drubgrubby commented on Feb 17, 2021

cnk commented on Feb 17, 2021

drubgrubby commented on Feb 17, 2021

akibrhast commented on Feb 18, 2021

11 remaining items

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions