phpstorm通過FileWatchers配置自動格式化代碼插件

在自動格式代碼的插件中, prettier一直是挺不錯的, 這個插件在不同的IDE里有不同的配置地方, 但是配置參數基本上是差不多的.

下面就說明下在phpstorm(版本2019.2)中如何配置的吧.

我的環境: mac os x 10.14.4

1. 安裝prettier插件, 最好是全局安裝

1.1 通過: brew install prettier      (這種方式有可能會升級本機中的node, 因為prettier依賴於node, 所以環境會有較大變化)

1.2 通過: npm install -g prettier   (推薦采用這種方式)

安裝完成后, 執行下: which prettier, 可見在命令行已經能找到這個命令了.

2. 在phpstorm中配置File Watchers

 

經過以上的配置后, 就算完成了(但是只能算完成一大步吧)! 可以測試下.

新建一個項目, 隨便找個地方新建一個xxx.js, 隨便寫點js代碼, 格式可以亂一點.

然后保存下文件, 這個文件就會自動被格式化了 ==> 這就算成功了!

 

但是可能你會發現, 自動格式化的格式並不是自己想要的, 如你希望在js中使用tab而不是空格, 想使用單引號而不是雙引號.

很簡單, 在項目目錄下新建一個文件命名為: .prettierrc (這是一個json文件), 並添加以下內容:

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

 再試試自動保存吧, 應該能符合你的預期了!

 

另外, 對於有package.json文件的項目, 也可以在這個文件里配置prettier, 格式:

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

 上面代碼中省略了package.json中的其他配置!

 

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

Webstorm和Idea中File Watchers的配置應該是類似的!