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的配置應該是相似的!