A brief step by step tutorial on how to install and use Prettier in VS Code [Visual Studio Code]. Prettier is an opinionated code formatter which ensures one unified code format. It can be used in VS Code by installing it from the VS Code Marketplace. Once you have integrated it in VS Code, you can configure Prettier to format your files when saving them or committing them to a version control system [e.g. Git]. This way, you never need to worry about your source code formatting, because Prettier takes care about it. It works for personal projects but also streamlines projects when working with a team of developers.
We will start by installing the
Prettier extension for VS Code. Once you have installed it, you can use it with CTRL + CMD + P [MacOS] or CTRL + Shift + P [Windows] to manually format a file or a selection of code.
If you don't want to format your file with the given shortcut manually every time, you can format it on save as well. Therefore you need to open your VS Code user's settings/preferences as JSON and enter the following configuration:
"editor.formatOnSave": true
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
Afterward, a JavaScript file should format automatically once you save it. Now you don't need to worry about your code formatting anymore, because Prettier takes care of it. Prettier comes with a few options which you can apply globally too; which I like to do for my personal projects:
"editor.formatOnSave": true
"prettier.singleQuote": true,
"prettier.printWidth": 70,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
After setting up this configuration, Prettier makes sure that only single quotes are used and that the line length is set to the given number of characters.
However, be aware that this applies to every project now. If you happen to work on a project with a team where the project does not use Prettier, you will format every file once you save it. If not agreed upon with your team mates, this may cause trouble. Therefore I recommend the installation of Prettier Formatting Toggle which allows you to toggle of Prettier globally in a project.
Furthermore, if a project you are working on uses a local .prettierrc file for a local configuration, it can be used to override the global settings. That's what I'd recommend when working with multiple developers in a team on a project:
{
"singleQuote": false,
"printWidth": 120,
}
That's it. You are formatting JavaScript files on save while being able to toggle off Prettier for individual projects. Furthermore, you are using your personal Prettier defaults, however, when working on a project with a team, you can use use a .prettierrc file as well. That's it, you have integrated Prettier successfully in Visual Studio Code.
Join 50.000+ Developers
Learn Web Development
Learn JavaScript
Access Tutorials, eBooks and Courses
Personal Development as a Software Engineer
Subscribe View our Privacy Policy.The editor provides the document formatting feature for PHP documents. Right click the editor area and choose Format Document.
In order to format the document, it must be syntax-error free.
The code formatting normalizes whitespaces, line endings, opening and closing braces, indentation and pretty print spaces.
Format On Type
Setting the option editor.formatOnType to true enables the editor to format code blocks and statements upon typing ; and }. This feature performs selection formatting of the code preceeding the type delimiter. It indents the code and pretty-prints spaces.
Configuration
The formatting behavior is set in settings.json. All the relevant settings and their effects are summed up in the following table.
editor.insertSpaces
| Spaces are used to indent code if true, tabs are used otherwise.
|
editor.tabSize
| Number of spaces that represent a single tab, this value is used only when editor.insertSpaces is true
|
editor.formatOnType
| Enables or disables automatic formatting of code block upon typing ; or }.
|
php.format.codeStyle
| Preferred code style described in previous sections, available values are PHP Tools, PSR-2, or others described below.
|
Code Styles
Document formatting is available in two versions that differ in the way they structure the document: PHP Tools, PSR-2. The styles are selected in settings. The styles share most features, summed up in the following table, while they differ in a couple of details, explained in their own sections.
| Pretty print | Spaces are inserted after keywords, names and separators to make the code more readable. |
| Indentation | Code is indented based on the number of embedded blocks. |
| Multi-line comments | Subsequent lines are offset to match the first asterisk character on the first line |
| Statements | Every statement starts on a new line. |
| Anonymous functions | The body is indented from the beginning of the line where the function keyword is defined.
|
| Use construct | The use construct in anonymous functions is always on the same line as the function keyword.
|
| Control flow | Close keywords of control flow constructs [endif, endfor, ...] always start on a new line.
|
| Namespace | An empty line is inserted after a namespace declaration. |
| Use statement | Use declarations are not separated by empty lines, but an empty line is inserted after all the declarations. |
// Pretty print
if [$volume != 0] {
$density = $mass / $volume;
}// Indentation
function foo []
{
if [$x] {
if [$y] {
echo $x + $y;
}
}
}// Multi-line comments
/*
* Following lines are offset
* by the first asterisk
*/// Statements
echo "hello"; // the secod echo must be on a new line
echo "world";// Anonymous functions
if [$x] {
$example = function []
{
var_dump[$x];
};
}// Use construct
$example = function [] use [$x]
{
var_dump[$x];
};// Control flow
if [$a == 5]:
echo "a equals 5";
else:
echo "a is not 5";
endif;// Namespace and Use statements
namespace foo;
use My\Full\Classname as Another;
use My\Full\NSname;
use ArrayObject;
echo "hello world";Code Style: PHP Tools
The default code style is compliant with the formatting in PHP Tools for Visual Studio. This style focuses on leaving the code visual structure as untouched as possible, while normalizing the whitespaces where possible.
| Multi-line expressions | Subsequent lines maintain their indentation from the first line. |
| PHP blocks indentation | Contents of PHP blocks is indented from the open tag [
|