{"id":1407,"date":"2024-08-31T00:00:00","date_gmt":"2024-08-30T22:00:00","guid":{"rendered":"https:\/\/demo.sidekick.be\/itenium\/itenium-frontend-track-setup\/"},"modified":"2025-11-28T13:31:42","modified_gmt":"2025-11-28T12:31:42","slug":"itenium-frontend-track-setup","status":"publish","type":"post","link":"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/itenium-frontend-track-setup\/","title":{"rendered":"Frontend Track Setup"},"content":{"rendered":"<h1 id=\"node-version-manager\">Node Version Manager<\/h1>\n<p>Install the <a href=\"https:\/\/community.chocolatey.org\/packages\/nvm\">nvm package<\/a> with <a href=\"https:\/\/chocolatey.org\/install\">chocolatey<\/a>. There is also a <a href=\"https:\/\/community.chocolatey.org\/packages\/nvm.portable\">portable version<\/a>.<\/p>\n<pre><code class=\"language-powershell\">choco install nvm\n<\/code><\/pre>\n<p>NVM usage typically requires an Administrative prompt.<\/p>\n<pre><code class=\"language-powershell\"># List help\nnvm\n\n# List available node versions\nnvm list available\n\n# Use a specific node version\nnvm install 22.1.0\nnvm use 22.1.0\n<\/code><\/pre>\n<p>The Github repo of the session lists the Node version used at the top of the README.<\/p>\n<h1 id=\"visual-studio-code\">Visual Studio Code<\/h1>\n<p>Looks like it\u2019s already 5 years since I switched from Sublime Text 3 to Visual Studio Code. While all attendees can obviously pick whichever IDE they fancy, if you don\u2019t have strong convictions about your IDE for frontend development (yet), you can\u2019t go wrong with VSC.<\/p>\n<p>Learning to use your IDE well is Pragmatic Tip 22. Learn those shortcuts, macro\u2019s, install fancy plugins, learn how to work with multiple cursors etc. You\u2019ll be typing quite a lot during your career, better do it elegantly!<\/p>\n<p>Previous blog posts on setting up and learning about Visual Studio Code:<\/p>\n<ul>\n<li><a href=\"https:\/\/itenium.be\/blog\/dev-setup\/pragmatic-tip-22-use-a-single-editor-well\/\">Pragmatic Tip #22 : Use A Single Editor Well<\/a><\/li>\n<li><a href=\"https:\/\/itenium.be\/blog\/dev-setup\/vscode-editor\/\">VSCode: Editor Settings and Shortcuts<\/a><\/li>\n<\/ul>\n<h2 id=\"syncing-settings\">Syncing Settings<\/h2>\n<p>Back when those posts were written, Visual Studio Code didn\u2019t have a builtin option to sync your settings so I did it with our <a href=\"https:\/\/github.com\/Laoujin\/dotfiles\">dotfiles<\/a>. But now it\u2019s just a <a href=\"https:\/\/code.visualstudio.com\/docs\/editor\/settings-sync\">menu option<\/a> away.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/itenium-be.github.io\/blog-posts-new\/assets\/blog-images\/frontend-track-turn-on-sync.png\" alt=\"Turn on sync in Visual Studio Code\" title=\"Turn on sync in Visual Studio Code\" \/><\/p>\n<p>Especially useful when you have an installation on your home and work laptops, or when you change projects!<\/p>\n<h2 id=\"plugins\">Plugins<\/h2>\n<p>Each itenium session lists its own set of suggested Visual Studio Code plugins in the README.<\/p>\n<p>If you start doing \u201cAngular\u201d development, or \u201cFlutter\u201d, just <code>Control + Shift + X<\/code> and search for it, you see a plugin with a few million downloads? It\u2019s probably worth checking out.<\/p>\n<p>You can\u2019t go wrong with these for frontend development:<\/p>\n<table class=\"table-code\">\n<thead>\n<tr>\n<th>Plugin<\/th>\n<th style=\"text-align: right\">Installs<\/th>\n<th>Description<\/th>\n<th>Repo<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>JavaScript<\/strong><\/td>\n<td style=\"text-align: right\"><\/td>\n<td><\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=sburg.vscode-javascript-booster\">JavaScript Booster<\/a><\/td>\n<td style=\"text-align: right\">620k<\/td>\n<td>JavaScript &amp; TypeScript Refactorings<\/td>\n<td><a href=\"https:\/\/github.com\/xsburg\/vscode-javascript-booster\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=xabikos.JavaScriptSnippets\">JS Snippets<\/a><\/td>\n<td style=\"text-align: right\">16M<\/td>\n<td>Code snippets for JavaScript in ES6 syntax<\/td>\n<td><a href=\"https:\/\/github.com\/xabikos\/vscode-javascript\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=BriteSnow.vscode-toggle-quotes\">Toggle Quotes<\/a><\/td>\n<td style=\"text-align: right\">260k<\/td>\n<td>Quote toggler to cycle through \u201c \u2018 and `<\/td>\n<td><a href=\"https:\/\/github.com\/BriteSnow\/vscode-toggle-quotes\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ritwickdey.LiveServer\">Live Server<\/a><\/td>\n<td style=\"text-align: right\">53M<\/td>\n<td>Local Server with live reload<\/td>\n<td><a href=\"https:\/\/github.com\/ritwickdey\/vscode-live-server\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><strong>Importing<\/strong><\/td>\n<td style=\"text-align: right\"><\/td>\n<td><\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=steoates.autoimport\">Auto Import<\/a><\/td>\n<td style=\"text-align: right\">4M<\/td>\n<td>Generates your import statements<\/td>\n<td><a href=\"https:\/\/github.com\/soates\/Auto-Import\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=christian-kohler.npm-intellisense\">npm Intellisense<\/a><\/td>\n<td style=\"text-align: right\">8M<\/td>\n<td>Autocompletes import statements<\/td>\n<td><a href=\"https:\/\/github.com\/ChristianKohler\/NpmIntellisense\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=wix.vscode-import-cost\">Import Cost<\/a><\/td>\n<td style=\"text-align: right\">4M<\/td>\n<td>Display import\/require package size<\/td>\n<td><a href=\"https:\/\/github.com\/wix\/import-cost\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=christian-kohler.path-intellisense\">Path Intellisense<\/a><\/td>\n<td style=\"text-align: right\">13M<\/td>\n<td>Autocompletes filenames<\/td>\n<td><a href=\"https:\/\/github.com\/ChristianKohler\/PathIntellisense\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><strong>CSS<\/strong><\/td>\n<td style=\"text-align: right\"><\/td>\n<td><\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=pranaygp.vscode-css-peek\">CSS Peek<\/a><\/td>\n<td style=\"text-align: right\">6M<\/td>\n<td>Peek and Go to definition for CSS<\/td>\n<td><a href=\"https:\/\/github.com\/pranaygp\/vscode-css-peek\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=Zignd.html-css-class-completion\">CSS Completion<\/a><\/td>\n<td style=\"text-align: right\">8M<\/td>\n<td>IntelliSense for CSS class names<\/td>\n<td><a href=\"https:\/\/github.com\/Zignd\/HTML-CSS-Class-Completion\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=michelemelluso.code-beautifier\">Beautify (S)CSS<\/a><\/td>\n<td style=\"text-align: right\">2M<\/td>\n<td>Beautify css, sass and less<\/td>\n<td><a href=\"https:\/\/github.com\/mike7515\/code-beautifier\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><strong>Styling<\/strong><\/td>\n<td style=\"text-align: right\"><\/td>\n<td><\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=EditorConfig.EditorConfig\">EditorConfig<\/a><\/td>\n<td style=\"text-align: right\">10M<\/td>\n<td>Automatically follow <code>.editorconfig<\/code><\/td>\n<td><a href=\"https:\/\/github.com\/editorconfig\/editorconfig-vscode\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=esbenp.prettier-vscode\">Prettier<\/a><\/td>\n<td style=\"text-align: right\">48M<\/td>\n<td>Prettier code formatter<\/td>\n<td><a href=\"https:\/\/github.com\/prettier\/prettier-vscode\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=dbaeumer.vscode-eslint\">ESLint<\/a><\/td>\n<td style=\"text-align: right\">37M<\/td>\n<td>ESLint code formatter<\/td>\n<td><a href=\"https:\/\/github.com\/Microsoft\/vscode-eslint\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=vincaslt.highlight-matching-tag\">Highlight Tag<\/a><\/td>\n<td style=\"text-align: right\">2M<\/td>\n<td>Highlights matching <code>&lt;&gt;<\/code> and <code>&lt;\/&gt;<\/code> tags<\/td>\n<td><a href=\"https:\/\/github.com\/vincaslt\/vscode-highlight-matching-tag\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=oderwat.indent-rainbow\">Indent-Rainbow<\/a><\/td>\n<td style=\"text-align: right\">8M<\/td>\n<td>Makes indentation easier to read<\/td>\n<td><a href=\"https:\/\/github.com\/oderwat\/vscode-indent-rainbow\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=aaron-bond.better-comments\">Better Comments<\/a><\/td>\n<td style=\"text-align: right\">7M<\/td>\n<td>Make those TODOs stand out<\/td>\n<td><a href=\"https:\/\/github.com\/aaron-bond\/better-comments\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><strong>Other<\/strong><\/td>\n<td style=\"text-align: right\"><\/td>\n<td><\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=yzhang.markdown-all-in-one\">Markdown All In One<\/a><\/td>\n<td style=\"text-align: right\">9M<\/td>\n<td>All you need to write Markdown<\/td>\n<td><a href=\"https:\/\/github.com\/yzhang-gh\/vscode-markdown\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=waderyan.gitblame\">Git Blame<\/a><\/td>\n<td style=\"text-align: right\">2M<\/td>\n<td>Git blame information in the status bar<\/td>\n<td><a href=\"https:\/\/github.com\/Sertion\/vscode-gitblame\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=donjayamanne.githistory\">Git History<\/a><\/td>\n<td style=\"text-align: right\">12M<\/td>\n<td>Git log, file history, compare branches or commit<\/td>\n<td><a href=\"https:\/\/github.com\/DonJayamanne\/gitHistoryVSCode\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=eamodio.gitlens\">Gitlens<\/a><\/td>\n<td style=\"text-align: right\">34M<\/td>\n<td>Supercharge Git<\/td>\n<td><a href=\"https:\/\/github.com\/gitkraken\/vscode-gitlens\">Github<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h1 id=\"browser-extensions\">Browser Extensions<\/h1>\n<p>Unlike your preferred IDE, while you can use whichever browser you like for your day-to-day development, you do need all browsers installed so that you can at least do some initial testing in Chrome, Firefox and Edge; and maybe in a few less known ones, like Opera.<br \/> This can also come in handy when testing something for which you need users with different roles. Have the Admin use Chrome and the regular user Firefox and you can perform tests without having to logout\/login all the time.<\/p>\n<p>That being said, the browser extensions are available for pretty much all browsers:<\/p>\n<table class=\"table-code\">\n<thead>\n<tr>\n<th>Plugin<\/th>\n<th style=\"text-align: right\">Installs<\/th>\n<th>Rating<\/th>\n<th>Description<\/th>\n<th>Repo<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Libraries<\/strong><\/td>\n<td style=\"text-align: right\"><\/td>\n<td><\/td>\n<td><\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/chromewebstore.google.com\/detail\/redux-devtools\/lmhkpmbekcpmknklioeibfkpmmfibljd\">Redux<\/a><\/td>\n<td style=\"text-align: right\">1M<\/td>\n<td>4.6 (700)<\/td>\n<td>Current state of the store, time travel &amp; more<\/td>\n<td><a href=\"https:\/\/github.com\/reduxjs\/redux-devtools\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/chromewebstore.google.com\/detail\/angular-devtools\/ienfalfjdbdpebioblfackkekamfmbnh\">Angular<\/a><\/td>\n<td style=\"text-align: right\">300k<\/td>\n<td>3.9 (160)<\/td>\n<td>Angular specific debugging and profiling capabilities<\/td>\n<td><a href=\"https:\/\/github.com\/angular\/angular\/tree\/main\/devtools\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/chromewebstore.google.com\/detail\/react-developer-tools\/fmkadmapgofadopljbjfkapdkoienihi\">React<\/a><\/td>\n<td style=\"text-align: right\">4M<\/td>\n<td>4.0 (1.6k)<\/td>\n<td>\u269b\ufe0f Components\u201d and \u201c\u269b\ufe0f Profiler Tabs<\/td>\n<td><a href=\"https:\/\/github.com\/facebook\/react\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/chromewebstore.google.com\/detail\/vuejs-devtools\/nhdogjmejiglipccpnnnanhbledajbpd\">Vue<\/a><\/td>\n<td style=\"text-align: right\">2M<\/td>\n<td>4.2 (2.1k)<\/td>\n<td>Debug Vue.js applications<\/td>\n<td><a href=\"https:\/\/github.com\/vuejs\/devtools\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><strong>Tools<\/strong><\/td>\n<td style=\"text-align: right\"><\/td>\n<td><\/td>\n<td><\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/chromewebstore.google.com\/detail\/clear-cache\/cppjkneekbjaeellbfkmgnhonkkjfpdn\">Clear Cache<\/a><\/td>\n<td style=\"text-align: right\">900k<\/td>\n<td>4.5 (1.1k)<\/td>\n<td>Powerful, user-friendly browser data management<\/td>\n<td><a href=\"https:\/\/clearcache.io\">Website<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/chromewebstore.google.com\/detail\/livereload\/jnihajbhpnppcggbcgedagnkighmdlei\">Live Reload<\/a><\/td>\n<td style=\"text-align: right\">100k<\/td>\n<td>3.8 (807)<\/td>\n<td>Browser integration for LiveReload<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/chromewebstore.google.com\/detail\/json-formatter\/bcjindcccaagfpapjjmafapmmgkkhgoa\">JSON Formatter<\/a><\/td>\n<td style=\"text-align: right\">2M<\/td>\n<td>4.6 (1.8k)<\/td>\n<td>Make JSON easy to read<\/td>\n<td><a href=\"https:\/\/github.com\/callumlocke\/json-formatter\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/chromewebstore.google.com\/detail\/jsonvue\/chklaanhfefbnpoihckbnefhakgolnmc?hl=en\">JSONVue<\/a><\/td>\n<td style=\"text-align: right\">1M<\/td>\n<td>4.5 (2.7k)<\/td>\n<td>Validate and view JSON documents<\/td>\n<td><a href=\"https:\/\/github.com\/gildas-lormeau\/JSONVue\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/chromewebstore.google.com\/detail\/editthiscookie\/fngmhnnpilhplaeedifhccceomclgfbg\">EditThisCookie<\/a><\/td>\n<td style=\"text-align: right\">2M<\/td>\n<td>4.4 (11k)<\/td>\n<td>Edit, search, protect and block cookies!<\/td>\n<td><a href=\"https:\/\/github.com\/ETCExtensions\/Edit-This-Cookie\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/chromewebstore.google.com\/detail\/modheader-modify-http-hea\/idgpnmonknjnojddfkpgkljpfnnfcklj\">ModHeader<\/a><\/td>\n<td style=\"text-align: right\">700k<\/td>\n<td>3.2 (1.1k)<\/td>\n<td>Modify HTTP request\/response headers, redirect URLs<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/chromewebstore.google.com\/detail\/requestly-intercept-modif\/mdnleldcmiljblolnjhpnblkcekpdkpa\">Requestly<\/a><\/td>\n<td style=\"text-align: right\">200k<\/td>\n<td>4.4 (1.2k)<\/td>\n<td>Redirect URLs, Modify HTTP Headers, Mock APIs, \u2026<\/td>\n<td><a href=\"https:\/\/github.com\/requestly\/requestly\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/chromewebstore.google.com\/detail\/lightshot-screenshot-tool\/mbniclmhobmnbdlbpiphghaielnnpgdp\">Lightshot<\/a><\/td>\n<td style=\"text-align: right\">2M<\/td>\n<td>4.4 (6.9k)<\/td>\n<td>Screenshot tool<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/chromewebstore.google.com\/detail\/wappalyzer-technology-pro\/gppongmhjkpfnbhagpmjfkannfbllamg\">Wappalyzer<\/a><\/td>\n<td style=\"text-align: right\">2M<\/td>\n<td>4.6 (1.9k)<\/td>\n<td>Technology profiler<\/td>\n<td><a href=\"https:\/\/github.com\/projectdiscovery\/wappalyzergo\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/chromewebstore.google.com\/detail\/web-developer\/bfbameneiokkgbdmiekhjnmfkcnldhhm\">Web Developer<\/a><\/td>\n<td style=\"text-align: right\">1M<\/td>\n<td>4.5 (2.8k)<\/td>\n<td>Toolbar with various web developer tools<\/td>\n<td><a href=\"https:\/\/github.com\/chrispederick\/web-developer\/\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><strong>Rulers<\/strong><\/td>\n<td style=\"text-align: right\"><\/td>\n<td><\/td>\n<td><\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/chromewebstore.google.com\/detail\/page-ruler\/jcbmcnpepaddcedmjdcmhbekjhbfnlff\">Page Ruler<\/a><\/td>\n<td style=\"text-align: right\">400k<\/td>\n<td>3.9 (77)<\/td>\n<td>Measure page elements size in pixel<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/chromewebstore.google.com\/detail\/pixgrid-ruler\/glkplndamjplebapgopdlbicglmfimic\">PixGrid Ruler<\/a><\/td>\n<td style=\"text-align: right\">1M<\/td>\n<td>4.1 (12)<\/td>\n<td>Your Pixel-Perfect Ruler<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/chromewebstore.google.com\/detail\/dimensions\/baocaagndhipibgklemoalmkljaimfdj\">Dimensions<\/a><\/td>\n<td style=\"text-align: right\">200k<\/td>\n<td>4.1 (453)<\/td>\n<td>A tool for designers to measure screen dimensions<\/td>\n<td><a href=\"https:\/\/github.com\/mrflix\/dimensions\">Github<\/a><\/td>\n<\/tr>\n<tr>\n<td><strong>Color Pickers<\/strong><\/td>\n<td style=\"text-align: right\"><\/td>\n<td><\/td>\n<td><\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/chromewebstore.google.com\/detail\/color-picker-eyedropper-g\/eokjikchkppnkdipbiggnmlkahcdkikp\">Geco Colorpick<\/a><\/td>\n<td style=\"text-align: right\">2M<\/td>\n<td>4.2 (800)<\/td>\n<td>Color Picker, Eyedropper &#8211; Geco colorpick<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/chromewebstore.google.com\/detail\/colorzilla\/bhlhnicpbhignbdhedgjhgdocnmhomnp\">ColorZilla<\/a><\/td>\n<td style=\"text-align: right\">4M<\/td>\n<td>4.6 (3.8k)<\/td>\n<td>Eyedropper, Color Picker, Gradient Generator<\/td>\n<td><a href=\"https:\/\/www.colorzilla.com\/\">Website<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/chromewebstore.google.com\/detail\/snap-color-picker\/nbpljhppefmpifoffhhmllmacfdckokh\">Snap Color Picker<\/a><\/td>\n<td style=\"text-align: right\">5M<\/td>\n<td>4.1 (40)<\/td>\n<td>Choose Your Colors in a Snap<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/chromewebstore.google.com\/detail\/amazing-color-picker\/hclbckmnpbnkcpemopdngipibdagmjei\">Amazing Color Picker<\/a><\/td>\n<td style=\"text-align: right\">4M<\/td>\n<td>4.6 (45)<\/td>\n<td>Just amazing color picker tool<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/chromewebstore.google.com\/detail\/colorpick-eyedropper\/ohcpnigalekghcmgcdcenkpelffpdolg\">ColorPick-Eyedropper<\/a><\/td>\n<td style=\"text-align: right\">2M<\/td>\n<td>4.2 (1.2k)<\/td>\n<td>A zoomed eyedropper &amp; color chooser<\/td>\n<td><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h1 id=\"the-project\">The Project<\/h1>\n<pre><code class=\"language-powershell\"># Always use source control ;)\ngit init\n\n# And always have a README \ud83d\ude00\ntouch README.md\n\n# Start a frontend project\n# This creates a package.json\nnpm init --force\n<\/code><\/pre>\n<h2 id=\"editorconfig\">editorconfig<\/h2>\n<p>After having installed the <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=EditorConfig.EditorConfig\">EditorConfig<\/a> VSCode plugin, you also need an <code>.editorconfig<\/code>. Pretty much every template generator creates one of these.<\/p>\n<pre><code class=\"language-ini\"># See https:\/\/editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\ntrim_trailing_whitespace = true\ninsert_final_newline = true\nend_of_line = crlf\n\n[*.md]\nmax_line_length = off\ntrim_trailing_whitespace = false\n\n[*.sh]\n# If you have shell scripts, make\n# sure to also have a .gitattributes\n# With: *.sh text eol=lf\nend_of_line = lf\n<\/code><\/pre>\n<h2 id=\"typescript\">TypeScript<\/h2>\n<p>While there are some devs out there that don\u2019t like TypeScript, personally I use TypeScript even for the smallest of projects.<\/p>\n<p>We covered the latest features of ECMAScript and the power of TypeScript in our session <a href=\"https:\/\/github.com\/itenium-be\/ModernJS\">ModernJS<\/a><\/p>\n<p>These days most libraries ship their own type definitions but if one doesn\u2019t it\u2019s probably available in <a href=\"https:\/\/github.com\/DefinitelyTyped\/DefinitelyTyped\">DefinitelyTyped<\/a><\/p>\n<pre><code class=\"language-powershell\"># Add TypeScript to package.json\nnpm install typescript --save-dev\n<\/code><\/pre>\n<p>You want to configure yourself a <a href=\"https:\/\/www.typescriptlang.org\/tsconfig\/\"><code>tsconfig.json<\/code><\/a>. See this <a href=\"https:\/\/www.totaltypescript.com\/tsconfig-cheat-sheet\">tsconfig cheat sheet<\/a><\/p>\n<pre><code class=\"language-json\">{\n  \"compilerOptions\": {\n    \/\/ Use all the latest ECMAScript goodness\n    \"lib\": [\"es2024\", \"dom\", \"dom.iterable\"]\n    \/\/ Fix the module.exports and export x mess\n    \"esModuleInterop\": true,\n    \/\/ Performance: don't check all node_module types\n    \"skipLibCheck\": true,\n    \/\/ Use all the latest ECMAScript goodness\n    \"target\": \"es6\",\n    \/\/ Import js\/json files\n    \"allowJs\": true,\n    \"resolveJsonModule\": true,\n    \/\/ Treat everything as a module\n    \"moduleDetection\": \"force\",\n    \/\/ Always use import\/export\n    \"verbatimModuleSyntax\": true,\n    \/\/ Enables strictNullChecks, noImplicitAny etc\n    \"strict\": true,\n    \/\/ If you access it, it must be defined\n    \"noUncheckedIndexedAccess\": true,\n    \/\/ For all modern projects use this module system\n    \"module\": \"NodeNext\",\n    \/\/ Where to put the generated js files\n    \"outDir\": \"dist\",\n    \/\/ For libraries: generate .d.ts files\n    \"declaration\": true\n  }\n}\n<\/code><\/pre>\n<h2 id=\"jest\">Jest<\/h2>\n<p>Jest has come a long way and I would definitely recommend for your frontend UnitTesting needs.<\/p>\n<pre><code class=\"language-powershell\">npm install --save-dev jest ts-jest @types\/jest @jest\/globals\n\n# Setup a jest.config.ts that works with TypeScript\nnpx ts-jest config:init\n\n# Run tests\nnpm t\n<\/code><\/pre>\n<p>This <a href=\"https:\/\/github.com\/kulshekhar\/ts-jest\/issues\/4081\">complains<\/a> about:<\/p>\n<pre><code>TS1286: ESM syntax is not allowed in a CommonJS module when 'verbatimModuleSyntax' is enabled.\n<\/code><\/pre>\n<p>We override this for the tests with an extra <code>__test__<\/code> or <code>spec<\/code> tsconfig:<\/p>\n<pre><code class=\"language-json\">{\n  \"extends\": \"..\/tsconfig.json\",\n  \"compilerOptions\": {\n    \"verbatimModuleSyntax\": false\n  }\n}\n<\/code><\/pre>\n<p>And update the <code>jest.config.js<\/code> to use this tsconfig:<\/p>\n<pre><code class=\"language-js\">\/** @type {import('ts-jest').JestConfigWithTsJest} **\/\nmodule.exports = {\n  testEnvironment: \"node\",\n  transform: {\n    \"^.+.tsx?$\": [\"ts-jest\",{\n      tsconfig: '.\/spec\/tsconfig.json'\n    }],\n  },\n};\n<\/code><\/pre>\n<h2 id=\"visual-studio-code-1\">Visual Studio Code<\/h2>\n<p>Run the tests directly in Visual Studio Code with the <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=Orta.vscode-jest\">Jest Plugin<\/a>.<\/p>\n<p>And add a <code>.vscode\/launch.json<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n  \"name\": \"Debug Jest Tests\",\n  \"type\": \"node\",\n  \"request\": \"launch\",\n  \"runtimeArgs\": [\n    \"--inspect-brk\",\n    \"${workspaceRoot}\/node_modules\/.bin\/jest\",\n    \"--runInBand\"\n  ],\n  \"console\": \"integratedTerminal\",\n  \"internalConsoleOptions\": \"neverOpen\",\n  \"port\": 9229\n}\n<\/code><\/pre>\n<p>If you can\u2019t see failure details, open the Terminal <code>Ctrl+J<\/code>!<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/itenium-be.github.io\/blog-posts-new\/assets\/blog-images\/frontend-track-vscode-jest.png\" alt=\"Jest in Visual Studio Code!\" title=\"Jest in Visual Studio Code!\" \/><\/p>\n<h1 id=\"the-sessions\">The Sessions<\/h1>\n<p>Some of our frontend development sessions at itenium.<\/p>\n<p><strong>JavaScript\/TypeScript<\/strong>:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/itenium-be\/ModernJS\">ModernJS<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/itenium-be\/Frontend-UnitTesting\">Frontend-UnitTesting<\/a><\/li>\n<\/ul>\n<p><strong>React<\/strong>:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/itenium-be\/Talk-React\">React<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/itenium-be\/React-New-Features\">React-New-Features<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/itenium-be\/React-ComponentProfiling\">React-Component-Profiling<\/a><\/li>\n<\/ul>\n<p><strong>Angular<\/strong>:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/itenium-be\/RXJS\">RXJS<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/itenium-be\/angular-reactive-forms\">Angular-ReactiveForms<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/itenium-be\/Angular-Days\">Angular-Days<\/a><\/li>\n<\/ul>\n<h1>Extras<\/h1>\n<p><b>Stuff that came into being during the making of this post<\/b><\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/itenium-be\/Frontend-Track\">Template code repository<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p class=\"notice--info\">Q: How do you install Node?<br \/> A: Well, you don\u2019t!<\/p>\n<p>You install NVM (Node Version Manager) because every project uses a different versions and they are not always that compatible!<\/p>\n","protected":false},"author":1,"featured_media":1989,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[5],"tags":[28,21,6,7],"class_list":["post-1407","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev-setup","tag-debugging","tag-testing","tag-tutorial","tag-windows"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Frontend Track Setup - Itenium<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frontend Track Setup - Itenium\" \/>\n<meta property=\"og:description\" content=\"Q: How do you install Node? A: Well, you don\u2019t!You install NVM (Node Version Manager) because every project uses a different versions and they are not always that compatible!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/itenium-frontend-track-setup\/\" \/>\n<meta property=\"og:site_name\" content=\"Itenium\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-30T22:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-28T12:31:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/frontend-track.png\" \/>\n\t<meta property=\"og:image:width\" content=\"360\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Usdevelop\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Usdevelop\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/itenium-frontend-track-setup\/\",\"url\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/itenium-frontend-track-setup\/\",\"name\":\"Frontend Track Setup - Itenium\",\"isPartOf\":{\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/itenium-frontend-track-setup\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/itenium-frontend-track-setup\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/frontend-track.png\",\"datePublished\":\"2024-08-30T22:00:00+00:00\",\"dateModified\":\"2025-11-28T12:31:42+00:00\",\"author\":{\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/6ab401ce01e858184ee4a8667fe0f022\"},\"breadcrumb\":{\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/itenium-frontend-track-setup\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/itenium-frontend-track-setup\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/itenium-frontend-track-setup\/#primaryimage\",\"url\":\"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/frontend-track.png\",\"contentUrl\":\"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/frontend-track.png\",\"width\":360,\"height\":300,\"caption\":\"the frontend track\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/itenium-frontend-track-setup\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/demo.sidekick.be\/itenium\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend Track Setup\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/#website\",\"url\":\"https:\/\/demo.sidekick.be\/itenium\/\",\"name\":\"Itenium\",\"description\":\"We build software. We build careers.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/demo.sidekick.be\/itenium\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/6ab401ce01e858184ee4a8667fe0f022\",\"name\":\"Usdevelop\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cc8cf9b9e9d5bbe7e8d247907cc9ac8457bbfa2854b52eaddf6529adfe88ceab?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cc8cf9b9e9d5bbe7e8d247907cc9ac8457bbfa2854b52eaddf6529adfe88ceab?s=96&d=mm&r=g\",\"caption\":\"Usdevelop\"},\"sameAs\":[\"https:\/\/demo.sidekick.be\/itenium\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Frontend Track Setup - Itenium","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Frontend Track Setup - Itenium","og_description":"Q: How do you install Node? A: Well, you don\u2019t!You install NVM (Node Version Manager) because every project uses a different versions and they are not always that compatible!","og_url":"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/itenium-frontend-track-setup\/","og_site_name":"Itenium","article_published_time":"2024-08-30T22:00:00+00:00","article_modified_time":"2025-11-28T12:31:42+00:00","og_image":[{"width":360,"height":300,"url":"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/frontend-track.png","type":"image\/png"}],"author":"Usdevelop","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Usdevelop","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/itenium-frontend-track-setup\/","url":"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/itenium-frontend-track-setup\/","name":"Frontend Track Setup - Itenium","isPartOf":{"@id":"https:\/\/demo.sidekick.be\/itenium\/#website"},"primaryImageOfPage":{"@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/itenium-frontend-track-setup\/#primaryimage"},"image":{"@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/itenium-frontend-track-setup\/#primaryimage"},"thumbnailUrl":"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/frontend-track.png","datePublished":"2024-08-30T22:00:00+00:00","dateModified":"2025-11-28T12:31:42+00:00","author":{"@id":"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/6ab401ce01e858184ee4a8667fe0f022"},"breadcrumb":{"@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/itenium-frontend-track-setup\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/itenium-frontend-track-setup\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/itenium-frontend-track-setup\/#primaryimage","url":"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/frontend-track.png","contentUrl":"https:\/\/demo.sidekick.be\/itenium\/wp-content\/uploads\/2025\/11\/frontend-track.png","width":360,"height":300,"caption":"the frontend track"},{"@type":"BreadcrumbList","@id":"https:\/\/demo.sidekick.be\/itenium\/blog\/dev-setup\/itenium-frontend-track-setup\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/demo.sidekick.be\/itenium\/"},{"@type":"ListItem","position":2,"name":"Frontend Track Setup"}]},{"@type":"WebSite","@id":"https:\/\/demo.sidekick.be\/itenium\/#website","url":"https:\/\/demo.sidekick.be\/itenium\/","name":"Itenium","description":"We build software. We build careers.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/demo.sidekick.be\/itenium\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/6ab401ce01e858184ee4a8667fe0f022","name":"Usdevelop","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/demo.sidekick.be\/itenium\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cc8cf9b9e9d5bbe7e8d247907cc9ac8457bbfa2854b52eaddf6529adfe88ceab?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cc8cf9b9e9d5bbe7e8d247907cc9ac8457bbfa2854b52eaddf6529adfe88ceab?s=96&d=mm&r=g","caption":"Usdevelop"},"sameAs":["https:\/\/demo.sidekick.be\/itenium"]}]}},"_links":{"self":[{"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/posts\/1407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/comments?post=1407"}],"version-history":[{"count":3,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/posts\/1407\/revisions"}],"predecessor-version":[{"id":2261,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/posts\/1407\/revisions\/2261"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/media\/1989"}],"wp:attachment":[{"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/media?parent=1407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/categories?post=1407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/demo.sidekick.be\/itenium\/wp-json\/wp\/v2\/tags?post=1407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}