<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: RssXio</title>
    <description>The latest articles on DEV Community by RssXio (@jxzho).</description>
    <link>https://dev.to/jxzho</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1179072%2F0294c46a-971c-4501-8540-9b9204e2409f.gif</url>
      <title>DEV Community: RssXio</title>
      <link>https://dev.to/jxzho</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/jxzho"/>
    <language>en</language>
    <item>
      <title>A awesome cli-tool for cooking VSCode snippets.</title>
      <dc:creator>RssXio</dc:creator>
      <pubDate>Sat, 07 Oct 2023 03:56:07 +0000</pubDate>
      <link>https://dev.to/jxzho/csnp-generate-your-own-vscode-snippets-faster-2j3k</link>
      <guid>https://dev.to/jxzho/csnp-generate-your-own-vscode-snippets-faster-2j3k</guid>
      <description>&lt;p&gt;csnp now is release 1.4.0!&lt;/p&gt;

&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;csnp&lt;/strong&gt; is a node script written by typescript&lt;/p&gt;

&lt;p&gt;Based on VS Code built-in customizable code snippets&lt;a href="https://code.visualstudio.com/docs/editor/userdefinedsnippets" rel="noopener noreferrer"&gt;（official documentation introduction）&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Give developers the ability to create VS Code snippets quickly and easily&lt;/p&gt;

&lt;h2&gt;
  
  
  Usage Scene
&lt;/h2&gt;

&lt;p&gt;In your code file, use the command &lt;code&gt;-log&lt;/code&gt; and press enter to generate the code &lt;code&gt;console.log('-&amp;gt; log', _)&lt;/code&gt;（ &lt;em&gt;_ is the position of the cursor&lt;/em&gt;）&lt;/p&gt;

&lt;p&gt;In the .code-snippet file of VS Code&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;command &lt;code&gt;-log&lt;/code&gt; represents a prefix&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;codes &lt;code&gt;console.log('-&amp;gt; log', _)&lt;/code&gt; represents a body&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The &lt;strong&gt;csnp&lt;/strong&gt; command can generate the log.csnp file quickly, which can be managed by markdown friendly syntax and generated under the root path of the project&lt;/p&gt;

&lt;p&gt;exp: &lt;em&gt;.vscode/.csnp/js/log.csnp&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;The &lt;strong&gt;js&lt;/strong&gt; of the path in &lt;strong&gt;csnp&lt;/strong&gt; is stand for csnp type&lt;/p&gt;

&lt;h2&gt;
  
  
  Easy Start
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# 1. install global&lt;/span&gt;
&lt;span class="nv"&gt;$ &lt;/span&gt;npm i &lt;span class="nt"&gt;-g&lt;/span&gt; csnp

&lt;span class="c"&gt;# 2. init csnp file&lt;/span&gt;
&lt;span class="nv"&gt;$ &lt;/span&gt;csnp

&lt;span class="c"&gt;# 3. open csnp file，edit your own code snippets&lt;/span&gt;

&lt;span class="c"&gt;# 4. generate code snipepts&lt;/span&gt;
&lt;span class="nv"&gt;$ &lt;/span&gt;csnp push
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  .csnp File
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;&lt;span class="nn"&gt;---&lt;/span&gt;
&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Log&lt;/span&gt;
&lt;span class="na"&gt;prefix&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s1"&gt;'&lt;/span&gt;&lt;span class="s"&gt;-log'&lt;/span&gt;
&lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;log&lt;/span&gt;&lt;span class="nv"&gt; &lt;/span&gt;&lt;span class="s"&gt;sth"&lt;/span&gt;
&lt;span class="nn"&gt;---&lt;/span&gt;
console.log('-&amp;gt; log', $1)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The log.csnp will converts the js.code-snippets file by executing the 'csnp push' command, then you can use the '-log' command.&lt;/p&gt;

&lt;h2&gt;
  
  
  .code-snippets File
&lt;/h2&gt;

&lt;p&gt;The js.code-snippets file is a piece of json, and VS Code will automatically parses the file with this suffix file.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"Log"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"prefix"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"-log"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"body"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="s2"&gt;"console.log($1)"&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"description"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"log sth"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  End
&lt;/h2&gt;

&lt;p&gt;If you think csnp helpful, thanks for your star ⭐️ ~&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/jxzho/csnp" rel="noopener noreferrer"&gt;Github Link&lt;/a&gt;&lt;/p&gt;

</description>
      <category>vscode</category>
      <category>codesnippet</category>
    </item>
  </channel>
</rss>
