WTF are all these config files for?

Every JavaScript project has a collection of config files to control the behavior of tools like Prettier, ESLint, Typescript, Vite, Tailwind, Post CSS, and more. Let's take a comprehensive tour of the web development tooling ecosystem.
#javascript #webdevelopment
Learn more about testing and linting with Full Stack Testing Academy links.dev-academy.com/fta and use code FIRESHIP_10

[@trevortrevose9124]

"garbage man is gendered and should be garbage collector instead" this is why i subscibed 😂😂😂

[@pe1ucas]

I definitely was not expecting that haha, I spat my drink

[@randomdev4246]

"my counsin is a feature of javascript that C doesn't have"

[@aaronsmyth2629]

This dude’s sense of humor is perfect

[@seeibe]

What's concerning is that I can't tell if this library is a joke or not..

[@jackbotman]

If I enable that my code will never compile :

[@u4yk]

I love how there are so many "zero-config" frameworks that have their own configs.

[@khai96x]

GitHub Actions just forced me to temporary return to JS development, and it's so painful: One would assume "If it ain't broke, don't fix it" generally a good rule, except it doesn't work with the JavaScript ecosystem. In JavaScript, if you don't fix it ahead of time, it will break, but if you do choose to fix it, you have to confront with a broken ecosystem with thousands of breaking changes. In the end, what should have been a simple dependency/nodejs version bump ends up costing me a whole day work.

[@lvnam96]

@@khai96x been there, doing that. In a random beautiful morning, I decided to bump all deps to their latest version, just to suffer.

[@codediporpal]

Tomorrow I have to fix a bug in a 2 year old JS project that surfaced in recent mobile browsers. I'm am certain 90%+ of my time will be spent with configuration and tooling issues.

[@tom9380]

To be fair, it's actually "smart defaults configs". Zero-config works as long as you are happy with the default.

[@u4yk]

@@tom9380 I get it. This is why I hate buzzwords.

[@ransfordarthur4418]

good now all we need is a config file to manage our config files, a package manager for all our configs, a style guide for all those configs and a new framework to programmatically wrte configs

[@_HappyHippo]

I hate myself for actually thinking that this might be a good thing

[@aromaticsnail]

FBI, it's this guy right here

[@davixx1995]

This sounds like a good idea that will slowly evolve into 10 further meta layers, until there will be an AI to manage all these configs Which of course will require a configuration file....

[@wlockuz4467]

It would be just endless recursion

[@shateq]

I've got you covered (jk)

[@wlockuz4467]

This gave me an idea for my next side project, a config file manager that combines all config files into one config file. I even thought of a catchy name for it, *confuse.js* No not confuse as in hard to understand. But confuse as in "[con]fig files [fuse]d together". I truly believe its going to be the next big thing.

[@Raress96]

Ping me after it's implemented lol :D

[@Susul-lj2wm]

remember to give it its own config file, which you then bundle using itself

[@brettscheepers7363]

The most genius thing I've heard today

[@kylebruns9060]

@@Susul-lj2wm ahh yes, “itself” my favorite bundler “[ it ] erable [ self ] containment” Gotta configure your “confuse.itself” files!

[@nextlevel6825]

.

[@Onrirtopia]

i never heard someone say "I love working with gitignore, JSON, yaml, yml, toml, xml, hcl, cfg, tcp, conf, ini, config, jsc, RDP, gitconfig, htaccess and plain files with no extension nor docs"

[@Silas_229]

And .env

[@ryuugureen4969]

Trust me after you're forced to work with XML and .htaccess for a while, JSON and YAML will seem heaven sent.

[@MrMudbill]

@@ryuugureen4969 TOML is probably the best one in your list tbh

[@ryuugureen4969]

@@MrMudbill I meant to write .htaccess :D

[@azulamazigh2789]

I hate XML and maven config file 😡

[@MechMK1]

The grand joy of software development is maintaining a repository of tools, which all do the same thing on the surface, but have minor differences, leading to you having to learn and maintain all 6 of them.

[@MoiledSpilk]

This might be a dumb question, but is there a good reason why all of these can't just be contained within a single .config file or directory? Is it just the nature of open source cowboy land?

[@pmxi]

@@MoiledSpilk They certainly could all be in the same folder but that would mean everybody would have to agree on it. So not anytime soon

[@MoiledSpilk]

@Nordia is that relevant?

[@lookupverazhou8599]

@@MoiledSpilk I think so.

[@ra2enjoyer708]

