次世代 Hugo

無駄を削ぎ、本質を研ぐ

使用 WebStorm 開發 Vue

Sam Xiao's Avatar 2025-07-20

WebStorm 已經提供 Vue Plugin 完整支援 Vue，唯一只有 .vue 格式縮排部分，Webstorm 與 Vue 的看法迥異，在 Reformat Code 之後，縮排會完全跑掉，需要稍微調整。

Version

WebStorm 2021.1
Vue 2.6.11

Coding Style

CSS

vue02

Preferences -> Editor -> Code Style -> Style Sheets -> CSS

  • Tab size：2
  • Indent：2
  • Continunation indent：2

HTML

vue03

Preferences -> Editor -> Code Style -> HTML -> Tabs and Indents

  • Tab size：2
  • Indent：2
  • Continunation indent：2

vue13

Preferences -> Editor -> Code Style -> HTML -> Other

  • Wrap attributes：Do not wrap

vue05

Preferences -> Editor -> Code Style -> HTML -> Other

  • Do not indent children of： 新增 script 與 style

也就是 <script/> 與 <style/> 的第一層不縮排，符合 Vue 的習慣

JavaScript

vue04

Preferences -> Editor -> Code Style -> JavaScript -> Tabs and Indents

  • Tab size：2
  • Indent：2
  • Continunation indent：2

vue11

Preferences -> Editor -> Code Style -> JavaScript -> Spaces

  • Object literal braces：true
  • ES6 import/export braces：true
  • Interpolation expressions：true

vue12

Preferences -> Editor -> Code Style -> JavaScript -> Spaces

  • In function expression：false

vue01

Preferences -> Editor -> Code Style -> JavaScript -> Punctuation

  • Don't use semicolon to terminate statement always
  • Use single quotes always

vue12

Preferences -> Editor -> Code Style -> JavaScript -> Wrapping and Braces -> Ternary operation

  • Align when multiline：true
  • ? and : signs on next line：true

vue07

Preferences -> Editor -> Code Style -> JavaScript -> Wrapping and Braces

  • ES6 import/export：Do not wrap

避免使用 Ramda 時 import 太多 function 而換行

vue14

Preferences -> Editor -> Inlay Hints -> JavaScript -> Parameter hints

  • Show parameter name hints：false

vue15

  • Show parameter name hints：false

Inspection

vue06

Preferences -> Editor -> Inspections -> JavaScript and TypeScript -> Potentially undersirable code constructs

  • Comma expression：false

WebStorm 只要看到使用 comma operator 就會出現 warning，事實上 , 在有些場合很好用，因此加以 disable

Web Browsers

vue08

Preferences -> Tools -> Web Browsers

  • Show browser popup in the editor: For HTML files：false

WebStorm 將 *.vue 視為 HTML 檔案，因此在右上角會顯示各 browser 的 button 供 preview，但實際上完全沒有用途，因為它會使用 WebStorm 內建的 Web Server，而非 Vue CLI 的 Dev Server，因此加以 disable。

Pug

vue09

Preferences -> Editor -> General -> On Save

  • Remove trailing spaces on：false

Pug 會在最後以 space 墊出 white space，因此不能刪除

Conclusion

  • WebStorm 目前支援 Vue 良好，除了少部分要調整外，就可完美在 WebStorm 開發 Vue，不用再安裝任何 plugin

# Hugo # WebStorm