DEV Community

Kevan Y
Kevan Y

Posted on

Release 0.3 - Part 1 External Project Contribution

For release 0.3, I started to contribute on Heptagram repo. The notice that they migrated their website into React. I found out that they do not have prettier set up for the new React project. So I created an issue and asked to be assigned to work on that issue ✨❓ Feature Request: Add Prettier config.

I first started to install prettier, and add a script for it, one for checking and the other one for writing.

 "prettier": "prettier --write \"./**/*.{md,jsx,json,html,css,js,yml}\"",
 "prettier-check": "prettier --check \"./**/*.{md,jsx,json,html,css,js,yml}\""
Enter fullscreen mode Exit fullscreen mode

After that, I made .prettierrc.json and add some rules.

    "arrowParens": "always",
    "bracketSpacing": true,
    "embeddedLanguageFormatting": "auto",
    "endOfLine": "lf",
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxSingleQuote": false,
    "proseWrap": "preserve",
    "quoteProps": "as-needed",
    "requirePragma": false,
    "singleQuote": true,
    "tabWidth": 4,
    "trailingComma": "es5",
    "useTabs": false,
    "vueIndentScriptAndStyle": false,
    "printWidth": 100
Enter fullscreen mode Exit fullscreen mode

I committed and pushed my change to remote, then I created a PR for asking if the prettier format is ok before I run a prettier on all files which change the whole project file format.

After receiving confirmation that everything is okay. I run npm run prettier to change all the files and commit my change then after a few hours my PR got merged.

Top comments (0)