最近開始使用Webstorm與vscode編輯前端程式碼，發現自動格式化存在問題，解決方案過於分散駁雜，現將其大致整理如下：

vscode程式碼格式化問題：

1. 問題描述

使用自帶格式化方式，出現與eslint格式驗證衝突問題：

• 句末自動加分號
• 單引號自動變為雙引號
• 函式與括號之間空格被刪除

2. 解決方法

1. 修改快捷鍵 File->preference->keyboard Shortcuts ->format document :Ctrl+Alt+Q
2. 修改prettier配置
   a. npm install --global prettier
   
   b. 新建.prettierrc.json配置檔案放在vue專案的root目錄下(也就是和README.md檔案同一目錄)
   c. 配置.prettierrc.json檔案如下

   {
   	"semi": false, // 句末加分號
      	"singleQuote": true, // 用單引號
      	"bracketSpacing": true // 物件&陣列是否追加空格
   }
   

   如此可解決上述前兩個問題。
3. 對於第三個問題，目前prettier不支援，只能修改eslint校驗方式（prettier函式後不加空格，令eslint不校驗此設定）
   1. eslintrc.js中rules新增
      ‘space-before-function-paren’: ‘off’

經試驗，修改配置檔案需要重啟程式。

WebStorm程式碼格式化問題：

1. 問題描述

<script></script>標籤內程式碼預設縮排，與eslint規則衝突。

2. 解決方法

• 修改IDEA或webstorm配置
  File => Setting => Editor => Code Style => HTML
  找到 Do not indent children of 的選項
  新增 script 標籤。