@@MoiledSpilk It's easier for a library to keep track and cache its own config than to deal with being in the global scope of another config. With one file config you just need to keep the path and the hash of the file and only update the cache and react to changes when the hash changes. With one big config you have to reparse the entire config and check if the relevant parts changed. This gets progressively expensive with the ratio of a particular scope becoming smaller to the whole config file.

[@freecelpip]

Your sarcasm while delivering core programming concepts, is wonderful. Keep up the great work 👍

[@lookupverazhou8599]

This is core? This all seems like fluff.

[@heavymetalmixer91]

The more I learn about web development, the more I wanna sell lemonade.

[@TheDragShot]

It's gotten to the point where adding new features to legacy monoliths is becoming easier than maintaining one of these modern frontends. It's preposterous!

[@hamsandwich123]

in fairness, this goes beyond just regular ol' JS-land web dev. any project in the professional world is going to be loaded with config files. wait until you have the joy of working with Terraform

[@heavymetalmixer91]

@@hamsandwich123 Do you mean in Front End? 'Cause I'm going for Back End.

[@heavymetalmixer91]

@@TheDragShot So, is Java less complicated than before?

[@TheDragShot]

@@heavymetalmixer91 indeed it is, ever since Oracle started pumping new versions every year a lot has been streamlined over there; but I'm talking about legacy systems using old JVMs, those don't really get the updates, yet they don't require such gargantuan dependencies and settings like those of most npm/js projects of this day.

[@shateq]

Docker was forgor 💀💀

[@khalilbessaad5553]

I've been coding JS from more than 3 years and I've been waiting for this video

[@yacht.]

Hiring developers whose job is to config with 10 years of configuration experience.

[@user-hg8bo3em5y]

So basically a TeamLead dev

[@guythis757]

we prefer the title 'devops'

[@toyflish]

When I wrote my first lines of code a friend of mine told me that his brother who was our programming rolemodel stopped programming and moved to only configuring. That time I thought this was so cool.

[@alastairtheduke]

The problem is how do you get this config job without having any config experience?

[@7heMech]

"Just go to the src folder" - Sun Tzu, The Art of War

[@snsa_kscc]

Basically, if you have less config files than your actual code files, you are doing it wrong, right?

[@DemPilafian]

I have a less config file for my CSS.

[@DerLuukee]

@@DemPilafian xD

[@paulverse4587]

Being new to "Modern Web Development", I am very happy to hear that I am not alone in my pain. Especially since there is just enough time between having to open these, that I have forgotten again what they were again.

[@toxaq]

It always bugs me how many config files are in the root of my project. Rails had it right, as normal, and has a config folder to keep everything. If JS-land could just agree to look in the config folder for their settings first before trying root that would be amazing for project cleanliness.

[@heroe1486]

Same for Django, everything sit in your settings.py

[@oscareriksson9414]

No listen, go away from JS land. You only need a little vanilla JS to start you wasm . Don't have them agreeing it wont happen just walk away.. walk away..

[@charlesm.2604]

AdonisJS is the Rails or Django of Node. The thing is it's unfair to compare batteries-included frameworks with a combinaison of multiple independant librairies and packages that require their own configuration. Don't use JS for anything that's not front-end and wait a few years until wasm, MAUI or Compose for Web become the new standards. If you really can't deal with the DevX of JS tooling in the meantime you could use Flutter (Dart) or UnoPlatform (C#) for cross platform.

[@chregig7967]

gonna need a config to tell it what the config folder is though

[@rand0mtv660]

Eh, it just moves config files into their own folder. Doesn't really solve the problem, it just moves it one directory deeper.

[@ewerybody]

Since you're using VS Code you'd have a .vscode dir with another settings.json and maybe a launch.json... But nice in VS Code: Any custom extension settings end up in settings.json with a dedicated prefix.

[@steffennilsen2132]

needs some .env files in there, maybe a secrets folder, which needs a .gitkeep so the empty folder is checked in

[@DemPilafian]

I appreciate when tools support reducing clutter by allowing config settings to be within the *package.json* file itself. For example, settings can be stored under the keys *"eslintConfig"* and *"jshintConfig"* for their respective linters.

[@ThisAintMyGithub]

Prettier and Vite also allow this I believe

[@thekwoka4707]

Yup, this is nice. Eslint allows it as well. I wish tailwind would, since all I regularly need is the contents key.

[@rand0mtv660]

Hmm I must be the only one that doesn't like this. I prefer standalone config files instead of just throwing everything into package.json.

[@DemPilafian]

@@rand0mtv660 In theory the unrelated configs should *not* all be thrown into a single file, but in practice the clutter of all those config files is really distracting and can outweigh the theory.

[@vikingthedude]

@@rand0mtv660 you’re not alone

[@manulectric]

It would be great to have a tutorial on how to 'properly' author a basic js lib given all the tooling / testing / and bundling.

[@YousefSh]

I learned now that we should have a /config folder.

[@Formula7Driver]

I'm not sure that's a propper name for it, since I already have config folder inside my projects, but something like .editor.config should really be accepted. I just hate those json files, I never installed Vetur because it was always complaining about the missing config file

[@crackwitz]

how about ".dotfiles" (read: dot dotfiles)

[@AngelHdzMultimedia]

@@Formula7Driver I think your config folder should be inside src because is configuration for your app's source code. The OP is talking about a global config folder (out of src, in the root) for the project's configuration files.

[@Formula7Driver]

@@AngelHdzMultimedia why should it be inside src? What about node projects, do they also have a src folder?

[@AngelHdzMultimedia]

@@Formula7Driver it's just a convention, not mandatory, in many languages, storing all your app's source code in the src folder. src = source. That way you can have the global config folder for all the configurations, and the src config folder, for your source code configuration. :)

