Skip to main content

Visual Studio Code Prettier vs Beautify plugin

   There are two famous beautify code plugins for Front-end developers in Visual Studio Code. So, I'd like to compare what plugin is better to use for me. 

 The plugins are

First, Prettier


Second, Beautify.

As you can see, Prettier is more popular than Beautify and Prettier supports more languages than Beautify. 
  • Prettier 
    • Install count: 8,628,031
    • language support: 
      • JavaScript · TypeScript · Flow · JSX · JSON
      • CSS · SCSS · Less
      • HTML · Vue · Angular
      • GraphQL · Markdown · YAML
  • Beautify 
    • Install count: 5,510,943
    • language support: 
      • javascript, JSON, CSS, Sass, and HTML
Prettier has more strict options users should use while Beautify let users do more free way. But I'd like to use Prettier for now because I don't need free style and Prettier supports more languages. (I use Javascript, TypeScript, JSON, CSS, HTML, JSX, Markdown, YAML)

Let's see how Prettier works.

1. Install Prettier plugin in Visual Studio Extensions

2. With this messy html code.

3. Ctrl + Shift + P > select Format Document

4. You can see how Prettier works!

Don’t waste your time formatting your code. It takes time that can be better spent writing more code.
Labels:

Comments

Post a Comment

Popular posts from this blog

Can't install Eclipse plugins due to sun.security.validator.ValidatorException

   Sometimes eclipse cannot connect to marketplace or plugin sites for installing plugins because of security validator exception Problem: sun.security.validator.ValidatorException or sun.security.validator.ValidatorException: PKIX path building failed   Resolution: tuststore does not contain the certificate of the SSL service you're connecting to This is due to corporate environments where your workstation is intercepted by proxy, firewall or something that inspects https traffic. or the jdk version does not include the SSL service you're connecting to. jdk release with certificates in the jre/lib/security/cacerts file. the certificates are increase while jdk version goes up How To Solve Download  Keystore Explorer  and Install Open the application (Run as administrator) Examine > Examine SSL > Co...
Post a Comment
Read more

Visual Studio Code pin on 'open editors' (file) tab

It was released in May 2020 release and updated in September 2020 release. Eclipse doesn't have this functionality at this time.   When I program something with many files, I really need this function. Most editors has 'close Others', 'close to the right' options. But with this pin file and 'close All', I could manage opened files easily. See below Introduce on September 2020 release. Pinned tabs also show a new "pinned" icon to allow you to unpin with one click. This icon will also appear in the "Open Editors" view. Theme:  GitHub Light Also they added compact options for editor tabs. A new setting  workbench.editor.pinnedTabSizing  allows you to configure how large a pinned tab should appear: normal : a pinned tab inherits the look of other tabs (new default) shrink : a pinned tab shrinks to a fixed size showing parts of the editor label compact : a pinned tab will only show as icon or first letter of the ed...
Post a Comment
Read more