Babel (Formerly 6to5) VS ESLint

GitHub | Website

node 'node_modules/.bin/jest' '/Users/satparkash/code/test-app/src/A pp.test.tsx' -t 'App' FAIL src/App.test.tsx ● Test suite failed to run SyntaxError: /Users/satparkash/code/test-app/src/App.test.tsx: Support for the experimental syntax 'jsx' isn't currently enabled (6:12): 4 | describe('App', () => { 5 | it('should work as expected', () => { > 6 | render(); | ^ 7 | }); 8 | }); 9 | Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation. If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing. Test Suites: 1 failed, 1 total Tests: 0 total Snapshots: 0 total Time: 0.278 s Ran all test suites matching /\/Users\/satparkash\/code\/test-app\/src\/App.test.tsx/i with tests matching "App".

Webpack (Babel) - https://babel.dev/

I do appreciate your transparency, though I disagree with the sentiment that I’m arguing from a position of bad faith.

It’s a self-evident fact that the Babel team has not shown a moment of interest in lowering their role in the JavaScript ecosystem to anything short of kingmakers. Have a gander at their GitHub README and what do we see?[1]

- “Babel is a compiler for writing next generation JavaScript.” Indefinitely.

- Over a dozen sponsor logos. An embarrassment of riches.

- A literal audio recording of a song in praise of the project.

The Babel team has a well documented history of their priorities[2], emphasizing the need for a modular approach that has no exit strategy[3]. At best, we have a case of accidental entrenchment and long term dependence on the Babel brewing as early as 2017![4]

Compare this infinite circus to the humble but popular Normalize.css, which has the express purpose to stop existing.[5]

If the Babel team wants to raise some money, they can start by putting a plan together that would codify an exit strategy. It’s certainly more noble than their current plan of barnacling on to every NPM package…

- [1] https://github.com/babel/babel

- [2] https://github.com/babel/notes

- [3] https://github.com/babel/notes/blob/master/2016/2016-07/july...

- [4] https://github.com/babel/notes/blob/master/2017/2017-04/apri...

- [5] https://nicolasgallagher.com/about-normalize-css/

The problem was I had used some new code, Javascript's replaceAll(), that is unsupported by older browsers. And, the setup I have to automatically fix such issues (called babel) is out of date. So, while this problem appears to be resolved there, I hadn't updated that in awhile.

babel-loader(v9.1.0): allows transpiling JavaScript files using Babel and webpack.

created 6 years ago to solve the specific problem of managing the Babel repo packages

https://github.com/babel/babel/discussions/13013 maybe this could help

If you're a developer, you're surely familiar with Prettier and ESLint. With over 8 years of existence, they have established themselves as references in the JavaScript ecosystem.

eslint is used to avoid code errors

No lint errors: The committed code does not contain any lint errors (eslint).

Let’s walk through the steps for a one-time setup to configure husky pre-commit and pre-push hooks, ESLint with code styles conventions, prettier code formatter, and lint-staged. Husky automatically runs a script on each commit or push. This is useful for linting files to enforce code styles that keeps the entire code base following conventions.

GitHub | Website

ESLint: A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript.

ESLint

1. Lack of Static Code Analysis Static code analysis tools like TypeScript and ESLint play a crucial role in identifying and preventing bugs. TypeScript provides static typing, enhancing the robustness of the code. ESLint detects issues and enforces coding standards. The absence of these tools can significantly elevate the likelihood of bugs due to the lack of early detection and guidance provided during development.

The industry standard for JavaScript is ESLint. VS Code has an ESLint extension. Here is a guide.

All modern linters incorporate functionality for extending configurations, although the syntax for this is often implemented differently. Taking ESLint as an example, in its latest versions, the primary extension method is through the use of the spread operator. Let's take a look at an example: