Hasty Treat - Stylelint for Linting CSS

Syntax - Tasty Web Development Treats

Wes Bos

Tech News, News, Technology

4.9 • 1.2K Ratings

🗓️ 19 July 2021

⏱️ 17 minutes

🔗️ Recording | iTunes | RSS

🧾️ Download transcript

Summary

In this Hasty Treat, Scott and Wes talk about Stylelint, what it is and why you should use it! Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 03:15 - What is a linter anyway? Why do you want to lint your CSS? Does stylelint fix errors or just tell you errors? 04:42 - Getting setup .stylelintrc stylelint extension Sass High perf animations stylelint order Max nesting depth Declaration strict value { "extends": [ "stylelint-config-standard", "stylelint-config-sass-guidelines" ], "plugins": [ "stylelint-high-performance-animation", "stylelint-declaration-strict-value", "stylelint-order" ], "rules": { "selector-no-qualifying-type": [ true, { "ignore": [ "attribute" ] } ], "plugin/no-low-performance-animation-properties": [ true, { "ignoreProperties": [ "color", "background-color", "box-shadow" ] } ], "indentation": "tab", "order/order": [ "custom-properties", "declarations" ], "order/properties-alphabetical-order": null, "declaration-block-no-duplicate-custom-properties": true, "declaration-empty-line-before": null, "scale-unlimited/declaration-strict-value": [ [ "/color$/", "z-index", "font-size" ] ], "scss/dollar-variable-pattern": "^[a-z][a-zA-Z0-9]+$", "max-nesting-depth": 3, "selector-pseudo-class-no-unknown": null } } Links https://github.com/stylelint/awesome-stylelint JSLint JSHint ESLint VS Code Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

Transcript

Click on a timestamp to play from that location

0:00.0	Monday Monday Monday open wide dev fans get ready to stuff your face with javascript CSS node module barbecue tips get work flows break dancing soft skills web development the hastiest the
0:13.5	Carrazius the tastiest web development treats coming in hot. Here is West
0:19.2	Barracuda boss and Scott L. Toro Lungo to Lenski
0:25.3	Welcome to syntax in this Monday hasty treat. We're going to be talking about style lint which is a really sick linting system for your CSS. And it's going
0:41.3	to allow you to have custom rules so that your CSS well it can be as good as possible even if you have a hundred people
0:49.3	writing it. My name is Scott Lenski. I'm a full stack developer from Denver call the rotto and with me as always is where is
0:57.3	boss. Hey, I am ready rock. We're recording this on a Thursday as we're trying to squeaky in a couple extra episodes recording on a
1:06.3	Thursday and I have had a lot of coffee so I'm about to have a lot of coffee. I have my my cold brew here
1:15.3	sitting ready to go. We also have a couple sponsors ready to go those sponsors are sanity and sentry now sentry is the perfect place
1:22.3	to see all of your errors and exceptions happen and keep track of them catalog them log them and even get performance metrics along with a user
1:31.3	misery score now sentry is the perfect tool for this type of thing. They have been battle tested and proven it has been around
1:38.3	for so long and we've been using it personally for a very long time here and have been absolutely nothing but endlessly
1:44.3	satisfied with sentry their service and the improvements that keep coming down the line. So if you want to check out sentry head on
1:51.3	over to sentry.io use the coupon code tasty treat all over case all one word and you'll get two months for free
1:58.3	when signing up and trust me you want to just toss this on your site tosses on your your API tosses on your front end
2:04.3	whatever watch the errors come in because let's face it we all know that the code you're writing isn't perfect
2:10.3	because it's really and can log and get get going with those errors day at sentry.io
2:16.3	we are also sponsored by sanity sanity structured content CMS you've heard me talk about them a hundred times I'm going to focus on something different
2:24.3	this time which is you can use sanity for ecommerce you can use it for a mobile app we've talked about using it for websites and apps
2:31.3	and stuff like that but you can also if you're running an ecommerce website you can use sanity to do that because
2:37.3	in the day it's a bunch of APIs where you can push and pull data into sanity and make a really cool editing experience.
2:45.3	So if you go to sanity.io you can go to their solutions tab and click on ecommerce and they have like a really cool case study
	...

Please login to see the full transcript.

Previous episode | Next episode

Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.

Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.