{"id":15150,"date":"2024-03-31T18:56:41","date_gmt":"2024-03-31T15:26:41","guid":{"rendered":"https:\/\/www.itpiran.net\/blog\/?p=15150"},"modified":"2024-03-31T18:56:41","modified_gmt":"2024-03-31T15:26:41","slug":"how-to-format-code-with-prettier-in-visual-studio-code","status":"publish","type":"post","link":"https:\/\/www.itpiran.net\/blog\/en\/tutorials\/how-to-format-code-with-prettier-in-visual-studio-code\/","title":{"rendered":"How to format code with Prettier in Visual Studio Code"},"content":{"rendered":"

Introduction<\/h2>\n

Formatting code is always a challenge, but modern developer tools make it possible to automatically maintain consistency across your team's codebase. In this article, you'll set up Prettier to automatically format your code in Visual Studio Code, also known as VS Code.<\/p>\n

For demonstration purposes, here is an example of the code you are formatting:<\/p>\n

\n
const name = \"James\";\r\nconst person ={first: name\r\n}\r\nconsole.log(person);\r\nconst sayHelloLinting = (fName) => {\r\nconsole.log(`Hello linting, ${fName}`)\r\n}\r\nsayHelloLinting('James');<\/code><\/pre>\n<\/div>\n
If you are familiar with code formatting, you may notice some steps that are wrong:<\/p>\n
    \n
  • A combination of single and double quotes.<\/li>\n
  • The first Property of the Person object should be on its line.<\/li>\n
  • The Console statement inside the function must be indented.<\/li>\n
  • You may or may not like the optional parentheses around the arrow function parameter.<\/li>\n<\/ul>\n
    Prerequisites<\/h5>\n
      \n
    • Download and install Visual Studio Code.<\/li>\n
    • To use Prettier in Visual Studio Code, you need to install the plugin. To do this, search for Prettier \u2013 Code Formatter in the VS Code plugins panel. If this is your first time installing it, you will see an Install button instead of the Uninstall button shown here:<\/li>\n<\/ul>\n
      \"\"
      \nStep 1 \u2013 Using the Format Document command<\/h2>\n
      With the Prettier plugin installed, you can now use it to format your code. To get started, let's explore using the Format Document command. This command makes your code more consistent with formatted spacing, line wrapping, and quotes.<\/p>\n
      To open the command palette, you can use COMMAND + SHIFT + P<\/code> On macOS or CTRL + SHIFT + P<\/code> Use on Windows.<\/p>\n
      In the command palette, search for Format, and then Document Format<\/code> Select.<\/p>\n
      \"\"
      \nYou may then be asked to select the format to use. To do this, click the Configure button:<\/p>\n
      \"\"
      \nThen select Prettier \u2013 Code Formatter.<\/p>\n
      \"\"
      \nYour code is now formatted with spacing, line wrapping, and fixed quotes:<\/p>\n
      \n
      const name = \"James\";\r\nconst person = { first: name };\r\nconsole.log(person);\r\nconst sayHelloLinting = (fName) => {\r\nconsole.log(`Hello linting, ${fName}`);\r\n};\r\nsayHelloLinting(\"James\");<\/code><\/pre>\n<\/div>\n
      This also works on CSS files. You can convert something with inconsistent indentations, parentheses, newlines, and semicolons into properly formatted code. For example:<\/p>\n
      \n
      body {color: red;\r\n}\r\nh1 {\r\ncolor: purple;\r\nfont-size: 24px\r\n}<\/code><\/pre>\n<\/div>\n
      It is formatted as follows:<\/p>\n
      \n
      body {\r\ncolor: red;\r\n}\r\nh1 {\r\ncolor: purple;\r\nfont-size: 24px;\r\n}<\/code><\/pre>\n<\/div>\n
      Now that we've reviewed this command, let's see how we can make it run automatically.<\/p>\n
      Step 2 \u2013 Formatting the code in the save<\/h2>\n
      Until now, you've had to manually run a command to format your code. To automate this process, you can choose a setting in VS Code to automatically format your files when you save. This also ensures that code isn't checked into version control that isn't formatted.<\/p>\n
      To change this setting, COMMAND +<\/code> on macOS or CTRL +<\/code> Press in Windows to open the Settings menu. Once the menu opens, Editor: Format On Save<\/code> Search for and make sure that option is checked:<\/p>\n
      \"\"
      \nOnce set up, you can write your code as usual and it will be automatically formatted when you save the file.<\/p>\n
      Step 3 \u2013 Change the prettier configuration settings<\/h2>\n
      Prettier does a lot of the work for you by default, but you can also customize the settings.<\/p>\n
      Open the Settings menu. Then, search for Prettier. This will bring up all the settings you can change:<\/p>\n
      \"\"
      \nHere are some of the most common settings:<\/p>\n
        \n
      • Single Quote \u2013 Choose between single and double quotes.<\/li>\n
      • Semi \u2013 Choose whether there are semicolons at the end of lines.<\/li>\n
      • Tab Width \u2013 Specify how many spaces you want a tab to be inserted.<\/li>\n<\/ul>\n
        The downside of using the built-in settings menu in VS Code is that it doesn't ensure consistency between developers on your team.<\/p>\n
        Step 4 \u2013 Create a nicer configuration file<\/h2>\n
        If you change the settings in your VS Code, someone else could have a completely different configuration on their machine. You can create consistent formatting across your team by creating a configuration file for your project.<\/p>\n
        A new file called prettierrc.extension<\/code> Create with one of the following extensions:<\/p>\n
          \n
        • yml<\/code><\/li>\n
        • yaml<\/code><\/li>\n
        • json<\/code><\/li>\n
        • js<\/code><\/li>\n
        • toml<\/code><\/li>\n<\/ul>\n
          Here is an example of a simple configuration file using JSON:<\/p>\n
          \n
          {\r\n\"trailingComma\": \"es5\",\r\n\"tabWidth\": 4,\r\n\"semi\": false,\r\n\"singleQuote\": true\r\n}<\/code><\/pre>\n<\/div>\n
          For more details on configuration files, check out the more beautiful Docs. Once you create one of these and check it out in your project, you can make sure everyone on the team is following the same formatting rules.<\/p>\n
          Introduction<\/h2>\n
          Having consistent code is a good practice. It is especially useful when working on a project with multiple collaborators. Agreeing on a set of settings helps with readability and understanding of the code. More time can be spent solving challenging technical problems, rather than struggling with solved issues like code indentation.<\/p>","protected":false},"excerpt":{"rendered":"Introduction Formatting code is constantly a challenge, but modern developer tools make it possible\u2026","protected":false},"author":1,"featured_media":15157,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_focuskw":"\u0646\u062d\u0648\u0647 \u0642\u0627\u0644\u0628 \u0628\u0646\u062f\u06cc \u06a9\u062f \u0628\u0627 Prettier \u062f\u0631 Visual Studio Code","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","_yoast_wpseo_canonical":"","_yoast_wpseo_opengraph-description":"","_yoast_wpseo_opengraph-image":"","_yoast_wpseo_twitter-description":"","_yoast_wpseo_twitter-image":"","_yoast_wpseo_focuskeywords":"","_yoast_wpseo_primary_category":"193","footnotes":""},"categories":[193,363],"tags":[371,366],"class_list":{"0":"post-15150","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-tutorials","8":"category-programming","9":"tag-vsc","10":"tag-366"},"yoast_head":"\n\u0646\u062d\u0648\u0647 \u0642\u0627\u0644\u0628 \u0628\u0646\u062f\u06cc \u06a9\u062f \u0628\u0627 Prettier \u062f\u0631 Visual Studio Code - \u0628\u0644\u0627\u06af ITPiran<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.itpiran.net\/blog\/en\/tutorials\/how-to-format-code-with-prettier-in-visual-studio-code\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u0646\u062d\u0648\u0647 \u0642\u0627\u0644\u0628 \u0628\u0646\u062f\u06cc \u06a9\u062f \u0628\u0627 Prettier \u062f\u0631 Visual Studio Code - \u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"og:description\" content=\"\u0645\u0642\u062f\u0645\u0647 \u0642\u0627\u0644\u0628\u200c\u0628\u0646\u062f\u06cc \u06a9\u062f \u0628\u0647 \u0637\u0648\u0631 \u0645\u062f\u0627\u0648\u0645 \u06cc\u06a9 \u0686\u0627\u0644\u0634 \u0627\u0633\u062a\u060c \u0627\u0645\u0627 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0645\u062f\u0631\u0646 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.itpiran.net\/blog\/en\/tutorials\/how-to-format-code-with-prettier-in-visual-studio-code\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-31T15:26:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.itpiran.net\/2024\/03\/31185236\/Prettier-vsc.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1793\" \/>\n\t<meta property=\"og:image:height\" content=\"1110\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-format-code-with-prettier-in-visual-studio-code\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-format-code-with-prettier-in-visual-studio-code\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\"},\"headline\":\"\u0646\u062d\u0648\u0647 \u0642\u0627\u0644\u0628 \u0628\u0646\u062f\u06cc \u06a9\u062f \u0628\u0627 Prettier \u062f\u0631 Visual Studio Code\",\"datePublished\":\"2024-03-31T15:26:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-format-code-with-prettier-in-visual-studio-code\\\/\"},\"wordCount\":58,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-format-code-with-prettier-in-visual-studio-code\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/03\\\/31185236\\\/Prettier-vsc.jpg\",\"keywords\":[\"VSC\",\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\"],\"articleSection\":[\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-format-code-with-prettier-in-visual-studio-code\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-format-code-with-prettier-in-visual-studio-code\\\/\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-format-code-with-prettier-in-visual-studio-code\\\/\",\"name\":\"\u0646\u062d\u0648\u0647 \u0642\u0627\u0644\u0628 \u0628\u0646\u062f\u06cc \u06a9\u062f \u0628\u0627 Prettier \u062f\u0631 Visual Studio Code - \u0628\u0644\u0627\u06af ITPiran\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-format-code-with-prettier-in-visual-studio-code\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-format-code-with-prettier-in-visual-studio-code\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/03\\\/31185236\\\/Prettier-vsc.jpg\",\"datePublished\":\"2024-03-31T15:26:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-format-code-with-prettier-in-visual-studio-code\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-format-code-with-prettier-in-visual-studio-code\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-format-code-with-prettier-in-visual-studio-code\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/03\\\/31185236\\\/Prettier-vsc.jpg\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/03\\\/31185236\\\/Prettier-vsc.jpg\",\"width\":1793,\"height\":1110},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-format-code-with-prettier-in-visual-studio-code\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/category\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"\u0646\u062d\u0648\u0647 \u0642\u0627\u0644\u0628 \u0628\u0646\u062f\u06cc \u06a9\u062f \u0628\u0627 Prettier \u062f\u0631 Visual Studio Code\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"name\":\"\u0628\u0644\u0627\u06af ITPiran\",\"description\":\"\u0627\u062e\u0628\u0627\u0631 \u0648 \u0645\u0642\u0627\u0644\u0627\u062a \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\",\"name\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"alternateName\":\"ITPIran Blog\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"width\":512,\"height\":512,\"caption\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\",\"name\":\"admin\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/en\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to format code with Prettier in Visual Studio Code - ITPiran Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.itpiran.net\/blog\/en\/tutorials\/how-to-format-code-with-prettier-in-visual-studio-code\/","og_locale":"en_US","og_type":"article","og_title":"\u0646\u062d\u0648\u0647 \u0642\u0627\u0644\u0628 \u0628\u0646\u062f\u06cc \u06a9\u062f \u0628\u0627 Prettier \u062f\u0631 Visual Studio Code - \u0628\u0644\u0627\u06af ITPiran","og_description":"\u0645\u0642\u062f\u0645\u0647 \u0642\u0627\u0644\u0628\u200c\u0628\u0646\u062f\u06cc \u06a9\u062f \u0628\u0647 \u0637\u0648\u0631 \u0645\u062f\u0627\u0648\u0645 \u06cc\u06a9 \u0686\u0627\u0644\u0634 \u0627\u0633\u062a\u060c \u0627\u0645\u0627 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0645\u062f\u0631\u0646 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f…","og_url":"https:\/\/www.itpiran.net\/blog\/en\/tutorials\/how-to-format-code-with-prettier-in-visual-studio-code\/","og_site_name":"\u0628\u0644\u0627\u06af ITPiran","article_published_time":"2024-03-31T15:26:41+00:00","og_image":[{"width":1793,"height":1110,"url":"https:\/\/cdn.itpiran.net\/2024\/03\/31185236\/Prettier-vsc.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-format-code-with-prettier-in-visual-studio-code\/#article","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-format-code-with-prettier-in-visual-studio-code\/"},"author":{"name":"admin","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81"},"headline":"\u0646\u062d\u0648\u0647 \u0642\u0627\u0644\u0628 \u0628\u0646\u062f\u06cc \u06a9\u062f \u0628\u0627 Prettier \u062f\u0631 Visual Studio Code","datePublished":"2024-03-31T15:26:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-format-code-with-prettier-in-visual-studio-code\/"},"wordCount":58,"commentCount":0,"publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-format-code-with-prettier-in-visual-studio-code\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/03\/31185236\/Prettier-vsc.jpg","keywords":["VSC","\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc"],"articleSection":["\u0622\u0645\u0648\u0632\u0634\u06cc","\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-format-code-with-prettier-in-visual-studio-code\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-format-code-with-prettier-in-visual-studio-code\/","url":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-format-code-with-prettier-in-visual-studio-code\/","name":"How to format code with Prettier in Visual Studio Code - ITPiran Blog","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-format-code-with-prettier-in-visual-studio-code\/#primaryimage"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-format-code-with-prettier-in-visual-studio-code\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/03\/31185236\/Prettier-vsc.jpg","datePublished":"2024-03-31T15:26:41+00:00","breadcrumb":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-format-code-with-prettier-in-visual-studio-code\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-format-code-with-prettier-in-visual-studio-code\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-format-code-with-prettier-in-visual-studio-code\/#primaryimage","url":"https:\/\/cdn.itpiran.net\/2024\/03\/31185236\/Prettier-vsc.jpg","contentUrl":"https:\/\/cdn.itpiran.net\/2024\/03\/31185236\/Prettier-vsc.jpg","width":1793,"height":1110},{"@type":"BreadcrumbList","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-format-code-with-prettier-in-visual-studio-code\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.itpiran.net\/blog\/"},{"@type":"ListItem","position":2,"name":"\u0622\u0645\u0648\u0632\u0634\u06cc","item":"https:\/\/www.itpiran.net\/blog\/category\/tutorials\/"},{"@type":"ListItem","position":3,"name":"\u0646\u062d\u0648\u0647 \u0642\u0627\u0644\u0628 \u0628\u0646\u062f\u06cc \u06a9\u062f \u0628\u0627 Prettier \u062f\u0631 Visual Studio Code"}]},{"@type":"WebSite","@id":"https:\/\/www.itpiran.net\/blog\/#website","url":"https:\/\/www.itpiran.net\/blog\/","name":"ITPiran Blog","description":"Iranian Sustainable Trade News and Articles","publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.itpiran.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.itpiran.net\/blog\/#organization","name":"Sustainable Iranian Business Blog","alternateName":"ITPIran Blog","url":"https:\/\/www.itpiran.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","contentUrl":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","width":512,"height":512,"caption":"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81","name":"admin","url":"https:\/\/www.itpiran.net\/blog\/en\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/posts\/15150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/comments?post=15150"}],"version-history":[{"count":1,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/posts\/15150\/revisions"}],"predecessor-version":[{"id":15158,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/posts\/15150\/revisions\/15158"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/media\/15157"}],"wp:attachment":[{"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/media?parent=15150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/categories?post=15150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/tags?post=15150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}