คุณต้องทราบVisual Studio Codeอยู่แล้วในตอนนี้ ที่เป็นเช่นนี้เพราะเราเคยพูดถึงเรื่องนี้ไปแล้วในบทความหนึ่งเมื่อนานมาแล้ว ในบทความนี้ เราจะมาพูดถึงวิธีทำให้โปรแกรมที่คุณเขียนดีขึ้น สำหรับฉัน 'ดีกว่า' หมายถึงแนวคิดของโค้ดที่ปราศจากข้อผิดพลาดและปรับให้เหมาะสม ซึ่งจะนำไปสู่การปรับใช้และการดำเนินการที่ราบรื่นยิ่งขึ้นของโครงการที่เกี่ยวข้อง เราจะครอบคลุมทุกอย่างเกี่ยวกับการเขียนโค้ดบนIDEในบทความนี้ แต่ก่อนหน้านั้น เราควรครอบคลุมถึงสิ่งที่ภาษาและเทคโนโลยีทั้งหมดได้รับการสนับสนุนโดยVisual Studio Codeได้ดีขึ้น

วิธีเขียนและปรับปรุงโปรแกรมแรกของคุณใน Visual Studio Code

บทแนะนำ Visual Studio Codeสำหรับผู้เริ่มต้นจะแสดงวิธีการคอมไพล์หรือเขียนโปรแกรมหรือโค้ดแรกของคุณ Microsoftเพิ่มการรองรับส่วนขยายในVisual Studio ^(Visual) Code ^{(Studio Code)}ส่วนขยายเหล่านี้ช่วยปรับปรุงและเพิ่มประสิทธิภาพโค้ดของคุณสำหรับภาษาต่างๆ เช่นPHP , C, C++ และอีกมากมาย!

ภาษาที่รองรับโดย Visual Studio Code

ตามหน้าเว็บที่เผยแพร่บนเว็บไซต์ทางการของ Visual Studio Codeต่อไปนี้เป็นภาษาหลักที่IDE รองรับ ^(IDE)ได้แก่ C++, C#, CSS , Dockerfile , Go, HTML , Java , JavaScript , JSON , Less , Markdown , PHP , Python , Sass , T-SQLและTypeScript

ด้วยสิ่งนี้ คุณจะได้รับฟีเจอร์ภาษาบางอย่างที่ช่วยให้คุณเขียนโค้ดได้ดีขึ้น โค้ดที่ดีกว่านี้คล้ายกันในสิ่งที่เราพูดถึงข้างต้น ดังนั้น ด้วยการสนับสนุนส่วนขยายจำนวนมาก เราจึงได้รับการสนับสนุนมากมายสำหรับสิ่งต่อไปนี้:

Syntax highlighting and bracket matching, Smart completions (IntelliSense), Linting and corrections, Code navigation (Go to Definition, Find All References), Debugging and Refactoring.sc

เมื่อภาษาหรือนามสกุลไฟล์ได้รับการสนับสนุนโดยIDEคุณจะเห็นชื่อของภาษานั้น ๆ ใน  แถบสถานะ ^{(Status Bar )}ที่มุมล่างขวา มิฉะนั้นจะแสดงมาร์กอัป^(markdown)หรือข้อความธรรมดา^{(plaintext )}ที่เขียน

ตัวอย่างเช่น:

ภาพด้านบนคือเมื่อ IDE ไม่ได้ระบุ^{(does not identify)}ไฟล์ว่าเป็นประเภทที่รู้จัก ดังนั้นจึง^(Hence)ถูกกล่าวถึงเป็น  ข้อความธรรมดา^{(Plain Text.)}

ตอนนี้ ให้เรามาดูวิธีการติดตั้งและใช้ส่วนขยายเหล่านี้เพื่อใช้ประโยชน์จากความสามารถอย่างเต็มที่

วิธีการติดตั้งส่วนขยายบน Visual Studio Code

ดังนั้น ในขั้นตอนแรกเมื่อคุณเปิด Visual Studio Codeคุณอาจเห็นหน้าจอค่อนข้างคล้ายกันดังที่แสดงในตัวอย่างด้านล่าง

