stylelint for SvelteKit: Keep your SCSS Code Consistent # stylelint for SvelteKit: Keep your SCSS Code Consistent #

💄 stylelint SvelteKit: Keeping it Clean #

stylelint is a rather lovely little tool for keeping your code consistent. It is a must-have if you want to impress future employers skimming through your open source code on GitHub. Equally, it is indispensable for any team that wants to keep their code base consistent. In this short video, we see how you can use stylelint for SvelteKit. We start from square one, installing all the necessary packages, the VS Code extension. Additionally, we even look at how to integrate stylelint for SvelteKit into your Continuous Integration (CI) process.

Although we don't look at it in the video, there is a link for the a11y accessibility stylelint plugin lower down. If you are using vanilla CSS in SvelteKit check out the more specific post on that.

📹 stylelint for SvelteKit: Video #

🖥 Code #

Packages #

    
pnpm add -D postcss postcss-html stylelint stylelint-config-standard stylelint-config-recommended-scss stylelint-scss

  

Configuration File #

    
1 {
2   "extends": "stylelint-config-recommended-scss",
3   "rules": {
4     "color-named": "never",
5     "font-family-name-quotes": "always-where-required",
6     "font-weight-notation": "named-where-possible",
7     "function-url-no-scheme-relative": true,
8     "function-url-quotes": "always",
9     "value-keyword-case": "lower",
10     "unit-disallowed-list": [],
11     "no-descending-specificity": true,
12     "no-duplicate-selectors": true,
13     "font-family-no-missing-generic-family-keyword": null,
14     "property-no-unknown": [
15       true,
16       {
17         "ignoreProperties": ["/^lost-/"]
18       }
19     ]
20   },
21   "ignoreFiles": ["node_modules/*", "src/assets/**", "build/**", "src/lib/styles/normalise.css"],
22   "defaultSeverity": "error",
23   "customSyntax": "postcss-html"
24 }

  

stylelint SvelteKit CLI Command #

    
npx stylelint "**/*.{css,scss,svelte}"

  

stylelint SvelteKit package.json Customizations #

    
1 "scripts": {
2     "lint:scss": "stylelint "src/**/*.{css,scss,svelte}"",
3 },
4 "husky": {
5   "hooks": {
6     "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
7     "pre-commit": "pnpm run prettier:check && pnpm run lint:scss"
8   }
9 },

  

🔗 Links #

• Demo code for setting up Stylelint with SCSS in SvelteKit  ,
• Scott Tolinksi's config file 
• stylelint-a11y plugin 
• vscode-stylelint 
• stylelint Docs 
• Twitter handle: @askRodney 

🙏🏽 stylelint SvelteKit: Feedback #

If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention, so I can see what you did. Finally, be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram  . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.