typescript-eslint
eslint-plugin-jsx-a11y
typescript-eslint | eslint-plugin-jsx-a11y | |
---|---|---|
123 | 18 | |
14,663 | 3,332 | |
1.2% | 0.8% | |
9.9 | 6.3 | |
3 days ago | 15 days ago | |
TypeScript | JavaScript | |
GNU General Public License v3.0 or later | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
typescript-eslint
-
Mastering Type-Safe JSON Serialization in TypeScript
Typescript-eslint can assist in this task. This tool helps identify all instances of unsafe any usage. Specifically, all usages of JSON.parse can be found and it can be ensured that the received data's format is checked. More about getting rid of the any type in a codebase can be read in the article Making TypeScript Truly "Strongly Typed".
-
Oxlint – written in Rust – 50-100 Times Faster than ESLint
> Only lint files that have changed? How hard that is?
Quite hard, especially since type-aware rules from e.g. https://typescript-eslint.io/ mean that changing the type of a variable in file A can break your code in file B, even if file B hasn't changed.
-
How to Do a TypeScript Conversion: an opinionated take on gradual conversions
The article only touches this: when converting to TypeScript, `any` is useful, but in the end you don't want this type in your codebase - so don't forget to use typescript-eslint [0] and turn on those no-unsafe-* rules which guard against `any` leaking into your code.
[0] https://github.com/typescript-eslint/typescript-eslint
- How do I add additional rules to my typescript-eslint settings?
- What's the best config for typescript-eslint?
- How do you add angular-eslint to your typescript-eslint config?
- What's the best typescript-eslint config?
-
The Best ESLint Rules for React Projects
By convention, React components should be named in PascalCase. @typescript-eslint has the config we need, and though we can't specifically target React components, we can target variables (and set some other conventions while we're at it):
- Open source public fund experiment - One and a half years update
- Never touch those //ts-ignores
eslint-plugin-jsx-a11y
- Tailwind Handbook - Part II
-
Speeding up the JavaScript ecosystem – Polyfills gone rogue
I try to focus on the issues rather than individuals, but the root of the problems in the listed eslint plugin libraries points to ljharb.
If you do some simple digging into these libraries, you will find that these types of commits are quite common within them.
https://github.com/jsx-eslint/eslint-plugin-react/commit/e1d...
https://github.com/jsx-eslint/jsx-ast-utils/commit/bad51d062...
https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/commit/...
He would rather see the download count of these polyfill libraries https://github.com/ljharb/ljharb#projects-i-maintain increase, compared to assessing the health of the JavaScript ecosystem.
-
The Best ESLint Rules for React Projects
jsx-a11y is all about ensuring your DOM elements are accessible. This plugin will prompt you to include the correct ARIA attributes such as labels and roles, in addition to things like alt text.
-
Create React UI Lib 1.1: Ladle and ESLint
You can also add ESLint now (props to @femincan for the suggestion). It comes with recommended settings for these plugins: typescript, prettier, react, react-hooks, jsx-a11y.
-
Light UI component library but as good as MUI (or atleast close to it)?
WAI-ARIA is important if you are writing custom components and do not follow the general rules for HTML tags. For example, if you are using a `div` as a button, you would need to add tags for accessibility. Yes, there are some other instances, like adding alt text to images or adding a title to an iframe, but these can all be handled with warnings in the editor using the jsx-a11y eslint plugin. Some other nuance will be up to the developer to make sure they follow the proper accessibility structure, but most use cases are outlined in the Daisy UI tailwind examples, they do a great job of using HTML properly and give fully accessible examples for their components. Take a look at the accordion example, you can tab into the accordion and use the arrow keys to navigate.
-
Introducing react.dev: the new React docs site!
jsx-a11 (ESLint plugin) checks a couple other things.
-
Newbie question about ARIA/ADA Compliance
When using react, I've been using the recommended rules from eslint-plugin-jsx-a11y. Am I naive for relying a lot on that to get a11y right? Of course I try to write semantic html too and do research for each topic, but it's a bit overwhelming and I feel like the eslint rules help me a lot.
-
Can someone help me locate documentation where this eslint rule is talked about?
I found the documentation but no solution here: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/label-has-associated-control.md
-
Setting up ESLint & Prettier in ViteJS
eslint-plugin-jsx-a11y: Checks for accessiblity issues.
-
Introduction to Web Accessibility (A11Y)
For example, Deque's open-source Axe project can help identify issues such as common HTML semantic errors, contrast problems, and more. There are even libraries that help integrate Axe into your project's linters, such as one for React called eslint-plugin-jsx-a11y.
What are some alternatives?
eslint-config-google - ESLint shareable config for the Google JavaScript style guide
chakra-ui - ⚡️ Simple, Modular & Accessible UI Components for your React Applications
angular-eslint - :sparkles: Monorepo for all the tooling related to using ESLint with Angular
jest-axe - Custom Jest matcher for aXe for testing accessibility ♿️🃏
ts-standard - Typescript style guide, linter, and formatter using StandardJS
svelte-navigator - Simple, accessible routing for Svelte
zod - TypeScript-first schema validation with static type inference
vite - Next generation frontend tooling. It's fast!
node-clinic - Clinic.js diagnoses your Node.js performance issues
agnostic-axe - Framework agnostic accessibility reporter, powered by axe-core
ts-node - TypeScript execution and REPL for node.js
react-a11y-announcer - React Announcer for Screen Reader Accessibility