Writing Your Personal Code Guidelines

There comes a time on a challenge when it’s value investing in tooling to guard the codebase. I’m undecided the way to articulate when, nevertheless it’s someplace after the challenge has confirmed to be one thing long-term and tough edges are beginning to present, and earlier than issues really feel like an entire mess. Keep away from untimely optimization however keep away from, uh, postmature optimization.

A few of this tooling is really easy to implement, it’s usually achieved proper up-front. I consider Prettier right here, a code formatter that retains your code in form, often proper as you might be coding. There are entire suites of instruments you’ll be able to put in that “as-you-are-coding” bucket, like accessibility linting, compatibility linting, safety linting, and so on. Webhint bundles a bunch of these collectively and might be value a glance.

Then there may be tooling that protects your code through extra code that you have to jot down. Exams are the massive participant right here, which may even be set as much as run as you code. They’re about ensuring your code does what it’s meant to do, and as such, ship a hell of numerous worth.

Defending your code with extra code that you simply write is the place I wished to go along with this, not with conventional exams, however with customized linting guidelines. I thought of it as two completely different posts about customized linting crossed my desk not too long ago:

“Tips on how to write a customized ESLint rule” by Benedict Quinn“Customized Stylelint Guidelines — Writing Your First one” by Omri Lavi

I used to be as a person of each ESLint and Stylelint in my important codebase. However honest warning, I discovered the method for writing customized guidelines in each of these fairly tough. You gotta know you approach round an Summary Syntax Tree. It’s nothing like if (guidelines.discover.selector.startsWith(“outdated”)) throw(“Deprecated selector.”) or one thing straightforward like that.

I discovered this all associated to an attention-grabbing query that got here my approach:

I work on a growth staff engaged on an outdated challenge, and we need to get of rid a lot of our oldest and buggiest CSS selectors. For instance, considered one of us would possibly open a HTML file and see a component with a category title of deprecated-selector, our aim is to have our IDE actually mark it as a linting error and say like “It is a deprecated selector, use .ui-fresh__selector as an alternative”.

The very first thing I considered was a customized Stylelint guidelines that will search for selectors that your staff is aware of to be deprecated and warn you. However sadly, Stylelint is for linting CSS and it appears like the primary situation right here is HTML. I do know html-inspector had a approach to write your personal guidelines, nevertheless it’s getting a bit lengthy within the tooth so I don’t know if there may be success to be discovered there or not.

The put up Writing Your Personal Code Guidelines appeared first on CSS-Methods. You’ll be able to assist CSS-Methods by being an MVP Supporter.