vscode格式化配置
阿新 • • 發佈:2020-09-01
此配置支援 CSS、HTML、JS 和 Vue 等檔案的格式化
一、安裝外掛:
Prettier、Eslint、Vetur
ESlint:javascript程式碼檢測工具,可以配置每次儲存時格式化js
Prettier - Code formatter:只關注格式化,並不具有eslint檢查語法等能力,只關心格式化檔案(最大長度、混合標籤和空格、引用樣式等),包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown
vetur:可以格式化html、標準css(有分號 、大括號的那種)、標準js(有分號 、雙引號的那種)、vue檔案
二、setting.josn配置
檔案-首選項-設定-在setting.josn中編輯
{ "editor.fontSize": 16, // tab 大小為2個空格 "editor.tabSize": 2, // 100 列後換行 "editor.wordWrapColumn": 100, // 儲存時格式化 "editor.formatOnSave": true, // 開啟 vscode 檔案路徑導航 "breadcrumbs.enabled": true, // prettier 設定語句末尾不加分號 "prettier.semi": false, // prettier 設定強制單引號 "prettier.singleQuote": true, "prettier.trailingComma": "none", // 選擇 vue 檔案中 template 的格式化工具 "vetur.format.defaultFormatter.html": "prettyhtml", // 顯示 markdown 中英文切換時產生的特殊字元 "editor.renderControlCharacters": true, // vetur 的自定義設定 "vetur.format.defaultFormatterOptions": { "prettier": { "singleQuote": true, "semi": false, "trailingComma": "none" } }, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "[javascript]": { "editor.defaultFormatter": "vscode.typescript-language-features" } }