溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么實(shí)現(xiàn)prettier自動(dòng)格式化換行

發(fā)布時(shí)間:2020-08-26 10:36:45 來源:億速云 閱讀:4859 作者:Leah 欄目:開發(fā)技術(shù)

怎么實(shí)現(xiàn)prettier自動(dòng)格式化換行?很多新手對(duì)此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來學(xué)習(xí)下,希望你能有所收獲。

插件

怎么實(shí)現(xiàn)prettier自動(dòng)格式化換行
怎么實(shí)現(xiàn)prettier自動(dòng)格式化換行

新建 .prettierrc 文件在根目錄,里面寫上這個(gè)
第一個(gè)是超出800字符換行,第二個(gè)是單引號(hào),第三個(gè)是結(jié)尾不要分號(hào)

怎么實(shí)現(xiàn)prettier自動(dòng)格式化換行

vscode里面的設(shè)置文件settings。json代碼

{
 // vscode默認(rèn)啟用了根據(jù)文件類型自動(dòng)設(shè)置tabsize的選項(xiàng)
 "editor.detectIndentation": false,
 // 重新設(shè)定tabsize
 "editor.tabSize": 2,
 // #每次保存的時(shí)候自動(dòng)格式化
 "editor.formatOnSave": true,
 // // 添加 vue 支持
 "eslint.validate": [
  "javascript",
  "javascriptreact",
  {
   "language": "vue",
   "autoFix": true
  }
 ],
 "eslint.autoFixOnSave": true,
 "vetur.validation.template": false,
 // #讓prettier使用eslint的代碼格式進(jìn)行校驗(yàn)
 "prettier.eslintIntegration": true,
 // #去掉代碼結(jié)尾的分號(hào)
 "prettier.semi": false,
 // #使用帶引號(hào)替代雙引號(hào)
 "prettier.singleQuote": true,
 // #讓函數(shù)(名)和后面的括號(hào)之間加個(gè)空格
 "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
 // #這個(gè)按用戶自身習(xí)慣選擇
 "vetur.format.defaultFormatter.html": "js-beautify-html",
 // #讓vue中的js按編輯器自帶的ts格式進(jìn)行格式化
 "vetur.format.defaultFormatter.js": "vscode-typescript",
 "vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
   // 換行
   // "wrap_attributes": "force-aligned"
   // 不換行
   "wrap_attributes": "aligned-multiple"
  }
 },
 // 格式化stylus, 需安裝Manta's Stylus Supremacy插件
 "stylusSupremacy.insertColons": false, // 是否插入冒號(hào)
 "stylusSupremacy.insertSemicolons": false, // 是否插入分好
 "stylusSupremacy.insertBraces": false, // 是否插入大括號(hào)
 "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行
 "stylusSupremacy.insertNewLineAroundBlocks": false, // 兩個(gè)選擇器中是否換行
 "auto-rename-tag.activationOnLanguage": [
  "*"
 ],
 "window.zoomLevel": 0,
 // esli彈框報(bào)錯(cuò)
 "devDependencies": {
  "babel-eslint": "^10.0.3",
  "eslint": "^4.15.0",
  "eslint-config-airbnb": "^16.1.0",
  "eslint-plugin-jsx-a11y": "^6.0.3",
  "eslint-plugin-react": "^7.12.1",
  "eslint-config-google": "^0.9.1",
  "eslint-config-standard": "^10.2.1",
  "eslint-plugin-html": "^4.0.1",
  "eslint-plugin-import": "^2.8.0",
  "eslint-plugin-node": "^5.2.1",
  "eslint-plugin-promise": "^3.6.0",
  "eslint-plugin-standard": "^3.0.1"
 },
 "http.proxyAuthorization": null,
 "eslint.migration.2_x": "off",
 "workbench.editorAssociations": [],
 "eslint.codeAction.disableRuleComment": {},
 "eslint.codeAction.showDocumentation": {},
 "editor.suggest.snippetsPreventQuickSuggestions": false,
 "files.associations": {
  "*.cjson": "jsonc",
  "*.wxss": "css",
  "*.wxs": "javascript"
 },
 "emmet.includeLanguages": {
  "wxml": "html"
 },
 "minapp-vscode.disableAutoConfig": true,
 "editor.codeActionsOnSave": null,
 "[vue]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[jsonc]": {
  "editor.defaultFormatter": "vscode.json-language-features"
 },
 "[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }
}

保存,打開一個(gè)后綴名為.vue文件,右鍵文檔格式方式

怎么實(shí)現(xiàn)prettier自動(dòng)格式化換行

點(diǎn)默認(rèn)格式化程序,再點(diǎn)Vetur

怎么實(shí)現(xiàn)prettier自動(dòng)格式化換行
怎么實(shí)現(xiàn)prettier自動(dòng)格式化換行

大功告成,,ctrl+s自動(dòng)格式化,這是不換行的方式

后綴名為 .js,用上面同樣步驟,但是默認(rèn)值用prettier

怎么實(shí)現(xiàn)prettier自動(dòng)格式化換行

喜歡標(biāo)簽換行用這個(gè)
打開vscode設(shè)置文件settings。json,找到,想用哪個(gè)打開就好,不用就注釋

怎么實(shí)現(xiàn)prettier自動(dòng)格式化換行

總結(jié)

看完上述內(nèi)容是否對(duì)您有幫助呢?如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝您對(duì)億速云的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI