prettier VS Drawflow

Have you ever used a transpiler, a linter or a code formatter, such as: Babel, ESLint or Prettier? If the answer is yes, then you've already used metaprogramming! 👏

Prettier is an opinionated code formatter, it enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary. It is very useful to keep your code readable and make sure that the code format stays consistent when working in a team.

Professional: also set up Prettier, its IDE extension, and use VS Code's "Format on save" feature (or whatever other IDE's equivalent) to quickly and easily format your code to a consistent standard that you define in the configuration for ESLint and Prettier.

Like many developers I have used prettier for a long time for most of my projects. It has been the go-to formatting tool for front-end developers and for a good reason. It provides opinionated formatting with minimal options. This coupled with a wide IDE support makes it easy to setup and user.

Prettier is an opinionated code formatter. Let's install it.

Prettier works with lots of languages. Not just js. Check it out: https://prettier.io/

✅ Angular 15 ✅ Angular Material ✅ Unit Testing with Jest ✅ End-to-End Testing with [TestCafé](https://testcafe.io/ ✅ Internationalization with Transloco ✅ Auto documentation with Compodoc ✅ Analyse your project with webpack-bundle-analyzer ✅ Docker ✅ ESLint ✅ Prettier ✅ Commit Linting ✅ AuditJS Audit this application using Sonatype OSS Index ✅ Auto-generate a CHANGELOG with auto-changelog

Prettier is an opinionated code formatter, it enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary. It is very useful to keep your code readable and make sure that the code format stays consistent when working in a team. It also supports many programming languages such as : JavaScript, TypeScript, CSS, GraphQL, JSON and much more.

Resources: https://reactnative.dev/ https://eslint.org/ https://prettier.io/ https://marketplace.visualstudio.com/itemsitemName=kisstkondoros.vscode-codemetrics

I also found LeaderLine and a more complex one, the DrawFlow. The Drawflow one will hard, as the project is on prod and we didn't used canvas. We drag'n'drop on grid and flex lists.

The closest thing I've stumbled uppon is Drawflow, which seems to be made specifically for Vue although it also offers a vanilla JS api. Problem with that is that it's fancy but it's missing a bunch of features, for example custom nodes seem to be created using (don't quote me on this) a plain innerHTML = operation, even if you set the Element as an object (link here) by "registering" it as the documentation says.