Research: Uniform coding style

[jamarob]

• what tools are there?
• can this be automated with github actions?

[arisslin]

There are a lot of linters, formater etc which we can use. They exist as VS-Code Plugin but also as npm package. I would recommend to use them as npm-packages in fact that than every cloned repo has the same linter and formater settings. The tools can get customized and automated for the workflow.

I would recommend following tools:

• prettier A code formater. In our project we can use it for JavaScript, JSX, JSON, HTML, CSS, SCSS, styled-components and many others. https://prettier.io/
• eslint A linter for JavaScript. Find and fixes problems in the code. Can get combined with plugins like prettier. https://eslint.org/
• eslint-plugin-prettier A plugin for eslint to use the linter with prettier. https://www.npmjs.com/package/eslint-plugin-prettier
• eslint-plugin-react A plugin for eslint to use the linter with react. https://www.npmjs.com/package/eslint-plugin-react
• eslint-config-prettier Turns off all rules in eslint that are unnecessary or might conflict with prettier. https://www.npmjs.com/package/eslint-config-prettier
• eslint-config-react-app This package includes the shareable ESLint configuration used by Create React App. https://www.npmjs.com/package/eslint-config-react-app
• husky Triggers npm scripts before git push or git commit. This is good for automatically let the linters and formaters check the code before push or commit code. https://www.npmjs.com/package/husky

Here is an interessting artical about combining all those plugins in VS Code: https://medium.com/technical-credit/using-prettier-with-vs-code-and-create-react-app-67c2449b9d08 Or here: https://medium.com/@haykerman/setting-up-eslint-prettier-for-react-app-in-vscode-8662de2d9a96

[arisslin]

GitHub Actions is a interessting tool. You can automate different steps in your development or deployment progress. For example after a PR you can start testing scripts and if they are all passed a build will be generated and deployed on your live or development server. Here is the ressource for further information: https://help.github.com/en/actions

There is also a GitHub Action for interacting with firebase: https://github.com/marketplace/actions/github-action-for-firebase

Here the marketplayce for more actions: https://github.com/marketplace?type=actions

At first i would recommend to use this to ...

• ... run tests automatically when a Code Review is done
• ... deploy the app on firebase after merging into master

[albert-schilling]

Great research, Andreas. I was wondering if you would recommend using create react app? After watching a tutorial on how to get react up and running without create react app, I tend to leave it out, since it brings a lot of implicit packages and configurations. For me as a rookie, this feels quite intransparent. What do you think? If we choose on setting up our project without create react app, then we can skip the eslint-config-react-app package.

Additionally, we could bring in the following packages:

parcel-bundler oder webpack 4.0 // Which build tool is best for react apps? I dunno...
babel-eslint 
eslint-plugin-import
eslint-plugin-jsx-a11y // for accessibility
eslint-plugin-react-hooks

What do you think?

I watched the Brian Holt Intro to React on Frontend Masters and felt the setup was quite reasonable.

[jamarob]

I suggest using cra

• its a proven standard, quick and fool proof
• a lot of other tools are capable of detecting cra projects and require no further configuration
• some hosters (like zeit.co) can autobuild from cra project repos
• we can always do npm run eject to ditch cra config later

[albert-schilling]

@jamarob Oh, these are some strong points for CRA. I wasn't aware of that.