หลังจากนั้น คลิกที่  ปุ่ม Extensions ที่เมนูแนวตั้งด้านซ้ายมือ ดังแสดงในภาพหน้าจอด้านล่าง

จากนั้นคุณจะเห็นแผงใหม่เลื่อนจากด้านซ้ายเอง ใน แถบ ค้นหา^(Search)ของแผงควบคุม ค้นหาภาษาหรือบริการที่คุณต้องการให้ส่วนขยาย ฉันจะค้นหาส่วนขยายสำหรับPHPเพราะฉันจะสาธิตมัน

จากรายการที่คุณได้รับจากผลการค้นหา ให้เลือกรายการที่เหมาะสมที่สุดเพื่อตอบสนองความต้องการของคุณ หากคุณคลิกที่รายการส่วนขยาย คุณจะได้รับรายละเอียดเพิ่มเติม เช่น คำอธิบาย ชื่อผู้พัฒนา คุณลักษณะ ขนาด ความเข้ากันได้ และอื่นๆ

เมื่อคุณกด ปุ่ม ติดตั้ง ^(Install )คุณก็พร้อมแล้ว!

เมื่อฉันติดตั้งPHP IntelliSense Extensionบน Visual Studio Codeมันเริ่มแสดงคำแนะนำที่ชาญฉลาดและการเติมข้อความอัตโนมัติสำหรับไวยากรณ์ที่แตกต่างกัน ดังนั้น^(Hence)สิ่งนี้จะลดโอกาสในการเกิดข้อผิดพลาด และจะทำให้การดำเนินการและการปรับใช้แอปพลิเคชันของคุณราบรื่น

มีการแทรก ตัวอย่างแบบเรียลไทม์ของIntelliSenseที่ทำงานกับ ไฟล์ PHPไว้ที่นี่

หากคุณอยากรู้อยากลองสิ่งที่ผมทำในตอนนี้ เพียงทำตามขั้นตอนง่ายๆ เหล่านี้

ติดตั้ง Visual Studio Code^{(Install Visual Studio Code)}จากนั้นค้นหาหรือรับส่วนขยายสำหรับPHPตามคำแนะนำในขั้นตอนด้านบน หรือไปที่ลิงก์นี้marketplace.visualstudio.com

ตอนนี้สร้างไฟล์ใหม่และบันทึกเป็น  นามสกุล .php สำหรับไฟล์

<?php
    echo "This is Ayush from TheWindowsClub.com";
?>

บันทึก^(Save)แล้วย้ายไฟล์ไปยังโฟลเดอร์ htdocs ของโฟลเดอร์ XAMPP หรือWWW ของ WAMP

ในที่สุดก็เปิดเว็บเบราว์เซอร์ที่คุณชื่นชอบแล้วป้อนURL ในเครื่อง สำหรับไฟล์ของคุณ จากนั้นคุณจะเห็นผลลัพธ์เช่นนี้

หวังว่า^(Hope)คุณจะเข้าใจได้ง่าย

Enhancing code on Visual Studio Code with the help of Extensions

You must be aware of Visual Studio Code already by now. This is so because we already talked about it in an article a while ago. Now, in this article, we are going to talk about how to make the programs that you write better. For me, ‘better’ refers to the notion of error-free, optimized code which will lead to smoother deployment and execution of the respective project. We will be covering everything about writing some code on the IDE in this article. But before that, we should cover what all languages and technologies are supported better by Visual Studio Code.

How to write & enhance your first program on Visual Studio Code

This Visual Studio Code tutorial for beginners will show you how to compile or write your first program or code. Microsoft added support for extensions in Visual Studio Code. These extensions help to enhance and optimize your code for languages like PHP, C, C++ and more!

Languages supported by Visual Studio Code

According to the webpage published on the official website of Visual Studio Code, the following are the main languages supported by the IDE. They include C++, C#, CSS, Dockerfile, Go, HTML, Java, JavaScript, JSON, Less, Markdown, PHP, Python, Sass, T-SQL, and TypeScript.

