<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>VS Code on Andrew Wilson's Blog</title><link>https://andrewilson.co.uk/tags/vs-code/</link><description>Recent content in VS Code on Andrew Wilson's Blog</description><generator>Hugo -- gohugo.io</generator><language>en</language><lastBuildDate>Wed, 16 Nov 2022 00:00:00 +0000</lastBuildDate><atom:link href="https://andrewilson.co.uk/tags/vs-code/index.xml" rel="self" type="application/rss+xml"/><item><title>Bicep File Template | VS Code Snippet</title><link>https://andrewilson.co.uk/post/2022/11/bicep-template-snippet/</link><pubDate>Wed, 16 Nov 2022 00:00:00 +0000</pubDate><guid>https://andrewilson.co.uk/post/2022/11/bicep-template-snippet/</guid><description>Problem Space: After developing native ARM templates for a year or two within a set structure, I have found myself applying the same structure to my Bicep templates using comments. This structure however is not setup by default, and in actuality, the sequencing of your bicep components doesn&amp;rsquo;t really matter as long as your dependencies are there.
Of course we typically follow the standard pattern as shown below, but the larger the template the harder it is to see the breaks between.</description><content:encoded><![CDATA[<h2 id="problem-space">Problem Space:</h2>
<p>After developing native ARM templates for a year or two within a set structure, I have found myself applying the same structure to my Bicep templates using comments. This structure however is not setup by default, and in actuality, the sequencing of your bicep components doesn&rsquo;t really matter as long as your dependencies are there.</p>
<p>Of course we typically follow the standard pattern as shown below, but the larger the template the harder it is to see the breaks between.</p>
<ol>
<li>Header Details</li>
<li>Parameters</li>
<li>Variables</li>
<li>Resources</li>
<li>Outputs</li>
</ol>
<h2 id="my-structuring">My Structuring</h2>
<p>As I have mentioned above, I have made section breaks to provide the desired structure. This can be seen in the example below:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-Bicep" data-lang="Bicep"><span style="display:flex;"><span><span style="color:#ff79c6">/**********************************</span>
</span></span><span style="display:flex;"><span><span style="color:#8be9fd;font-style:italic">Bicep</span> <span style="color:#8be9fd;font-style:italic">Template</span>: {<span style="color:#8be9fd;font-style:italic">DeploymentName</span>}
</span></span><span style="display:flex;"><span><span style="color:#8be9fd;font-style:italic">Company</span>: {<span style="color:#8be9fd;font-style:italic">Company</span>}
</span></span><span style="display:flex;"><span><span style="color:#ff79c6">***********************************/</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#8be9fd;font-style:italic">targetScope</span> = <span style="color:#f1fa8c">&#39;resourceGroup&#39;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#6272a4">// ** Parameters **</span>
</span></span><span style="display:flex;"><span><span style="color:#6272a4">// ****************</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#6272a4">// ** Variables **</span>
</span></span><span style="display:flex;"><span><span style="color:#6272a4">// ***************</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#6272a4">// ** Resources **</span>
</span></span><span style="display:flex;"><span><span style="color:#6272a4">// ***************</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#6272a4">// ** Outputs **</span>
</span></span><span style="display:flex;"><span><span style="color:#6272a4">// *************</span>
</span></span></code></pre></div><p>This being said, either writing this out each time, or finding a previous example to copy is not the best experience nor is it productive.</p>
<h2 id="vs-code-snippets">VS Code Snippets</h2>
<p>After some looking around I decided to make use of VS Code Snippets <sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup> . Reasoning being, that I can setup a specific snippet for a language (<em>Bicep</em>) and either invoke it through intellisense or through a keyboard shortcut.</p>
<p>The Snippet that I setup is as follows:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-json" data-lang="json"><span style="display:flex;"><span>{
</span></span><span style="display:flex;"><span>	<span style="color:#ff79c6">&#34;new bicep file&#34;</span>: {
</span></span><span style="display:flex;"><span>		<span style="color:#ff79c6">&#34;isFileTemplate&#34;</span>: <span style="color:#ff79c6">true</span>,
</span></span><span style="display:flex;"><span>		<span style="color:#ff79c6">&#34;prefix&#34;</span>: <span style="color:#f1fa8c">&#34;bicepTemplate&#34;</span>,
</span></span><span style="display:flex;"><span>		<span style="color:#ff79c6">&#34;body&#34;</span>: [
</span></span><span style="display:flex;"><span>			<span style="color:#f1fa8c">&#34;/**********************************&#34;</span>,
</span></span><span style="display:flex;"><span>			<span style="color:#f1fa8c">&#34;Bicep Template: {DeploymentName}&#34;</span>,
</span></span><span style="display:flex;"><span>			<span style="color:#f1fa8c">&#34;Company: {Company}&#34;</span>,
</span></span><span style="display:flex;"><span>			<span style="color:#f1fa8c">&#34;***********************************/&#34;</span>,
</span></span><span style="display:flex;"><span>			<span style="color:#f1fa8c">&#34;&#34;</span>,
</span></span><span style="display:flex;"><span>			<span style="color:#f1fa8c">&#34;targetScope = &#39;resourceGroup&#39;&#34;</span>,
</span></span><span style="display:flex;"><span>			<span style="color:#f1fa8c">&#34;&#34;</span>,
</span></span><span style="display:flex;"><span>			<span style="color:#f1fa8c">&#34;// ** Parameters **&#34;</span>,
</span></span><span style="display:flex;"><span>			<span style="color:#f1fa8c">&#34;// ****************&#34;</span>,
</span></span><span style="display:flex;"><span>			<span style="color:#f1fa8c">&#34;&#34;</span>,
</span></span><span style="display:flex;"><span>			<span style="color:#f1fa8c">&#34;&#34;</span>,
</span></span><span style="display:flex;"><span>			<span style="color:#f1fa8c">&#34;&#34;</span>,
</span></span><span style="display:flex;"><span>			<span style="color:#f1fa8c">&#34;// ** Variables **&#34;</span>,
</span></span><span style="display:flex;"><span>			<span style="color:#f1fa8c">&#34;// ***************&#34;</span>,
</span></span><span style="display:flex;"><span>			<span style="color:#f1fa8c">&#34;&#34;</span>,
</span></span><span style="display:flex;"><span>			<span style="color:#f1fa8c">&#34;&#34;</span>,
</span></span><span style="display:flex;"><span>			<span style="color:#f1fa8c">&#34;&#34;</span>,
</span></span><span style="display:flex;"><span>			<span style="color:#f1fa8c">&#34;// ** Resources **&#34;</span>,
</span></span><span style="display:flex;"><span>			<span style="color:#f1fa8c">&#34;// ***************&#34;</span>,
</span></span><span style="display:flex;"><span>			<span style="color:#f1fa8c">&#34;&#34;</span>,
</span></span><span style="display:flex;"><span>			<span style="color:#f1fa8c">&#34;&#34;</span>,
</span></span><span style="display:flex;"><span>			<span style="color:#f1fa8c">&#34;&#34;</span>,
</span></span><span style="display:flex;"><span>			<span style="color:#f1fa8c">&#34;// ** Outputs **&#34;</span>,
</span></span><span style="display:flex;"><span>			<span style="color:#f1fa8c">&#34;// *************&#34;</span>,
</span></span><span style="display:flex;"><span>			<span style="color:#f1fa8c">&#34;&#34;</span>
</span></span><span style="display:flex;"><span>		]
</span></span><span style="display:flex;"><span>	}
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><h3 id="intellisense">Intellisense</h3>
<p>
  <img src="/images/posts/2022/11/Intelli.PNG" alt="Intellisense">

</p>
<h3 id="result">Result</h3>
<p>
  <img src="/images/posts/2022/11/Result.PNG" alt="Intellisense">

</p>
<h2 id="over-to-you">Over to You</h2>
<p>To either setup your own snippets, or see if one already exists have a look at the following:</p>
<ul>
<li><strong>Create your own</strong> |  <a href="https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets">https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets</a></li>
<li><strong>Install snippets from the Marketplace</strong> | <a href="https://code.visualstudio.com/docs/editor/userdefinedsnippets#_install-snippets-from-the-marketplace">https://code.visualstudio.com/docs/editor/userdefinedsnippets#_install-snippets-from-the-marketplace</a></li>
</ul>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>Snippets in Visual Studio Code | <a href="https://code.visualstudio.com/docs/editor/userdefinedsnippets">https://code.visualstudio.com/docs/editor/userdefinedsnippets</a>&#160;<a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
</ol>
</div>
]]></content:encoded></item></channel></rss>