One place for hosting & domains

      Visual

      How To Set Up Visual Studio Code (VS Code) for PHP Development


      Introduction

      Visual Studio Code, also known as VS Code, is a free source code editor — or integrated development environment (IDE) — available for all major operating systems.

      With a large collection of extensions for many programming languages, VS Code can be customized to serve a wide variety of development needs. In this guide, you’ll learn how to set up Visual Studio Code for working on PHP projects.

      The gif shows the VS Code interface for PHP development

      Prerequisites

      To follow this guide, you’ll need to download and install the appropriate version of Visual Studio Code for your operating system.

      The instructions in this guide were validated on an Ubuntu 20.04 desktop computer, but they should work seamlessly in all operating systems that are supported by VS Code. Please note, though, that keyboard shortcut keys may need to be slightly modified for compatibility with MacOS systems.

      Right after installation, VS Code already recognizes PHP code and helps with syntax highlighting, basic debugging, and code indentation. These features are suitable for quick edits or when working with individual PHP scripts. Working in larger projects, though, can become difficult without more context around the code and how each file interacts and integrates within the larger project.

      There are a number of VS Code extensions that can help speed up your productivity when working on PHP projects. In this guide, we’ll install and set up PHP Intelephense, a popular PHP extension for VS Code that provides several advanced features such as improved code completion, better navigation between components, rich information tooltips on mouse hover, code auto formatting, and real time error reporting based on static code analysis.

      Open the extensions tab by clicking on the last icon on the left menu bar, or by pressing CTRL + SHIFT + X. This will bring up a sidebar menu with a search box and a list of popular or recommended extensions. Type “php” or “intelephense” to locate the PHP Intelephense extension. Click on the Install button to install and enable the extension.

      The gif shows how to access the extensions menu on the left sidebar

      Once installation is complete, Intelephense’s official documentation recommends that you disable the built-in PHP Language Features extension that comes with VS Code.

      To disable this extension, type @builtin php in the Extensions search box to locate the built-in PHP extensions. Then click on the settings icon for the PHP Language Features extension, and click the Disable option in the drop-down menu.

      The gif shows how to disable the builtin PHP Language Features extension

      If you have any files open in VS Code, you’ll need to reload the editor to apply the changes.

      You can install other extensions by following the same process described for the PHP Intelephense extension, but be aware that some extensions will require additional software to be installed on your system. Check the extension documentation to make sure you have requirements set appropriately.

      Step 2 — Importing or Creating a New PHP Project

      To import an existing PHP project into VS Code, click on the first icon on the left menu bar or type CTRL + SHIFT + E to access the file explorer. Click the Open Folder button and select your project’s directory. In case you are creating a new project, you can create a new folder and select that as your project directory.

      The gif shows how to import a PHP project to VS Code

      The explorer window will now show the project’s directory tree, giving you quick access to files and directories on your project.

      Step 3 — Customizing Theme and Editor Font (Optional)

      Although not necessary, it is often a good idea to customize the appearance of your editor to make it more comfortable to use in the longer term. As a developer you may spend several hours every day looking at an IDE such as VS Code, and for that reason it’s important to make sure the editor font has an appropriate size, and the contrast is enough for good readability without tiring your eyes too quickly.

      You may want to experiment with different themes and fonts in order to find a custom setup that works well for you.

      Changing VS Code Theme

      VS Code comes with a few different themes that allow you to change the colors used in the editor interface and in the code highlighting. Both dark and light styles are included by default.

      Go to File -> Preferences -> Color Theme or type CTRL + K + T to select a different theme for VS Code.

      The gif shows how to change VS Code theme

      You can also install theme extensions to further customize VS Code’s appearance. If you search for theme within the extensions tab (CTRL + SHIFT + X), you’ll find several theme extensions in different styles and colors, including color schemes ported from other popular editors and platforms.

      Adjusting the Font

      Although the default VS Code font settings will be good enough for many users, you may want to adjust the size and the type of the editor font for increased readability.

      If you would like to modify the font size or change to another type, you can go to File -> Preferences -> Settings, then choose Text Editor on the left menu. Then, click on Font in the submenu that opens up. That section contains font family and size settings which you can tweak as preferred.

      The gif shows how to change VS Code editor font size

      The changes are immediately saved and applied to all current open files.

      Conclusion

      Visual Studio Code is a lightweight yet powerful code editor that can be customized to suit the needs of most developers. In this guide, you learned how to install and configure the PHP Intelephense extension for extra support while working on PHP projects, how to import and create new projects within VS Code, and how to customize the editor appearance for a more comfortable coding experience.

      For more tutorials on Visual Studio Code, check our VS Code tag page. If you’d like to learn more about PHP development, you can refer to our How To Code in PHP series for an introduction to the language, and our PHP tag page for more PHP tutorials.



      Source link

      How to Fix White Text and Missing Buttons in the WordPress Visual Editor (5 Steps)


      Picture this: You log in to your WordPress dashboard to write a new blog post. You fire up the Classic Editor, only to find a problem. All of the formatting buttons are missing, and the text is white and impossible to see.

      Encountering this error can be frustrating. It may even prevent you from getting work done, potentially putting you behind schedule. Fortunately, there are several solutions to this issue.

      In this article, we’ll look at exactly what this error involves and then walk you through how to fix it in five steps. Let’s get started!

      An Introduction to the White Text and Missing Buttons Error in the WordPress Visual Editor

      Before we dig into this error, let’s clarify exactly what we mean by the “visual editor.” This refers to the nicely-formatted editor you use to create your posts or pages in WordPress, whether that’s the Classic Editor or the newer Block Editor.

      The error we’re dealing with in this article occurs with the visual editor when using the Classic Editor plugin.

      The WordPress visual editor.

      The formatting buttons along the top suddenly vanish. Additionally, the text you write in the editor field may appear the same color as the background, making it unreadable.

      This makes using the Classic Editor pretty much impossible. If you rely on it to create your blog content, you’ll want to fix this problem as quickly as possible. Fortunately, this issue isn’t difficult to correct.

      What to Do Before You Start Troubleshooting

      Before you start troubleshooting, we recommend making a backup of your site. If you’re using DreamHost, we make the backup process incredibly easy.

      If you’re using a different hosting provider, it likely also offers a backup solution. You can consult the appropriate documentation for instructions. You can also opt for a WordPress backup plugin such as UpdraftPlus.

      Skip the WordPress Error Stress

      Avoid troubleshooting when you sign up for DreamPress. Our friendly WordPress experts are available 24/7 to help solve website problems — big or small.

      How to Fix White Text and Missing Buttons in the WordPress Visual Editor (In 5 Steps)

      This error is most likely either a problem with your browser cache or with the Classic Editor itself  — both of which can be easily fixed. We recommend following these five steps in order, and only proceeding to the next if you’re still experiencing the issue.

      Step 1: Clear Your Browser Cache

      The first and simplest method you can try is clearing your browser cache. Your browser saves versions of websites you visit (including your WordPress editor) to make loading them quicker.

      If your cache is corrupted or has stored a version of a page with errors, it may continue to load the broken page. Clearing the cache forces the browser to load a fresh copy of the editor, hopefully resolving the problem.

      To clear your cache in Google Chrome, click on the three-dot menu icon in the upper-right corner, and then click on Settings. Under the Privacy and security section, select Clear browsing data.

      Options for clearing user data and cache in Google Chrome.

      In the pop-up, make sure only Cached images and files is selected, and then click on Clear data. If you don’t use Chrome or want further guidance, you can refer to our guide on clearing your browser cache.

      Step 2: Deactivate All of Your WordPress Plugins

      Next, you can check if a plugin might be causing the issue. The best way to do this is to deactivate all your plugins (except for the Classic Editor), check to see if the problem is resolved, and then re-enable them one by one until the error returns.

      At that point, you’ll have isolated the problematic plugin. Then you can check for updates, look for alternatives, or simply leave it deactivated if it’s one you don’t depend on.

      To deactivate your WordPress plugins, head to the dashboard and navigate to Plugins > Installed Plugins.

      Check the box next to all of the plugins except for the Classic Editor. In the Bulk actions box, you can choose Deactivate and click on Apply. Then reload the WordPress editor and verify that everything is working properly.

      If deactivating your plugins resolved the error, your next step is to isolate the plugin that was causing it. You can go down the list one by one and click on the Activate button under the plugin’s name. After each one is reactivated, check to see if the error has reappeared. If not, you can move on until you find the problematic plugin.

      Step 3: Replace the TinyMCE Folder

      TinyMCE is the technical name for the WordPress Classic Editor. It’s an open-source editor that’s used by quite a few platforms, in addition to WordPress.

      An issue with the TinyMCE files can cause the editor’s buttons to disappear. To fix this, you can replace the folder with a fresh copy.

      First, download the version of WordPress your site is using. You can find the current version number by checking the bottom-right corner of any page in your WordPress dashboard.

      The WordPress version in use on a website.

      Open up the WordPress zip file and move the TinyMCE folder somewhere else, such as your desktop. It’s located at wp-includes/js/tinymce.

      Finally, you’ll need to access your WordPress site’s file system and replace the old folder with the new one. Head to your DreamPress account (see Step 1 for instructions). Under the Details section, click on Manage Files to open the DreamHost file browser.

      The DreamHost file manager.

      If you’re not a DreamHost customer, you can also access your site via Secure File Transfer Protocol (SFTP). Navigate to wp-includes/js and upload the new copy of the TinyMCE folder using the “up arrow” button in the bottom left. Then you can refresh your WordPress dashboard and check the editor again.

      Step 4: Modify the wp-config.php File

      If the above fixes haven’t worked, you can try modifying your wp-config.php file to force WordPress to load scripts individually. To do so, start by opening up your WordPress site in the DreamHost file manager or via SFTP, as outlined above.

      The wp-config.php file is located in the root directory of your site. Simply add the following line of code to the top of the file, right after the opening <php> tag:

      define(‘CONCATENATE_SCRIPTS’,false);

      Here’s what your code should look like:

      The wp-config.php file, showing the location of the opening <php> tag.

      When you’re done, save the file, refresh your site, and then try to load the visual editor again. If you’re still seeing the error message, proceed to the last step.

      Step 5: Install the Advanced Editor Tools Plugin

      Previously known as TinyMCE Advanced, the Advanced Editor Tools plugin is a version of the TinyMCE script that offers additional features.

      The Advanced Editor Tools plugin.

      Essentially, it provides you with a hybrid of the TinyMCE editor and the Block Editor. Also, it’s free to download and use.

      After you install and activate it, you can locate the settings by navigating to Settings > Advanced Editor Tools.

      The Advanced Editor Tools plugin settings.

      Once it’s activated and you’ve configured the settings to your liking, refresh your WordPress site. Now, when you go to a new WordPress post or page, you should see that the previously-missing buttons appear in your visual editor.

      Additional WordPress Issue Resources

      Want to learn more about fixing common WordPress errors? We’ve put together several guides to help you.

      Website Management Made Easy

      Let us handle the backend — we’ll manage and monitor your website so it’s safe, secure, and always up.

      WordPress Visual Editor Problem, Solved

      If your WordPress editor is experiencing problems, such as unreadable white text or disappearing buttons, don’t worry. Like many WordPress errors, this one is relatively simple to fix, and there are multiple methods you can try.

      As we’ve discussed, you can follow these five steps to resolve the white text and missing buttons error in the WordPress editor:

      1. Clear your browser cache.
      2. Deactivate your WordPress plugins.
      3. Replace the TinyMCE folder with a fresh copy.
      4. Modify your wp-config.php file.
      5. Install the Advanced Editor Tools plugin.

      If you want to make troubleshooting easier, consider using DreamPress, our managed WordPress hosting solution. With DreamPress, we take care of problems for you, so you can focus on what matters.



      Source link

      Cara Memformat Kode dengan Prettier di Visual Studio Code


      Pengantar

      Memformat kode secara konsisten merupakan tantangan, tetapi alat pengembang modern memungkinkan pengembang mempertahankan konsistensi secara otomatis di seluruh basis kode tim Anda.

      Dalam artikel ini, Anda akan menyiapkan Prettier untuk memformat kode Anda secara otomatis di Visual Studio Code, yang juga dikenal sebagai VS Code.

      Untuk keperluan demonstrasi, inilah kode sampel yang akan Anda format:

      const name = "James";
      
      const person ={first: name
      }
      
      console.log(person);
      
      const sayHelloLinting = (fName) => {
      console.log(`Hello linting, ${fName}`)
      }
      
      sayHelloLinting('James');
      

      Jika sudah biasa memformat kode, Anda mungkin memperhatikan beberapa kesalahan langkah:

      • Campuran tanda kutip tunggal dan ganda.
      • Properti pertama objek person harus berada di barisnya sendiri.
      • Pernyataan konsol di dalam fungsi harus diinden.
      • Anda mungkin atau mungkin tidak suka tanda kurung opsional yang mengurung parameter fungsi panah.

      Prasyarat

      Untuk mengikuti tutorial ini, Anda perlu mengunduh dan menginstal Visual Studio Code.

      Untuk bekerja dengan Prettier di Visual Studio Code, Anda perlu menginstal ekstensi. Caranya, cari Prettier - Code Formatter di panel ekstensi VS Code. Jika Anda menginstalnya untuk pertama kali, Anda akan melihat tombol install sebagai ganti tombol uninstall yang ditunjukkan di sini:

      Readme ekstensi Prettier

      Langkah 1 — Menggunakan Perintah Format Document

      Dengan ekstensi Prettier yang telah terinstal, kini Anda dapat memanfaatkannya untuk memformat kode. Untuk memulai, mari kita mendalami penggunaan perintah Format Document. Perintah ini akan membuat kode Anda lebih konsisten dengan pengaturan jarak yang telah diformat, pelipatan baris, dan tanda kutip.

      Untuk membuka palet perintah, Anda dapat menggunakan COMMAND+ SHIFT + P di macOS atau CTRL + SHIFT + P di Windows.

      Dalam palet perintah, cari format, kemudian pilih Format Document.

      Perintah palet dibuka dengan hasil format

      Nanti, Anda mungkin diminta memilih format yang akan digunakan. Caranya, klik tombol Configure:

      Konfirmasi untuk memilih format asali

      Kemudian, pilih Prettier – Code Formatter.

      Memilih Prettier

      Catatan: Jika Anda tidak melihat konfirmasi untuk memilih format asali, Anda dapat mengubahnya secara manual di Settings. Atur Editor: Default Formatter ke ebsenp.prettier-vscode.

      Kode Anda sekarang telah diformat dengan jarak, pelipatan baris, dan tanda kutip yang konsisten:

      const name="James";
      
      const person = { first: name };
      
      console.log(person);
      
      const sayHelloLinting = (fname) => {
        console.log(`Hello linting, ${fName}`);
      }
      
      sayHelloLinting('James');
      

      Ini juga dapat digunakan di berkas CSS. Anda dapat mengubah kode dengan indentasi, kurung kurawal, baris baru, dan titik-koma yang tidak konsisten menjadi kode yang diformat dengan baik. Misalnya:

      body {color: red;
      }
      h1 {
        color: purple;
      font-size: 24px
      }
      

      Akan diformat menjadi:

      body {
        color: red;
      }
      h1 {
        color: purple;
        font-size: 24px;
      }
      

      Karena kita telah mendalami perintah ini, mari kita lihat cara mengimplementasikannya agar dijalankan secara otomatis.

      Langkah 2 — Memformat Kode saat Disimpan

      Sejauh ini, Anda harus menjalankan perintah secara manual untuk memformat kode. Untuk mengotomatiskan proses ini, Anda dapat memilih pengaturan di VS Code agar berkas Anda diformat secara otomatis saat disimpan. Hal ini juga memastikan bahwa kode tidak akan diperiksa karena kontrol versi yang tidak diformat.

      Untuk mengubah pengaturan ini, tekan COMMAND +, di macOS atau CTRL +, di Windows untuk membuka menu Settings. Setelah menu dibuka, cari Editor: Format On Save dan pastikan opsi itu telah dicentang:

      Editor: Format On Save dicentang

      Setelah ini diatur, Anda dapat menulis kode seperti biasa dan secara otomatis akan diformat saat menyimpan berkas.

      Langkah 3 — Mengubah Pengaturan Konfigurasi Prettier

      Prettier melakukan banyak hal untuk Anda secara asali, tetapi Anda juga dapat menyesuaikan pengaturannya.

      Buka menu Settings. Kemudian, cari Prettier. Ini akan menampilkan semua pengaturan yang dapat Anda ubah:

      Pengaturan Konfigurasi untuk Prettier

      Berikut ini beberapa pengaturan paling umum:

      • Single Quote – Memilih antara tanda kutip tunggal dan ganda.
      • Semi – Memilih jika akan menyertakan atau tidak menyertakan titik-koma di akhir baris.
      • Tab Width – Menentukan jumlah spasi yang Anda inginkan untuk menyisipkan tab.

      Kelemahan menggunakan menu pengaturan bawaan di VS Code adalah tidak menjamin konsistensi di semua pengembang dalam tim Anda.

      Langkah 4 — Membuat Berkas Konfigurasi Prettier

      Jika Anda mengubah pengaturan di VS Code, orang lain mungkin memiliki konfigurasi yang sepenuhnya berbeda di mesin mereka. Anda dapat membuat pemformatan yang konsisten untuk tim dengan membuat berkas konfigurasi bagi proyek Anda.

      Buat berkas baru bernama .prettierrc.extension dengan salah satu ekstensi berikut:

      Berikut ini contoh berkas konfigurasi sederhana yang menggunakan JSON:

      {
        "trailingComma": "es5",
        "tabWidth": 4,
        "semi": false,
        "singleQuote": true
      }
      

      Untuk lebih spesifik mengenai berkas konfigurasi, lihat Dokumentasi Prettier. Setelah membuat dan memeriksanya di proyek, Anda dapat memastikan bahwa setiap anggota tim mengikuti aturan pemformatan yang sama.

      Kesimpulan

      Memiliki kode yang konsisten adalah praktik yang baik. Hal ini sangat bermanfaat saat bekerja di proyek bersama beberapa kolaborator. Menyepakati seperangkat konfigurasi akan membantu dalam kemudahan membaca dan memahami kode. Akan ada lebih banyak waktu yang dapat dicurahkan untuk memecahkan masalah teknis yang menantang, bukannya berkutat dengan masalah yang telah diselesaikan seperti indentasi kode.

      Prettier menjaga konsistensi dalam pemformatan kode Anda dan mengotomatiskan prosesnya.



      Source link