JSFoo: round the year submissions

JSFoo: round the year submissions

Submit talks on JavaScript and full stack engineering round the year

Make a submission

Submissions are closed for this project

Submit talks and workshops on:

  1. Full stack engineering
  2. JavaScript frameworks
  3. Architecture approaches and case studies
  4. JavaScript and IoT
  5. Web development
  6. JavaScript for hobbyists

We will find a forum to place your talk, any time during the year.

For more information, contact jsfoo.editorial@hasgeek.com or call 7676332020

Hosted by

JSFoo is a forum for discussing UI engineering; fullstack development; web applications engineering, performance, security and design; accessibility; and latest developments in #JavaScript. Follow JSFoo on Twitter more

Ankur Sethi

@s3thi

Writing Custom ESLint Plugins

Submitted Jun 14, 2018

ESLint is great for ensuring that all contributions to your codebase follow a uniform style. With a few lines of configuration, it lets you scan your code for style violations such as missing semicolons, unused variables, and inconsistent brace styles.

However, ESLint can go beyond these simple style checks. Its powerful plugin API lets you write custom linting rules tailor-made for your project or organization.

In this hands-on talk, I will walk you through writing a custom plugin for ESLint. In the process, we will discover Abstract Syntax Trees (ASTs), what they’re good for, and how to use them to build your own developer tooling.

Outline

If you’ve worked with a large JavaScript codebase, chances are you’ve relied on ESLint to check your code for style violations and common code smells. It’s a valuable tool in any developer’s arsenal, one that helps large teams work on a single codebase without ending up with a mishmash of conflicting styles and patterns.

In this talk, I will walk you through building a custom plugin for ESLint.

Our plugin will enforce a consistent ordering on React lifecycle methods across our codebase. It will scan all our class-based React components, collect all the lifecycle methods that appear inside them, figure out if they appear in a pre-defined order, and throw an error if they don’t.

The goal of our plugin is to ensure that, for example, componentDidMount always appears before render across all React components.

Here’s a quick outline of what I’ll cover in this talk:

  • Why build custom developer tooling?
  • ESLint for the unfamiliar
  • What are Abstract Syntax Trees (ASTs)?
  • How do you build ASTs? What are they used for? How do you work with them?
  • The ESLint plugin API
  • Writing an ESLint plugin to ensure consistent ordering of React lifecycle methods across a codebase (hands-on)

Speaker bio

Ankur Sethi leads the Web Engineering team at Uncommon in Bangalore. He builds applications with JavaScript, TypeScript, and (sometimes) Rust. He has terrible taste in music, which he inflicts on unsuspecting strangers if handed the AUX cord at parties.

Links

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Shahidh K Muhammed

Using React Hooks & GraphQL Subscriptions to Build "Reusable" Realtime Feeds

React hooks are a super exciting feature, but considering how new it is, examples on how to use it to make the behaviour “reusable” within and across apps are still emerging. more

24 Jan 2019