Webstorm與vscode自動格式化問題
阿新 • • 發佈:2018-11-15
最近開始使用Webstorm與vscode編輯前端程式碼,發現自動格式化存在問題,解決方案過於分散駁雜,現將其大致整理如下:
vscode程式碼格式化問題:
1. 問題描述
使用自帶格式化方式,出現與eslint格式驗證衝突問題:
- 句末自動加分號
- 單引號自動變為雙引號
- 函式與括號之間空格被刪除
2. 解決方法
- 修改快捷鍵 File->preference->keyboard Shortcuts ->format document :Ctrl+Alt+Q
- 修改prettier配置
a.npm install --global prettier
b. 新建.prettierrc.json配置檔案放在vue專案的root目錄下(也就是和README.md檔案同一目錄)
c. 配置.prettierrc.json檔案如下
如此可解決上述前兩個問題。{ "semi": false, // 句末加分號 "singleQuote": true, // 用單引號 "bracketSpacing": true // 物件&陣列是否追加空格 }
- 對於第三個問題,目前prettier不支援,只能修改eslint校驗方式(prettier函式後不加空格,令eslint不校驗此設定)
- eslintrc.js中rules新增
‘space-before-function-paren’: ‘off’
- eslintrc.js中rules新增
經試驗,修改配置檔案需要重啟程式。
WebStorm程式碼格式化問題:
1. 問題描述
<script></script>標籤內程式碼預設縮排,與eslint規則衝突。
2. 解決方法
- 修改IDEA或webstorm配置
File => Setting => Editor => Code Style => HTML
找到 Do not indent children of 的選項
新增 script 標籤。