Getting Started

This page documents how HardPin can be enabled in your copy of Visual Studio Code. Unfortunately, HardPin relies on DOM access. Thus, it can not be published as an extension (see VS Code extension restrictions) and must be manually applied. Hopefully, this feature can someday be implemented in to the actual product.

Why is HardPin not implemented directly in the source of VS Code? See How It Works.

Enabling HardPin

1. Copy the code from below in to your clipboard.
2. Open VS Code.
3. Help > Toggle Developer Tools > Console.
4. Paste the copied code in to the Console and execute it.
5. Enjoy! Note: These steps must be completed for each VS Code window separately (including on restart).

The Code

!function(t){var e={};function n(a){if(e[a])return e[a].exports;var r=e[a]={i:a,l:!1,exports:{}};return t[a].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=t,n.c=e,n.d=function(t,e,a){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:a})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var a=Object.create(null);if(n.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(a,r,function(e){return t[e]}.bind(null,r));return a},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=3)}([function(t,e,n){var a=n(1);t.exports="string"==typeof a?a:a.toString()},function(t,e,n){(e=n(2)(!1)).push([t.i,".tab.hard-pinned\r\n{\r\n z-index: 1;\r\n position: absolute !important;\r\n}\r\n\r\n.tab-close\r\n{\r\n width: 20px !important;\r\n}\r\n\r\n.tab-hard-pin\r\n{\r\n width: 10px;\r\n height: 20px;\r\n padding: 0 5px;\r\n margin-top: auto;\r\n margin-bottom: auto;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.tab-hard-pin-action\r\n{\r\n flex: 1;\r\n border-radius: 50%;\r\n background: transparent;\r\n border: 2px solid white; \r\n height: 6px;\r\n width: 6px;\r\n}\r\n\r\n.tab.hard-pinned .tab-hard-pin-action\r\n{\r\n background: white;\r\n}",""]),t.exports=e},function(t,e,n){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n=function(t,e){var n=t[1]||"",a=t[3];if(!a)return n;if(e&&"function"==typeof btoa){var r=(i=a,o=btoa(unescape(encodeURIComponent(JSON.stringify(i)))),l="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(o),"/*# ".concat(l," */")),s=a.sources.map((function(t){return"/*# sourceURL=".concat(a.sourceRoot||"").concat(t," */")}));return[n].concat(s).concat([r]).join("\n")}var i,o,l;return[n].join("\n")}(e,t);return e[2]?"@media ".concat(e[2]," {").concat(n,"}"):n})).join("")},e.i=function(t,n,a){"string"==typeof t&&(t=[[null,t,""]]);var r={};if(a)for(var s=0;s<this.length;s++){var i=this[s][0];null!=i&&(r[i]=!0)}for(var o=0;o<t.length;o++){var l=[].concat(t[o]);a&&r[l[0]]||(n&&(l[2]?l[2]="".concat(n," and ").concat(l[2]):l[2]=n),e.push(l))}},e}},function(t,e,n){"use strict";n.r(e);const a=n(4);class r{constructor(t,e,n,a,s,i){this.tabsAndActionsContainer=t,this.styleElement=e,this.tabScroller=n,this.tabsContainer=a,this.tabScrollBar=s,this.id="hard-pin-tab-control-"+r.tabControlCreationCount,this.tabsAndActionsContainer.id=this.id,this.hardPinnedTabsTitles=[],this.dragTitle="",this.dragTargetTitle="",this.useDoubleRows=i,this.extractHardPinnedTitlesFromElement(),this.tabsContainerMutationObserver=new MutationObserver(this.mutationCallbackGenerator(r.onTabsChanged,r.onTabsOrderChanged)),this.tabsContainerMutationObserver.observe(this.tabsContainer,{childList:!0,attributes:!0}),r.tabControlCreationCount++}destroy(){this.tabsContainerMutationObserver.disconnect()}static getAllTabControls(t){var e=[],n=document.getElementsByClassName(r.tabsAndActionsContainerClass);for(var a of n){var s=a.getElementsByClassName(r.tabScrollerClass)[0],i=s.getElementsByClassName(r.tabsContainerClass)[0],o=s.getElementsByClassName(r.tabScrollBarClass)[0],l=null,d=a.getElementsByTagName("style");d.length>0?l=d[0]:(l=document.createElement("style"),a.insertBefore(l,a.childNodes[0]));var c=new r(a,l,s,i,o,t);r.onTabsChanged(c),e.push(c)}return e}static onTabsChanged(t,e){let n=[];for(let e of t.tabsContainer.children)if(e.style.marginLeft="0px",e.classList.remove(r.hardPinnedClass),t.hardPinnedTabsTitles.includes(e.title)&&(e.classList.add(r.hardPinnedClass),n.push(e)),!e.classList.contains(t.getProcessedClass())){if(e.classList.add(t.getProcessedClass()),0==e.getElementsByClassName(r.hardPinClass).length){let t=e.getElementsByClassName(r.tabIconLabelClass)[0],n=document.createElement("div");n.className=r.hardPinClass;let a=document.createElement("a");a.className="action-label icon "+r.hardPinActionClass,a.title="Hard Pin",a.role="button",n.appendChild(a),e.insertBefore(n,t.nextSibling)}e.getElementsByClassName(r.hardPinClass)[0].onclick=function(n){t.toggleHardPinTitle(e.title)},e.addEventListener("dragstart",(function(n){t.dragTitle=e.title})),e.addEventListener("dragenter",(function(e){t.dragTargetTitle=e.currentTarget.title})),e.addEventListener("drop",(function(e){var n=t.hardPinnedTabsTitles.indexOf(t.dragTitle),s=t.hardPinnedTabsTitles.indexOf(t.dragTargetTitle);n>-1&&s>-1&&(a.mutate(t.hardPinnedTabsTitles,n,s),r.onTabsChanged(t,null))}))}let s=0,i=[];for(let e of t.hardPinnedTabsTitles){var o=null;for(let t of n)if(t.title==e){o=t,i.push(e);break}null!=o&&(o.style.marginLeft=s+"px",s+=o.offsetWidth)}t.hardPinnedTabsTitles=i,t.setStyle(s),t.saveHardPinnedTitlesInElement()}static onTabsOrderChanged(t,e){r.onTabsChanged(t,e)}mutationCallbackGenerator(t,e){var n=this;return function(a,r){for(let r=0;r<a.length;r++){let s=a[r];"childList"===s.type?t(n,s):"attributes"===s.type&&e(n,s)}}}setStyle(t){if(this.useDoubleRows){var e="35px",n="0px";t>0&&(e="70px",n="35px"),this.styleElement.innerHTML=`\n\n #${this.id} .${r.tabsContainerClass}::before\n {\n content: "";\n margin-left: 0px;\n }\n\n #${this.id} .${r.tabScrollerClass},\n #${this.id} .${r.tabsContainerClass}\n {\n height: ${e} !important;\n }\n\n #${this.id} .${r.tabClass}:not(.${r.hardPinnedClass})\n {\n margin-top: ${n} !important;\n } \n `,window.dispatchEvent(new Event("resize"))}else this.styleElement.innerHTML=`\n\n #${this.id} .${r.tabsContainerClass}::before\n {\n content: "";\n margin-left: ${t}px;\n }\n `}getProcessedClass(){return r.processedClassPrefix+"-"+this.id}toggleHardPinTitle(t){if(this.hardPinnedTabsTitles.includes(t)){var e=this.hardPinnedTabsTitles.indexOf(t);this.hardPinnedTabsTitles.splice(e,1),event.stopPropagation?event.stopPropagation():window.event&&(window.event.cancelBubble=!0)}else this.hardPinnedTabsTitles.push(t);r.onTabsChanged(this,null,!0)}saveHardPinnedTitlesInElement(){this.tabsAndActionsContainer.dataset.hardPinnedTabsTitles=JSON.stringify(this.hardPinnedTabsTitles)}extractHardPinnedTitlesFromElement(){null!=this.tabsAndActionsContainer.dataset.hardPinnedTabsTitles&&(this.hardPinnedTabsTitles=JSON.parse(this.tabsAndActionsContainer.dataset.hardPinnedTabsTitles))}}r.tabControlCreationCount=0,r.tabsAndActionsContainerClass="tabs-and-actions-container",r.tabScrollerClass="monaco-scrollable-element",r.tabsContainerClass="tabs-container",r.tabScrollBarClass="scrollbar horizontal",r.tabClass="tab",r.tabIconLabelClass="monaco-icon-label",r.hardPinnedClass="hard-pinned",r.hardPinClass="tab-hard-pin",r.hardPinActionClass="tab-hard-pin-action",r.processedClassPrefix="processed";var s=n(0).toString(),i=n(5).toString();class o{static start(){o.editorContainer=document.getElementsByClassName(o.editorContainerClass)[0],o.editorContainerMutationObeserver=new MutationObserver(o.editorContainerMutationObserved),o.editorContainerMutationObeserver.observe(o.editorContainer,{childList:!0,subtree:!0}),o.styleElement=document.createElement("style"),document.head.appendChild(o.styleElement),o.styleElement.innerHTML="",o.styleElement.innerHTML=s,o.setAllTabControls(),o.listenForKeyboardShortcuts()}static setAllTabControls(){if(null!=o.tabControls)for(var t of o.tabControls)t.destroy();o.tabControls=r.getAllTabControls(o.doubleRow)}static editorContainerMutationObserved(t,e){null!=o.tabControls&&document.getElementsByClassName(r.tabsAndActionsContainerClass).length==o.tabControls.length||o.setAllTabControls()}static listenForKeyboardShortcuts(){document.addEventListener("keydown",(function(t){if(t.ctrlKey&&t.altKey&&"p"===t.key){var e=o.getActiveTab();o.getParentTabControl(e).toggleHardPinTitle(e.title)}}))}static getActiveTab(){var t=document.getElementsByClassName("tab active");for(let e of t){if(e.getElementsByClassName("monaco-icon-label")[0].style.color.includes("rgb("))return e}return null}static getParentTabControl(t){for(let e of o.tabControls)if(e.tabsContainer.contains(t))return e;return null}static useDoubleRow(t){null==o.styleDoubleRowElement&&(o.styleDoubleRowElement=document.createElement("style"),document.head.appendChild(o.styleDoubleRowElement)),o.styleDoubleRowElement.innerHTML=t?i:"",o.doubleRow=t,o.setAllTabControls(),window.dispatchEvent(new Event("resize"))}}o.editorContainerClass="monaco-grid-view",o.editorContainer=null,o.editorContainerMutationObeserver=null,o.tabControls=null,o.styleElement=null,o.styleDoubleRowElement=null,o.doubleRow=!1,o.start(),window.HardPin=o},function(t,e,n){"use strict";const a=(t,e,n)=>{const a=n<0?t.length+n:n,r=t.splice(e,1)[0];t.splice(a,0,r)},r=(t,e,n)=>(t=t.slice(),a(t,e,n),t);t.exports=r,t.exports.default=r,t.exports.mutate=a},function(t,e,n){var a=n(6);t.exports="string"==typeof a?a:a.toString()},function(t,e,n){(e=n(2)(!1)).push([t.i,"",""]),t.exports=e}]);
Copy to Clipboard

Settings

To use a separate row for pinned tabs, run the following code in the console (after completing the steps above):

HardPin.useDoubleRow(true)

To revert back to the single row, run the following code in the console:

HardPin.useDoubleRow(false)

Keyboard Shortcuts

To toggle the pinned state of the currently active tab press Ctrl + Alt + P or Cmd + Option + P.

Known Issues

Must be executed once per window
The custom code must be applied once per window, but can still act as a major time saver if the same window is used for a long time.

Forgetting the state
Because HardPin is externally executed, VS Code will not remember which tabs were hard pinned during startup.

The command "Close tabs to the right" closes hard pinned tabs
HardPin does not change the internal order of tabs in VS Code, just the visual order of them. This means that "Close tabs to the right" might close hard pinned tabs. By implementing HardPin directly in to VS Code this could be fixed.

Fixing the Issues

All issues could be fixed, with relative ease, if HardPin would be implemented directly in to the source of VS Code.