#ESLint
FYI – I’m available for #coaching / #teaching / conference talks / shorter #freelancing gigs (1-2 days at a time)
I’m right now primarily focusing on my own projects but happy to share my experience with others + never wrong to refill the wallet a bit.
Topics I’m extra thrilled about: #TypesInJS #vanillaJS #nodejs #fastify #opensource #npm #eslint #linting #maintainership #restAPI
Another day fighting with #eslint. :/
#Development #Explorations
Speeding up the JavaScript ecosystem: Polyfills gone rogue · You wanted a banana and got a jungle https://ilo.im/1599o9
_____
#WebDev #Polyfills #Npm #Dependencies #Eslint #Frontend #JavaScript
And as is typical, of course I finally come across the actual solution (well, at least a single working one) after complaining publicly about it. For anyone else wondering: Go to Extensions, search for @builtin, and in the Features section there's one named TypeScript and JavaScript Language Features. Right click -> Disable (for workspace), reload. #eslint #javascript #typescript #vscode
What's the fastest way to temporarily disable all JS/TS linting in VSCode? I do not care about lint errors when I'm trying to edit merge conflicts, jesus christ it is annoying how VSC really doesn't make much of a separation between these when browsing files. Frankly disabling linting should be a shortcut toggle button somewhere right down in the status bar #eslint #javascript #typescript #vscode
#TypeScript question.
Can i somehow force other devs to NOT use`===` to compare class instances?
Example:
```
class User {
constructor(private id : number) {}
equals(comparedUser : User) {
return this.id === comparedUser.id;
}
}
const userA = new User(123);
const userB = new User(123);
console.log(userA === userB); // => wrong usage returns false
console.log(userA.equals(userB)); // => correct usage returns true
```
Playground: https://www.typescriptlang.org/play?#code/MYGwhgzhAECqEFMBO0DeAoAkMA9gOwgBckBXYQnJACgAckBLANzEIWnoBNoAuaPEgLYAjZAEo0AX3RYEARxJgQEKrgE0wSBB3jIecREnEZMmTYRJI80QgAt6EAHSdoAXjfRV6zdoNOOAbiwpKXRcAkJoEgMAQVc+BAB3fWQqAEYAJgBmUUCwokiDACE4vETk6gzswND8CBwQBAcQHABzKijkWLcXAuRCnOgAekHXAD5oBKR8FoKwFrYzCwJoADNFRBqCesbmto6kaIc5BSV2otEB4bGPSk1yWfnoRcsYYhIEdCA #ESlint
Pour harmoniser le code de tous mes devs #javascript, j'utilise une seule installation globale de #ESLint (https://eslint.org/) (npm install -g eslint).
Mais les #plugins eslint sont résolus par rapport au fichier de configuration d'eslint.
Pour aussi utiliser les plugins installés globalement, il faut lancer eslint avec l'option --resolve-plugins-relative-to
Config VSCodium:
"eslint.options": {
"resolvePluginsRelativeTo": "/home/<user>/.local/lib/node_modules"
}
This is mad 🤯
oxc - The Oxidation #Compiler is creating a suite of high-#performance tools for the #JavaScript / #TypeScript language re-written in #Rust - by Boshen:
https://github.com/web-infra-dev/oxc
It's linter is 50 - 100 times faster than #ESLint...
https://github.com/Boshen/bench-javascript-linter
...and its parser is even 2x faster than #swc
https://github.com/Boshen/bench-javascript-parser-written-in-rust
#JS tooling goes brrrrrrrrrrr! 🚀
Has anyone had success using Tailwind with Astro in VSCode? Turns out the Headwind extension, which I use to sort Tailwind classes on save, doesn't work on Astro files. I spent a couple hours last night trying to setup ESLint/Prettier to get the same functionality but I had a lot of issues. If anyone has a repo they could point to where that is working, please let me know.
Recently, been building my own #eslint config file and taking the opportunity to try the new flat-config format. And just to make something different and learn something, why not make it just import the needed configs automatically via a CLI?
Also, this way is possible to easily make the configuration have hierarchy lake the .eslintrc format in monorepos
So it could be helpful on repos with different environments, or when having different "presets" of configs that want to use on your projects
You know the situation has got out of hand when you have to extract & publish a package to minimise the overhead of configuring your #JavaScript / #TypeScript projects :farnsworth: .
I'm almost ashamed of publishing this stuff ( https://www.npmjs.com/package/@coderspirit/eslint-config ) to #NPM, but it's too tedious to keep in sync and up to date my #ESLint and Prettierjs across all my projects.
Also: many people fall into cargo-cult practices, they don't even know why their config is like that 🐸
The #ESLint plugin for exhaustive deps in #react development is quite condescending to mature react developers. Yes, not only the react team is able to provide stable functions you can safely close over. However, the plugin never learned to support a list of functions that are known to be stable.
So we either have to live with no warnings at all (and miss potential issues), or live with a ton of warnings where we visually have to inspect whether the warnings consist of false positives only.
Well, that's a way to name a coding style rule that prevents == in favor of === instead: "eqeqeq"
#eslint
Oh hell, there is new work on the horizon. TypeScript #ESLint v6 just came out (https://typescript-eslint.io/blog/announcing-typescript-eslint-v6/), but ESLint 9 not yet, which adds a new config format (https://eslint.org/docs/latest/use/configure/configuration-files-new), and everything is going to be broken when it comes to code style tooling for the next 12 months, I fear.
#JavaScript
💻 There is this common (mis)belief about #Prettier alone to be more than enough to enforce a strict and opinionated style guide. And that #ESLint stylistic autofixable rules are mostly redundant and even almost deprecated.
I'd say it's the opposite, and it's absolutely possible to have only ESLint for all the stylistic issues you can imagine (including ruining everything by line length ofc). Not to mention a smart mix of both tools.
Here is one rule I can't live without https://eslint.org/docs/latest/rules/padding-line-between-statements
💻 "Format Code Action" VSCode extension is an alternative solution to combined tools such as "VS Code Prettier ESLint":
https://github.com/rohit-gohri/vscode-format-code-action
So that you can compose both #ESLint and #Prettier official extensions manually in whatever way.
Just faced Prettier v3 migration issues train https://github.com/idahogurl/vs-code-prettier-eslint/issues/171 → https://github.com/prettier/prettier-eslint/pull/901 and decided to go back to the old solid approach.
Today's my first day trying #deno.
Not sure how I feel about the built in #linter and formatter yet; me and #prettier are besties, and I have gotten used to #eslint
Still gonna give it a try.
#webDev #nodejs #node #npm #npmjs #javaScript #programming #code #dependencies
# Miss this week’s newsletter? Get guidance & rec’s on how to address #eslint findings in #SharePointFramework projects 👉 https://www.voitanos.io/blog/navigate-eslint-sharepoint-framework-projects-guidance
Got a new release candidate for my @eslint config tools. Still debating whether to keep @eslint/js as a dependency, might move it to peer.
Backwards compatibility is also restored now, so this release candidate should work with existing legacy config setups, including new rules from extending recommended configs from plugin authors :)
#JavaScript #TypeScript #ESLint #CI
https://github.com/foxkit-js/eslint-config-foxkit/releases/tag/v3.0.0-rc1
Learn how to handle #ESLint build-time errors, modify rules, and selectively disable rules in #SPFx projects AND get my rec’s… that’s tomorrow’s newsletter! Subscribe today so it’s in your inbox tomorrow! #microsoft365dev #sharepointframework https://www.voitanos.io/newsletter
Wenn man #ESLint in einem Projekt einrichtet, nachdem es schon eine Weile existiert. 😅
Komplett vergessen das einzurichten und nun… Offenbar ein paar Flüchtigkeits"fehler" gemacht. :D
Und ja, ich stelle mir selbst bei meinen eigenen Projekten Pull Requests und reviewe sie.
Good explanation of the differences between a linter and a formatter.
@mvsde I’ll probably go with #dprint instead of #prettier if I go beyond what #eslint still supports stylistically.
dprint feels as un-opinionated and configurable as ESLint whereas Prettier is quite opinionated.
Looked at it? https://dprint.dev/
Also check out my personal extended #StandardJS configuration for @eslint (targeted at #TypesInJS projects): https://github.com/voxpelli/eslint-config
Feel free to use it or to be inspired by it for your own #ESLint configs.
Stepped in these last few days and did some long overdue releases of #StandardJS despite having lots of else on my plate currently.
New releases of:
- https://github.com/standard/standard-engine/releases/tag/v15.1.0 (First in three quarters!)
- https://github.com/standard/eslint-config-standard/releases/tag/v17.1.0 (First in a year!)
- https://github.com/standard/standard/releases/tag/v17.1.0 (First in a year!)
- https://github.com/standard/semistandard/releases/tag/v17.0.0 (First 17.x release, first release in almost 2 years!)
If you like what I do, consider sponsoring me: https://github.com/sponsors/voxpelli
New post: ESLint fan? Curious about ESLint? I wrote a post about it with the best of the tool:
ESLint v8.40.0 released
https://eslint.org/blog/2023/05/eslint-v8.40.0-released/
#ES_Next_News #ECMAScript #JavaScript #ESLint
To make #TypeScript ensure you're writing safe code, you need to properly configure it, but proper configuration is really messy, and tools like #ESLint don't even support it. So you are left with the single TSConfig that makes TypeScript lie and deceive you.
This is the state of modern #JavaScript development experience.
Also #react mit #bootstrap und #typescript ist ja schon klasse fürs #Frontend, wenn man es denn mal so hinbekommt, dass es das macht was man will - mit dem #javascript wie ich es kenne, hat das aber überhaupt nichts mehr zu tun:
Allein den Editor #VScodium so zu trimmen, dass #prettier und #eslint mit den Konfigs in #react zusammenarbeiten war echt nervtötend.
Für das Backend mit #python #cgi wird das nicht so nervenaufreibend werden, hoffe ich...
#TIL there is a #eslint cli flag `--report-unused-disable-directives`
https://eslint.org/docs/latest/use/command-line-interface#--report-unused-disable-directives
I've got such a weird problem; it looks like #eslint is running in it's own thread. So when running `yarn lint` it finishes, then 5 seconds later it takes over the console again with the actual output. This is causing havoc!
Any ideas? #JavaScript #JS #Code
My latest (and greatest) book, JavaScript All-in-One For Dummies, is available now!
Every junior developer or aspiring JS developer needs this book, imho.
The book teaches modern #JavaScript, how browsers work, using #VSCode like a pro, #Git, #prettier, #eslint, #vite, #webpack, #react, #vue, #svelte, #http, #jest, #node, #express, #mongodb, #mongoose, and finishes with a chapter on authentication with #jwt.
It took me 6 months to write and is over 800 pages.
Announcing the `eslint-community` GitHub organization
https://eslint.org/blog/2023/03/announcing-eslint-community-org/
#ES_Next_News #ECMAScript #JavaScript #ESLint
Everyone wants to add tools to the dev env, but nobody wants to support their team when they break the precommit hooks. #eslint #typescript #jest #tdd #danger #testCoverage #linting #husky
I'm going to be at 🌴 React Miami 2023 this April, talking about some of my favorite stuff in code - setting up ESLint and TypeScript for React! Hope to see you there! ☺️
✨ www.reactmiami.com ✨
I just finished the final review of my new book (coming in May): JavaScript All-In-One For Dummies. This one has been my dream to write for over a decade, and I've been working on it for 10 months.
When I used to hire junior developers, I'd find myself (and them) overwhelmed with how much they had to know to be to be productive. This book addresses that.
#JavaScript #Git #vscode #React #Vue #Svelte #ESLint #Jest #Node #webapi #express #mongodb #webpack #babel #vite #rest #jwt #micdrop
ESLint v8.35.0 released
https://eslint.org/blog/2023/02/eslint-v8.35.0-released/
#ES_Next_News #ECMAScript #JavaScript #ESLint
#Stylelint deprecated all stylistic rules and #ESLint is also kinda moving in that direction.
Maybe it’s finally time to take a look at #Prettier? 🤔
But I definitely have to configure it so code stays readable and doesn’t become this mess of seemingly random line breaks.
Ever looked at what Prettier does to JS template literals? It’s certainly something 😬
Just learned that #ESLint has deprecated all style and formatting rules. Are there any other good code formatters for #JavaScript / #TypeScript? I know #Prettier is quite common, but its way too opinionated for my tastes.
#Coding #Dev #Programming #WebDevelopment #SoftwareDevelopment
Some secrets from the #Vaadin R&D weekly update. Our #designsystem team has been working on really cool stuff lately, including #buildWithLit experiments! Also, do check out eslint-config-vaadin alpha, it's a great #eslint config:
Speeding up the JavaScript ecosystem – ESLint
https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-3/
#EsNextNews #EcmaScript #JavaScript #ESLint
ESLint v8.33.0 released
https://eslint.org/blog/2023/01/eslint-v8.33.0-released/
#EsNextNews #EcmaScript #JavaScript #ESLint
#eslint binary POC created with #Deno.
#javascript
https://github.com/bartlomieju/eslint_binary
ESLint’s 2022 year in review
https://eslint.org/blog/2023/01/eslint-2022-year-review/
#EsNextNews #EcmaScript #JavaScript #ESLint
Is there any #eslint plugin available for checking common performance issues in javascript?, especially when dealing with DOM.
Is it just me or is developer tooling in #react superior to #vue? It seems to me that tools like #eslint and #typescript are less likely to work correctly in vue templates or at least require additional configuration that needs to be maintained additionally.
@CodingItWrong I have one project that uses #ESlint for formatting with autofix, but it means my editor highlights minor formatting issues as errors. This is very distracting, and I regret setting up this project like that.
I guess I could change it so formatting issues are not listed as errors, but I might as well just switch to prettier then.
@CodingItWrong #eslint is for logical code errors.
For example reactjs has some warnings, for syntactically correct code but logical errors, eslint has special rules for this.
#prettier simply formats code