phpstorm configuration by automatically formatting code plug FileWatchers

In the plug-in automatically format the code in, prettier been very good, this plug-in has different configurations in different places of the IDE, but the configuration parameters are essentially the same.

Here's instructions about how to configure in phpstorm (version 2019.2) of it.

My environment: mac os the X-10.14.4

1. Install prettier plug, preferably global mount

1.1 by: brew install prettier (in this way is likely to upgrade the machine's node, because prettier depends on the node, so there will be a greater environmental change)

By 1.2: NPM the install -g prettier    ( recommended in this way)

After the installation is complete, the next execution: which prettier, visibility has been able to find this command in the command line.

2. Configure File Watchers in the phpstorm

 

After the above configuration, even if completed (but can only be considered a big step to complete it)! Can be tested next.

Create a new project, just looking for a place to create a new xxx.js, just write about js code format can be a little chaotic.

Then save the next file, the file will automatically be formatted ==> and it was a success!

 

But you may find that is not automatically formatted format you want , if you want to use tab instead of spaces in the js and want to use single quotes instead of double quotes.

Very simple, the new project directory in a file named: .prettierrc (This is a json file), and add the following:

{
  "useTabs": true,
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true,
  "jsxSingleQuote": true
}

 Try again automatically save it, you should be able to meet your expectations up!

 

In addition, the project has package.json files, you can also configure prettier, in this file format:

{
	"prettier": {
		"useTabs": true,
		"tabWidth": 4,
		"semi": false,
		"singleQuote": true,
		"jsxSingleQuote": true
	}
}

 The above code is omitted in other configurations package.json!

 

=======================================

Webstorm and Idea in File Watchers configuration should be similar!