Now with this, you get some language features that help you write better code. This better code is similar in the track of what we talked about above. So, with support for numerous extensions, we get the rich support for the following:

Syntax highlighting and bracket matching, Smart completions (IntelliSense), Linting and corrections, Code navigation (Go to Definition, Find All References), Debugging and Refactoring.sc

When the language or the file extension is supported by the IDE, you will see the name of that particular language in the Status Bar on the bottom right corner. Else, it will show you markdown or plaintext written.

For example:

The above image is when the IDE does not identify the file as a known type. Hence, it is mentioned as Plain Text.

Now, let us take a look at how to install and use these extensions to leverage the full advantage of their capabilities.

How to install Extensions on Visual Studio Code

So, in the first step when you open Visual Studio Code, you might see a screen somewhat similar as shown in the snippet below.

After that, click on the Extensions button on the left side vertical menu as shown in the screenshot below.

Then you will see a new panel sliding from the left side itself. In the Search bar of the panel, search for the language or service you want an extension for. I will be searching for an extension for PHP because I will be demoing it.

From the list that you get as search results, select the one that is most suitable to fulfill your needs. If you click on the listing of the extension, you will get more details like description, developer’s name, features, size, compatibility, and more.

Once you hit on the Install button, you are good to go!

Now as I installed the PHP IntelliSense Extension on Visual Studio Code, it starts displaying smart suggestions and auto-completion for different syntax. Hence, this will decrease the chances of an error and will make the execution and deployment of your application smooth.

The real-time example of IntelliSense working with a PHP file is inserted here.

If you are curious to try out what I did now, just follow these quick steps.

Install Visual Studio Code and then, search or get the extension for PHP as instructed in the steps above or follow this link marketplace.visualstudio.com.

Now create a new file and save it in .php extension for the file.

<?php
    echo "This is Ayush from TheWindowsClub.com";
?>

Save and then move the files to the htdocs folder of XAMPP or WWW folder of WAMP.

Now, finally open your favorite web browser and enter the local URL for your file. Then you will see an output like this.

Hope you find it easy to understand.

Related posts

• Visual Studio Code - วิธีการดาวน์โหลดและติดตั้ง VSC

• CudaText เป็นโปรแกรมเมอร์ Code Editor ฟรีสำหรับ Windows

• Java ภาษาการเขียนโปรแกรมคืออะไร ตัวอย่าง Code

• SynWrite Editor: Free Text & Source Code Editor สำหรับ Windows 10

• Teach Kids ถึง Code โดยใช้ Tools and Programs เหล่านี้จาก Microsoft

• Manage legacy Web Apps กับ Microsoft's Enterprise Mode Site List Portal

• วิธีสร้าง Windows app ดั้งเดิมสำหรับเว็บไซต์หรือเว็บแอปใด ๆ

• Jedit เป็นหนึ่งที่น่าประทับใจ Text Editor สำหรับโปรแกรมเมอร์คอมพิวเตอร์

• Best C++ Extensions สำหรับ Visual Studio Code

• Download, Install, Learn Microsoft Small Basic programming ภาษา

• Slack apps: Remote Teams, Productivity, Developers, Developers, Developers

• เว็บไซต์ที่ดีที่สุดในการเรียนรู้ Coding online ฟรี

• ภาษาการเขียนโปรแกรม Python คืออะไร?

• GTK+ Runtime Environment คืออะไร ทำไม PC need ของคุณถึง

• เคล็ดลับในการใช้ Inspect Element ของ Google Chrome browser

• Fix Command python setup.py egg_info ล้มเหลวด้วย error code 1

• Chrome Development Tools Tutorials, Tips, Tricks

• Redwood Resource Extractor: แยกทรัพยากรจากไฟล์ EXE

• ภาษา R programming คืออะไรและทำไมคุณควรใช้ RStudio

• วิธีเปิดใช้งาน Developer Mode ใน Windows 11/10