DEV Community

Stefan Natter 🇦🇹👨🏻‍💻
Stefan Natter 🇦🇹👨🏻‍💻

Posted on • Originally published at blog.natterstefan.me

How to create your first ESLint Plugin [Week in Review]

#eslint #linter #prettier #javascript

Hello 👋🏻.

The last two weeks have been relatively hectic for me. Starting a company at the beginning of this year has created a lot of administrative and bureaucratic tasks that keep me from Twitter as well as from coding. At the same time, it has become clear that it can go relatively quickly until self-employment picks up. I've always been a big fan of building a carefully cultivated network of contacts. This has moved me forward several times in life and opened some exciting doors. In fact, I probably wouldn't be at the point I am today if it weren't for many lucky coincidences in my network. For that reason, I can only advise you to take the time to build a network of business contacts. You never know what kind of return on social investment you will get back from it one day. The same is true for Twitter. I spent a considerable amount of time on Twitter last year building a community. Well, I didn't manage to keep the attention span up towards the end of the year, but I'm still proud of my success. With my nearly 7,000 followers, I have some reach to ask questions, get insightful answers, promote YouTube videos, or stay up to date. Social networking pays off!

But today it's not about Twitter or vitamin B. Today it's about ESLint plugins and creating your own rules. Let's get started then.

Don't forget to share your thoughts with me on Twitter and sign up for my newsletter.

How to create your first ESLint Plugin

I'm a big fan of a consistent code style within a team, department, or company, respectively. In my opinion, it should not be the case that the teams drift apart too much when it comes to code style. Otherwise, it can be difficult to stick to new rules when you have to help out the other team. Sure the task remains the same, but how the code is written - in terms of style, not content - is important, because once you get used to it you don't want to have it any other way. That's how I feel, for example, when I have to deal with tabs (I'm a spaces developer).

So it's not surprising that I'm pushing the use of Prettier and ESLint in all my projects - and the ones I'm involved in - and taking care of their implementation. As time goes on, it becomes even more important to have a common base of rules and configurations. That's the only way it scales over time. For this reason, I've created both my own Prettier and ESLint configurations. In a now older article on Medium, I explain step by step how to create and reuse your own ESLint configuration.

Another fan of ESLint, Prettier - and git hooks - is my friend Barnabas Jovanovic. We talked weeks ago about whether it would be easier to map certain company rules or learnings into ESLint] rules and make sure they are implemented and followed. And so in our live stream yesterday we started to design our own ESLint plugin with our own rules, test it and publish it on npm.

It was surprisingly easy to create a custom ESLint rule. Basically, much of the work is due to analyzing components of the AST and declaring them valid or invalid based on one's own set of rules. Take a look at the live streaming recording from my session, the open-source code on GitHub, and the published project on npm.

⛓ Links of the Week

  • You are looking for a hand-drawn annotation for your text, for instance, a text marker? Go and check out: github.com/rough-stuff/rough-notation (thanks Adithya Sreyaj)
  • Tailwind provides some animations out of the box, but it is also not difficult to create your own animations with it. In this 2-minutes-to-read tutorial, Tony Lea explains how to create Custom Animations in TailwindCSS
  • Last week I needed to find and use an SVG to URL Encoder for a task. This one worked well for me.
  • 5 Git Commands That You Probably Aren’t Using Much
  • Quickly see your next and upcoming meetings with the macOS app Next Meeting.
  • CSS Scroll Effects can still be found in and on very many websites. Ahmad Shadeed has written a comprehensive and detailed tutorial on how you can build a CSS Scroll effect for your website without JavaScript. Bookmarked! I am a fan of CSS artwork. So it's not surprising that I really liked the iPhone created by Emma Bostian. And the best part? She did it with styled-components!
  • Just before the end of 2020, I saw some tweets with the topic "digital reset". Some talked about reducing their following number to 0 and rebuilding in 2021. That sounds exciting in itself, but I don't know if I would be ready for that. I have too many valuable connections in my following list. Speaking of lists, some things could probably be replicated in Twitter lists. However, I was most intrigued by this tweet. Anil Dash even goes so far as to update his email address every year. Now that's what I call a digital reset. That would actually be an experiment. Would you do it?
  • Are you looking for some inspiration for your personal site? Take a look at humans.fyi and get inspired.

📺 My latest YouTube Video

🐦 Tweets of the Week





See you next week - thank you. 👋🏻

Stefan

If you like my articles, you probably like my tweets and newsletter too. Let's stay connected on Twitter, LinkedIn, and GitHub.

This post includes affiliate links; I may receive compensation if you purchase products or services from the different links provided in this article.

Top comments (0)

Read next

arjun98k profile image

Mastering HTML: From Basics to Intermediate Level

arjun -

joodi profile image

Learn Zustand Right Now in the Simplest Way!

Joodi -

erikvandewiel profile image

Static text reinvented: a developer’s solution to updates without a CMS

Erik van de Wiel -

dpc profile image

Daily JavaScript Challenge #JS-35: Calculate the Product of Digits

DPC -