Article on VS Code Extension (#20)

_posts/2024-04-15-using-visual-studio-code-with-playcanvas.markdown

@@ -0,0 +1,48 @@
+---
+author: will
+comments: false
+date: 2024-04-15 11:00:00+00:00
+layout: post
+link: https://blog.playcanvas.com/using-visual-studio-code-with-playcanvas/
+slug: using-visual-studio-code-with-playcanvas
+title: "Using Visual Studio Code with PlayCanvas"
+categories:
+  - Announcement
+  - News
+tags:
+  - javascript
+  - open-source
+  - scripting
+  - workflow
+---
+
+[Visual Studio Code](https://code.visualstudio.com/) is massively popular. In the Stack Overflow 2023 Developer Survey, Visual Studio Code was ranked the most popular developer environment tool among 86,544 respondents, with **73.71%** reporting that they use it.
+
+Any PlayCanvas developer building directly on top of the Engine will very likely opt to use VS Code. But if you use the PlayCanvas Editor, you will normally rely on the built-in, browser-based Code Editor. Today, we're excited to give you another option by launching an open-source **Visual Studio Code Extension for PlayCanvas**.
+
+![VS Code Extension](/assets/media/vscode-extension.webp)
+
+## Benefits
+
+The PlayCanvas Code Editor is actually built on the [Monaco Editor](https://github.com/microsoft/monaco-editor), the beating heart of VS Code. So why use VS Code instead of the PlayCanvas Code Editor?
+
+* [GitHub Copilot](https://github.com/features/copilot) - leverage AI to help you write PlayCanvas code faster.
+* Powerful IntelliSense tools (code completion, parameter info, quick info, and member lists).
+* Leverage a huge library of other extensions to accelerate your development.
+
+## We ❤️ Open Source
+
+As you might expect, we have open sourced the VS Code extension under a liberal MIT license!
+
+* [VS Code Extension on GitHub](https://github.com/playcanvas/vscode-extension)
+
+So if you find a bug or have a suggestion, please do [log an issue](https://github.com/playcanvas/vscode-extension/issues). And for the more adventurous, consider making a code contribution!
+
+We want you to feel empowered to make these tools your own. Let's make them awesome together! 🙌
+
+## Get Started Now
+
+If this all sounds great to you, why not give it a try? Head over to the User Manual for instructions on how to get started:
+
+[READ THE DOCS](https://developer.playcanvas.com/user-manual/scripting/vscode-extension/){: .cta-button }
+

assets/main.scss

@@ -0,0 +1,23 @@
+---
+---
+
+@import "minima";
+
+/* Custom Styles for CTA Button */
+.cta-button {
+    display: inline-block;
+    background-color: #f57c00; /* PlayCanvas orange */
+    color: white;
+    padding: 10px 20px;
+    margin: 20px 0;
+    border-radius: 5px;
+    text-align: center;
+    text-decoration: none;
+    font-weight: bold;
+    transition: background-color 0.3s;
+}
+
+.cta-button:hover {
+    background-color: #e65100; /* Darker orange for hover effect */
+    color: #ffffff;
+}