Build Tools and Extensions I Use In Front-End Projects

Build Setup

TL;DR - I use Eleventy and Sass CLI, and have created a few other build helpers.

I have fallen in love with the static site generator Eleventy - so much so, that I even own the domain 11ty.Rocks.

Eleventy is a key part of my setup now for every project. The great thing about it is that you can mold it to what works for you, including adding onto its build process.

For an 11ty overview, check out my post about 11ty features.

I typically start a new project from my 11ty Sass Skeleton Starter which includes build processing steps using the Sass CLI.

Another step of my build process related to CSS is using postcss to process my styles with autoprefixer and cssnano. You'll see that in the postbuild step of the skeleton starter.

Interested in using Sass via CLI build commands, but not using 11ty? Here's my gist on a setup which includes Sass processing and Browsersync without a static site generator or task runner.

I've also created a package to help me with developing accessible color palettes called a11y-color-tokens which I use for more complex projects.

Check out 🔗 my full list of front-end resources I've created for developers

VSCode Extensions

My top extensions that I appreciate no matter what language I'm writing (which for me currently means CSS, HTML, JS, C#) include:

• Prettier
• indent-rainbow
• Auto Close Tag
• Auto Rename Tag
• GitLens
• webhint
• axe Accessibility Linter

Do you do code streaming or recordings? You may be interested in how I setup VSCode for streaming and recording

Comments

[Mahfoudh Arous]

I may add to this list:

• HTML End Tag Labels: marketplace.visualstudio.com/items...
• Path Intellisense.
• Live Server.
• Live Sass Compiler.

and for JavaScript:

• Bracket Pair Colorizer 2.
• ESLint.