prettier自動格式化去換行的實現(xiàn)代碼
插件


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

vscode里面的設(shè)置文件settings。json代碼
{
// vscode默認啟用了根據(jù)文件類型自動設(shè)置tabsize的選項
"editor.detectIndentation": false,
// 重新設(shè)定tabsize
"editor.tabSize": 2,
// #每次保存的時候自動格式化
"editor.formatOnSave": true,
// // 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
"eslint.autoFixOnSave": true,
"vetur.validation.template": false,
// #讓prettier使用eslint的代碼格式進行校驗
"prettier.eslintIntegration": true,
// #去掉代碼結(jié)尾的分號
"prettier.semi": false,
// #使用帶引號替代雙引號
"prettier.singleQuote": true,
// #讓函數(shù)(名)和后面的括號之間加個空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #這個按用戶自身習慣選擇
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #讓vue中的js按編輯器自帶的ts格式進行格式化
"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, // 是否插入冒號
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括號
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行
"stylusSupremacy.insertNewLineAroundBlocks": false, // 兩個選擇器中是否換行
"auto-rename-tag.activationOnLanguage": [
"*"
],
"window.zoomLevel": 0,
// esli彈框報錯
"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"
}
}
保存,打開一個后綴名為.vue文件,右鍵文檔格式方式

點默認格式化程序,再點Vetur


大功告成,,ctrl+s自動格式化,這是不換行的方式
后綴名為 .js,用上面同樣步驟,但是默認值用prettier

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

總結(jié)
到此這篇關(guān)于prettier自動格式化去換行的實現(xiàn)代碼的文章就介紹到這了,更多相關(guān)prettier格式化換行內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript 數(shù)組展平方法: flat() 和 flatMap()詳解
從 ES2019 中開始引入了一種扁平化數(shù)組的新方法,可以展平任何深度的數(shù)組,這篇文章主要介紹了JavaScript 數(shù)組展平方法: flat() 和 flatMap()詳解,需要的朋友可以參考下2023-06-06
JavaScript函數(shù)柯里化實現(xiàn)原理及過程
這篇文章主要介紹了JavaScript函數(shù)柯里化實現(xiàn)原理及過程,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-12-12
JS簡單實現(xiàn)城市二級聯(lián)動選擇插件的方法
這篇文章主要介紹了JS簡單實現(xiàn)城市二級聯(lián)動選擇插件的方法,涉及javascript實現(xiàn)select遍歷與設(shè)置技巧,非常簡單實用,需要的朋友可以參考下2015-08-08
layer實現(xiàn)關(guān)閉彈出層刷新父界面功能詳解
這篇文章主要介紹了layer實現(xiàn)關(guān)閉彈出層刷新父界面功能,結(jié)合實例形式分析了使用layui的layer在關(guān)閉彈出層時刷新父界面的常用實現(xiàn)技巧與相關(guān)操作注意事項,需要的朋友可以參考下2017-11-11
JavaScript仿京東實現(xiàn)秒殺倒計時案例詳解
這篇文章主要為大家詳細介紹了如何利用JavaScript實現(xiàn)京東秒殺倒計時效果,文中示例代碼介紹的非常詳細,感興趣的小伙伴們可以參考一下2022-03-03