[@TheStringBreaker]

This is a *must watch* for any new web developer. Wish had this earlier to give me absolute clarity on projects!

[@pesterenan]

My god, the gender neutral joke caught me completely off-guard! HAHAHAH

[@carlosmspk]

ikr? How is no one else talking about it

[@re.liable]

Would y'all mind explaining how it is funny? I don't get it... 😬

[@carlosmspk]

@@re.liable It's not like a super smart joke, but it's just unexpected, and explaining it will probably ruin it but here it goes. He spends the prior moments preparing you with words like "shit" "fuck" and the sentence he uses has "fuck" in it. He claims it can correct your sentence to be more politically correct, but instead of going for curse words in a curse riddle sentence, it instead goes for "garbage man" which assumes garbage workers need to be male, hence is not gender neutral, so it corrects it to "garbage collector" which does not assume gender.

[@re.liable]

@@carlosmspk ooh I see. Thank you very much for explaining From the other comments I thought the joke was about memory management or something ("garbage collection") so I was trying make sense of it in that context lol I still laughed though. I went "Oh, there really is a package for everything in JS". Hahaha

[@ericksantos12]

Yo pesterenan! it's a surprise for me that you're here, how are your ksp videos?

[@nathanwatson296]

Never knew you could create a config for your ide format. Cool !

[@BenRogersWPG]

Amazing video. I really wish this video was around like 7 months ago when I taught myself pretty much the entire contents of this video by accident, just by creating a couple VS Code extensions!

[@ricko13]

Let's make it a standard to put all those config files in a .config folder

[@brentjackson6966]

And they should all be stored in /dev/nul :p

[@totally_not_a_bot]

But that would make seeeense

[@codesymphony]

good luck setting up the webpack config

[@trofchik9488]

The best anti-advertisement for web development.

[@colebcline]

This is the video I needed. Considering to add some of these going forward.

[@bobsmithy3103]

Notes for me: 1) .prettier - FORMATS code (eg: indents, trailing commas, single quotes, etc) 2) tsconfig.json - TRANSPILES typescript to javascript (eg: target JS version, output dir, entry file, etc) 4) vite.config.js - BUNDLES typescript files into one file (even if you use vite, it's not actually necessary - at least for dev)

[@SoreBrain]

3) garbage man is gendered language

[@tomasma4896]

Yep this is where we ended up. I am probably too old because remember days when setting up a project requires just an index.html and plain CSS and JS files. And that was it. Then just copy it to server directory…. Yes I know it was not ideal but spent 0 time figuring out how run compile and deploy that sh*t.

[@AngelHdzMultimedia]

You can still do that. Use Vite, create a vanilla project. You can have reactive libraries using their CDNs.

[@tomasma4896]

@@AngelHdzMultimedia ofc I can do that but in most companies this is not the stack they desire to use :)

[@AngelHdzMultimedia]

