Prettier - Githubissues

To further professionalize Collectome development, I've added Prettier to the frontend part of the project. Prettier automatically formats code to ensure consistency across developers. The result is usually nicer, but the most important thing is that the developer doesn't have to worry about code style at all. You can just write the way you want and Prettier will reformat it for consistency. Sometimes it does make strange decisions, but I found it didn't bother me most of the time. In one exception, I thought it was going overboard with index.html, so I told Prettier to ignore that file.

Prettier runs alongside ESLint, so I've tried to configure things so they don't conflict. There are some differences between our previous ESLint rules and the new Prettier style (single vs double quotes, dangling commas, and so on), but I decided to go with the Prettier defaults for simplicity.

I recommend setting up the VS Code Prettier extension. With the extension installed and configured, VS Code's Format Document and Format Selection commands will use Prettier, so you can easily see how Prettier will affect your code.

I added two npm scripts:

npm run prettier-check will print any files that need formatting
npm run prettier-write will format any files that need formatting

I recommend running these before committing code. In the future we can look into automating these checks with git hooks using something like husky.

dmreagan / collectome

Prettier #66