vue3 volar格式化代码

vetur是vue2的插件，vue3的很多语法糖都不认了，lz之前是用vetur格式化，装了volar之后发现格式化风格很丑，html组件属性都被挤在一行了，全网搜了半天都没找到如何格式化，最后去官网看了看，发现不支持设置格式化，需要用其他插件格式化，如下，安装prettier

注意要先把vetur禁用了，两者会有冲突，然后ctrl+shift+p 搜索setting，打开setting.json,在里面加入如下配置

"editor.formatOnSave": true,// eslint配置项，保存时自动修复"editor.codeActionsOnSave": {"source.fixAll.eslint": true},// 默认使用prettier格式化支持的文件"editor.defaultFormatter": "esbenp.prettier-vscode",//自动设定eslint工作区"eslint.workingDirectories": [{ "mode": "auto" }],"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"editor.suggestSelection": "first","vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue","[html]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"codestream.requestFeedbackOnCommit": false,"editor.fontLigatures": null,"security.workspace.trust.untrustedFiles": "open","diffEditor.ignoreTrimWhitespace": false

然后格式化代码就是按照prettier插件的来格式化
附录下我的全部setting设置，包括vue2的，背景颜色

{"terminal.integrated.rendererType": "dom","workbench.sideBar.location": "right","workbench.colorCustomizations": {"[Default Light+]": {"editor.selectionHighlightBackground": "#f5f113","editor.selectionBackground": "#f5f113","editor.background": "#cce8cf","editorGutter.background": "#cce8cf","editorCursor.foreground": "#ff0000","editor.lineHighlightBorder": "#d3d3d3"}},"editor.tokenColorCustomizations": {"[Default Light+]": {"comments": "#519657","strings": "#7e3648","functions": "#1c7887","keywords": "#a207fc","variables": "#0720fc","numbers": "#e21d1d","textMateRules": [{"name": "Operator","scope": "keyword.operator","settings": {"foreground": "#e21d1d","fontStyle": "bold"}},{"name": "Punctuation","scope": "punctuation","settings": {"foreground": "#a207fc","fontStyle": "bold"}}]}},"editor.fontWeight": "500","editor.fontSize": 18,"workbench.colorTheme": "Default Light+","editor.fontFamily": "Consolas, '微软雅黑', monospace","workbench.activityBarRight.visible": false,"workbench.iconTheme": "vscode-icons","telemetry.enableUserPrivacyCollectionPrompt": false,// 上面是绿豆沙设置，下面是ctrl s自动对齐代码设置"editor.formatOnType": true,"eslint.options": { //指定vscode的eslint所处理的文件的后缀"extensions": [".js",".vue",".ts",".tsx"]},"git.autofetch": true,"vetur.validation.template": true,// vscode默认启用了根据文件类型自动设置tabsize的选项"editor.detectIndentation": false,// 重新设定tabsize"editor.tabSize": 2,// #每次保存的时候自动格式化 "editor.formatOnSave": true,//  #让函数(名)和后面的括号之间加个空格"javascript.format.insertSpaceBeforeFunctionParenthesis": true,// #这个按用户自身习惯选择 "vetur.format.defaultFormatter.html": "prettier",// #让vue中的js按编辑器自带的ts格式进行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript","vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_attributes": "force-aligned"}},"editor.suggestSelection": "first","editor.codeActionsOnSave": {"source.fixAll.eslint": true},"vue3snippets.enable-compile-vue-file-on-did-save-code": false,"diffEditor.ignoreTrimWhitespace": false,"prettier.bracketSameLine": true, // 但是这一项无法被识别，所以是无效的"prettier.vueIndentScriptAndStyle": true,"volar.autoCompleteRefs": true,"editor.formatOnSave": true,// eslint配置项，保存时自动修复"editor.codeActionsOnSave": {"source.fixAll.eslint": true},// 默认使用prettier格式化支持的文件"editor.defaultFormatter": "esbenp.prettier-vscode",//自动设定eslint工作区"eslint.workingDirectories": [{ "mode": "auto" }],"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"editor.suggestSelection": "first","vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue","[html]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"codestream.requestFeedbackOnCommit": false,"editor.fontLigatures": null,"security.workspace.trust.untrustedFiles": "open","diffEditor.ignoreTrimWhitespace": false
}

vue3 volar格式化代码相关推荐

vue3项目使用prettier格式化代码
因为开了新项目,所以用了vue3 ,并且选了Prettier 1.先在 vscode安装 Prettier - Code formatter 2.在项目根目录创建:.prettierrc.js mo ...
vue html 格式化,解决在写Vue时，格式化代码属性自动换行的问题
参考来源特别说明,这些内容非本人原创,只是网络上说法很多,而这种我亲测有效,分享给大家感谢segmentfault网用户 Raymond 它拥有3.6k的点赞量感谢segmentfault网用户 ...
vscode 格式化某一段代码_VSCode格式化代码功能失效的bug解决方法
VSCode格式化代码功能失效的bug解决方法前不久我装上了黑苹果,那么为了快速转移开发环境,我使用了VSCode(Visual Studio Code下面简称VSCode)的插件 Setting ...
eclipse保存自动组织导入、删除不必要的导入、格式化代码
eclipse保存自动组织导入.删除不必要的导入.格式化代码: 窗口→首选项→Java→编辑器→保存操作→勾选"对保存执行所选操作"."格式化源码"." ...
vs2008格式化代码
ctrl+a全选需要格式化的代码,然后按ctrl+k快捷方式,然后再按ctrl+f,即可. 或者,编辑->高级->格式化代码类别:asp.net 查看评论
eclipse中格式化代码快捷键Ctrl+Shift+F失效的解决办法
很长一段时间我的eclipse都有个毛病,就是当我要格式化代码的时候,右键-source-format能够起效,但ctrl+shift+f不好使了. 可以基本断定是快捷键与别的软件冲突了,但一直也没时 ...
idae 格式化代码设置eslint_vscode 中格式化代码[vue2支持，插件ESLint、Prettier、Vetur]...
1. 安装vscode插件ESLint Prettier formatter for Visual Studio Code Vetur 2. 配置文件 .editorconfigroot = true ...
vim代码格式化自动加空格_vim格式化代码实际上就是缩进代码, 命令是等号=
vim格式化代码实际上就是 "缩进代码", 命令是等号= 格式化就是 vim 根据文件的类型, 自动的对代码进行缩进缩进的类型有多种, 都是用等号命令: = 全部格式化 : ...
vscode格式化代码无效--可能的解决方法
vscode格式化代码无效--可能的解决方法参考文章: (1)vscode格式化代码无效--可能的解决方法 (2)https://www.cnblogs.com/code1992/p/8657985 ...

vue3 volar格式化代码

vue3 volar格式化代码相关推荐

最新文章

热门文章