The latest articles on DEV Community by Yezi (@yezi). https://dev.to/yezi 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%2F612721%2F1cfe96c8-6e45-4216-bf2f-1bd490d42d4a.jpg https://dev.to/yezi en Yezi Mon, 12 Apr 2021 02:52:16 +0000 https://dev.to/yezi/vscode-green-eyecare-theme-934 https://dev.to/yezi/vscode-green-eyecare-theme-934 <h2> Green Eyecare Theme </h2> <p><a href="https://marketplace.visualstudio.com/items/yezige.vscode-theme-green-eyecare"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--d03ToWIf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://vsmarketplacebadge.apphb.com/version/yezige.vscode-theme-green-eyecare.svg" alt="Marketplace"></a><a href="https://marketplace.visualstudio.com/items/yezige.vscode-theme-green-eyecare"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--fIVKY5U8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://vsmarketplacebadge.apphb.com/installs/yezige.vscode-theme-green-eyecare.svg" alt="Installs"></a><a href="https://marketplace.visualstudio.com/items/yezige.vscode-theme-green-eyecare"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Ri5MfxfN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://vsmarketplacebadge.apphb.com/rating-short/yezige.vscode-theme-green-eyecare.svg" alt="Ratings"></a></p> <p><a href="https://github.com/yezige/vscode-theme-green-eyecare">Green Eyecare</a> theme based on Material Design.</p> <h2> Screenshots </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--g85q80A1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/yezige/vscode-theme-green-eyecare/master/screenshots/preview.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--g85q80A1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/yezige/vscode-theme-green-eyecare/master/screenshots/preview.png" alt="Screenshots"></a></p> <p><em>The font in the picture is Cascadia Code</em></p> <h2> Install </h2> <h3> Install using GUI </h3> <ol> <li>Enter extension panel or press <code>Ctrl+Shift+X</code> </li> <li>Search <code>Green Eyecare</code> </li> <li>Click <code>install</code> </li> </ol> <h3> Install using Command Palette </h3> <ol> <li>Install using Command Palette</li> <li>Go to <code>View</code> -&gt; <code>Command Palette</code> or press <code>Ctrl+Shift+P</code> </li> <li>Then enter <code>Install Extension</code> </li> <li>Write <code>Green Eyecare</code> </li> <li>Select it or press Enter to install</li> </ol> <h2> Custom font </h2> <h3> Microsoft font (recommended): <strong>Cascadia Code</strong> </h3> <p>Installation: <a href="https://github.com/microsoft/cascadia-code"><strong>Cascadia Code</strong></a></p> <p>Screenshots:</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--MO7h1vcI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/yezige/vscode-theme-green-eyecare/master/screenshots/preview-cascadia-code.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MO7h1vcI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/yezige/vscode-theme-green-eyecare/master/screenshots/preview-cascadia-code.png" alt="Screenshots"></a></p> <h4> Set font of VSCode </h4> <p>If you download and install the font in your system, you can add this option to have a custom font:</p> <ol> <li>Go to <code>View</code> -&gt; <code>Command Palette</code> or press <code>Ctrl+Shift+P</code> </li> <li>Then enter <code>Open Settings(JSON)</code> </li> <li> <p>In the opened file, modify or add the value of <code>editor.fontFamily</code> to <code>Cascadia Code</code><br> </p> <pre class="highlight json"><code><span class="p">{</span><span class="w"> </span><span class="nl">"editor.fontFamily"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Cascadia Code"</span><span class="w"> </span><span class="p">}</span><span class="w"> </span></code></pre> </li> </ol> <h4> Set line height of VSCode </h4> <div class="highlight js-code-highlight"> <pre class="highlight json"><code><span class="p">{</span><span class="w"> </span><span class="nl">"editor.lineHeight"</span><span class="p">:</span><span class="w"> </span><span class="mi">22</span><span class="w"> </span><span class="p">}</span><span class="w"> </span></code></pre> </div> <h4> No need to set font size </h4> <h3> My merged font: <strong>Inconsolata + Yue Yuan</strong> </h3> <p>Installation: <a href="https://raw.githubusercontent.com/yezige/vscode-theme-green-eyecare/master/fonts/LZ-YueYuan-Inconsolata.otf"><strong>LZ YueYuan Inconsolata</strong></a></p> <p>Screenshots:</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--YKTvr4Jb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/yezige/vscode-theme-green-eyecare/master/screenshots/preview-LZ-YueYuan-Inconsolata.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--YKTvr4Jb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/yezige/vscode-theme-green-eyecare/master/screenshots/preview-LZ-YueYuan-Inconsolata.png" alt="Screenshots"></a></p> <h4> Set font of VSCode </h4> <p>If you download and install the font in your system, you can add this option to have a custom font:</p> <ol> <li>Go to <code>View</code> -&gt; <code>Command Palette</code> or press <code>Ctrl+Shift+P</code> </li> <li>Then enter <code>Open Settings(JSON)</code> </li> <li> <p>In the opened file, modify or add the value of <code>editor.fontFamily</code> to <code>LZ YueYuan Inconsolata</code><br> </p> <pre class="highlight json"><code><span class="p">{</span><span class="w"> </span><span class="nl">"editor.fontFamily"</span><span class="p">:</span><span class="w"> </span><span class="s2">"LZ YueYuan Inconsolata"</span><span class="w"> </span><span class="p">}</span><span class="w"> </span></code></pre> </li> </ol> <h4> Set line height of VSCode </h4> <div class="highlight js-code-highlight"> <pre class="highlight json"><code><span class="p">{</span><span class="w"> </span><span class="nl">"editor.lineHeight"</span><span class="p">:</span><span class="w"> </span><span class="mi">22</span><span class="w"> </span><span class="p">}</span><span class="w"> </span></code></pre> </div> <h4> Set font size of VSCode (Only fine fonts are recommended) </h4> <div class="highlight js-code-highlight"> <pre class="highlight json"><code><span class="p">{</span><span class="w"> </span><span class="nl">"editor.fontSize"</span><span class="p">:</span><span class="w"> </span><span class="mi">15</span><span class="w"> </span><span class="p">}</span><span class="w"> </span></code></pre> </div> <h2> What's new? </h2> <p>Click here to go to the <a href="https://github.com/yezige/vscode-theme-green-eyecare/blob/master/CHANGELOG.md">Changelog</a></p> <h2> See my blog for details </h2> <p><a href="https://www.liu.app/2018/08/29/VSCode/%E4%BF%AE%E6%94%B9VSCode%E7%9A%84%E4%B8%BB%E9%A2%98%E9%A2%9C%E8%89%B2%E4%B8%BA%E6%8A%A4%E7%9C%BC%E7%BB%BF/">liu.app</a></p> <h2> Enjoy 🎉🎉🎉 </h2> vscode theme green eyecare