@@tomasma4896 sadly. :(

[@gestucvolonor5069]

We have overcomplicated things to make the barrier of entry larger and feed our ego. All this effort and frontend is still the joke of the coding world.

[@Arfizato]

the best thing about the video is the garbageman joke haha

[@iandrake4683]

It's gotten to the point when I get sick of the shit I have to deal with, I hear your voice in my head.

[@FaZekiller-qe3uf]

I was looking for some more. Thanks!

[@madao4024]

I had a horrible nightmare where you started explaining in your videos without the humour and sarcasm.

[@bluebearh3]

You have no idea how much I appreciate this kind of content! Go KZbin algorithm

[@Cyranek]

tough finding a job as a config developer with 5 years experience

[@elQueFaltaba]

This is absolutely nuts!!

[@behnamsalehi9765]

Finally. I needed this.

[@jintal]

Great catch on “garbageman”, that was a close call

[@anaselhassani2545]

Worked , thanks a lot!

[@joshuapecson5985]

this is sick. need to replay this 10more times a tad slower playspeed

[@marcellsimon2129]

Alex sounds fun, but I roll with a master branch

[@unicodefox]

2:25, "need" is a strong word. I personally hate bundlers, so I just don't. With ESM, I can use TypeScript, libraries like Preact from Skypack, all without obfuscating my code.

[@shateq]

Deno moment

[@uziboozy4540]

You've never had to obfuscate your code for it to work... Also you can't use TypeScript in the browser just by using ESM without transpiling the code first... Take 2 steps back and thoroughly read what you've written, because it makes no sense at all

[@tefkah]

@@uziboozy4540 transpiling isn't the same as bundling though. they're right in saying that with ESM there's no need to bundle if you're importing libraries through e.g. skypack. I don't really get the appeal of not bundling as I always use a framework which takes care of that for me, but if you're used to writing your own webpack configs I can see why you'd be weary of it

[@uziboozy4540]

@@tefkah "transpiling isn't the same as bundling" that's exactly what I just articulated..

[@unicodefox]

@@uziboozy4540 ...is that in browsers?

[@ibgib]

I heard there were 3 config files given to the elves with something like 7-ish for the dwarves, but we were extra lucky and got 9. There were rumors of one config file that overrules them all though..

[@xstudioz7255]

Really nice and helpful... Thanks!

[@rahimmahat0007]

What icon pack are you using I thought it's materialui but the icons seems a little different or is it updates material ui pack?

[@Cookie-mv2hg]

I went from knowing little and confused, to be overwhelmed by things I've never heard of and getting further confused.

[@DerLuukee]

Don't be like Alex, he's the type of guy to name the master branch "main".

[@brad7957]

Glad i'm not the only one going out of my way to use "master". Fuck main and fuck those who are offended so easily.

[@Gigusx]

Not "his", because alex (not Alex) is a concept, not a person and most ultra-definitely not a man. Thus, the more inclusive way to describe alex would be "it's the type of entity to...". Also, alex prefers "primary" as the alternative to "master", for which you can find 12 references on alex's homepage. Alex sends its regards. Please be more considerate in your future conquests, sorry I mean journeys.

[@DerLuukee]

Don't be like Adrian

[@spiffense]

LOL. Didn't except the last part about "garbageman". Made my day! 🤣

[@azatecas]

i swear fireship is tge reason there are so many JS Devs

[@shakerwahba3742]

Nice video, it works!

[@jwlzloff26]

This is pure beauty!

[@griffinofficials9813]

will check it later

[@mierenmans881]

For this reason I love deno. It does not require any configs for any of its tooling

[@chayanpanda5126]

How do you get those icons in your vs code....they look really cool

[@axa993]

I literally went through setting up aaall of these in the last month or so for our monorepo. RIP

[@_abdul]

3:08 Very nice and brave of you to trim out that clip of you saying this again and again for 3 hours.

[@the-cyburstud]

Thank you for the broad coverage on the varieties of config files, however I'm somewhat surprised that you didn't mention .env files. I'm actually wondering if there is ever a preferred use case where depending on an environment variable it could be considered best practice to modify any of these mentioned configuration files.

[@MuhammadAzamuddin]

Because it is actually not a config file but as the name suggest an environment file. Yes itcan be used to store some variable for configuration but it is not tied to specific tooling. It is tied with your app instead

[@lukaszpiotrluczak]

What plugin you use for this cool icons on files?

[@shimbaneba]

Can anyone tell which vscode theme and file icon set he's using? Looks really cool.

[@hi_im_julian_kirsch]

The JS ecosystem is just an utter nightmare.

[@killerdroid99]

well some configs can be common to other langs and frameworks like git workflows, .envs etc

[@aldi_nh]

You can't escape config files, even outside of JS ecosystems. - php with composer - android with .graddle and friends - .git .vscode .env which is global config files

[@sidd_sarkar]

The level of sarcasm🤣🤣

[@JacobDuenke]

Fireship is Peak comedy. 👌🏼

[@mrkeyboardwarrior9969]

Hey I needed this man! I am setting a project now and I really dont understand this.

[@azizoid]

is there a way to combine those config files somewhere in the config folder? to keep the root cleaner?

[@f1945]

You forgot about the config files for the docker container tools like docksal.

[@DK-ox7ze]

Can someone please tell me how to disable "Quick fix" suggestions provided by eslint in vscode? I want to use default quick fix suggestions of vscode but still use eslint.

[@hugazo]

This one hurts, when you get into the tooling hell, you won't be able to go back

[@yurisoares2596]

Would be wonderful if we were able to create a .config folder to put all those inside.

[@danel1922]

so where using vue2 and vuetify and my techlead developed a reusable form component, containing textfields, textareas, selects and such. it takes up to 4 (four) different config files to configure the behaviour, such as clearable, rounded, background, etc.. of course we have a service that collects all that config files and combines them. which itself is if course configurable with a config file. just one, but i'm sure he's working on adding some...

[@abdullahsolahudeen143]

Barely an inconvenience

[@pranitrock]

Alex rc part was too good 🤣

[@sanusihassan7125]

there is also gulp which is a task runner

[@lcarv20]

I started panic and sweating during this vid. But hey, great content!

[@IngwiePhoenix]

alexrc had me wheezing. xD Will go add that later.

[@osamareema3008]

Amazing !!

[@alioraqsa]

List of config files in the videos (Really helpful for new programmer) eslint RC: Analyzes code for code quality issues. editor config: Ensures code formatting consistency. prettier config: Modifies code formatting to match preferred style. stylelint RC: Checks for code quality issues in CSS. beat config: Unknown (No purpose mentioned in the video). Tailwind config: Configures the Tailwind CSS library. TS config: Controls TypeScript compiler behavior. Alex RC: Analyzes project for profanity and offensive language. package Json: Declares project dependencies and configuration. package Json lock: Tracks exact versions of installed packages. style link config: Checks for code quality issues in CSS. Hosting config: Controls hosting behavior of the application. Testing config: Configures testing tools for automated testing. git ignore: Specifies files to be ignored by version control. CI/CD config: Configures continuous integration and deployment. Mono repo config: Configures a mono repository setup. (Generate by ChatGPT, please note if there's inaccurate info)

[@NorweskiDrwal]

Lol, good burn in the last bit about the language :D

[@efenollal]

Miss those Ruby on Rails and PHP glorious days.

[@randomutubr222]

I love how webpack.config.js shows up on the list twice 😂 don’t know if that’s a typo or not but I feel it

[@michaelbitzer7295]

I compile my typescript projects with swc that has it's own config. Sounds great on paper but you still need tsconfig for the ide and other libraries/scripts that depend on it. Having to keep both of these in sync is such a nightmare.

[@GGdevelopment]

I enjoy your sense of humor 🤣

[@nomadshiba]

dont forget to use master for instead of main so for example, instead of primary color, you should use master color

[@MaxMalm]

Sounds reactionary

[@hitmusicworldwide]

I'm in heaven. All my concerns have been separated and have config files.

[@KevinSheppard]

I feel like we've reached the point of authoring the gunk that was once contained inside the IDE's generated project XML descriptor.

[@krissh_the_dev]

I think to solve this accumulation issue, we should invent a new config management package where you can manage the configuration of multiple different tools with a single configuration file such as configurations.json

[@stephensauceda]

Sooooo, package.json?

[@krissh_the_dev]

@@stephensauceda na, it's already cluttered. Package Json should only contain meta information about the project imv.

[@yanukadeneth99]

Genius Ending... Wew

[@Y-anon]

Add to that dockerfiles and kubernetes and you're good to go :D

[@domnantas]

Not only the file types are different, the naming convention is inconsistent too - *.config.json *config.json *rc.json

[@josemonge4604]

It is annoying right? JS is a clusterf*c of technologies that evolve at different paces and mix in a somewhat chaotic way.

[@metiu1973]

You forgot alle the IDE/Editor project related and extension configs, such as live share for vscode, and also secondary package manager files, like bower, that you need because that single MD editor isn't uploaded on npm...

[@Vietnamkid1993]

This made me laugh because it is so true for all my projects. 😂

[@andymutale368]

Imagine having all those config files for a simple hello world

[@pieterspruijt2]

Wow over 100k subs already

[@nguyenucan4746]

This is exactly what I'm looking for. Now I understand these config files a bit better. 🤣

[@shanithakur_]

Mind overflow 🧠

[@muhammadmejanulhaque3305]

I thought you would show a trick to move all these config files into a folder or something. anyway, Great video as always.

[@brennenherbruck8740]

I feel bad for anybody who didn't watch to the end.

[@poemchanel5695]

What is monorepo and the dif on github

[@Dreadric79]

LOL this guy is hilarious. Great video.

[@tjay5644]

Vite all the way up 🔥🔥🔥