VScode 结局插件prettier和vetur格式化冲突

先上配置代码

{"workbench.iconTheme": "vscode-icons","workbench.startupEditor": "newUntitledFile","workbench.colorTheme": "One Dark Pro","editor.fontSize": 14,"editor.tabSize": 2,"editor.minimap.enabled": true,"editor.renderWhitespace": "all","editor.multiCursorModifier": "ctrlCmd","git.autofetch": true,"explorer.confirmDelete": false,"explorer.confirmDragAndDrop": false,"open-in-browser.default": "Chrome","files.autoSave": "onWindowChange","window.zoomLevel": 0,/***********************以下是常用配置******************************//** editor 相关*/"editor.formatOnSave": true, // #每次保存的时候自动格式化"editor.formatOnPaste": true, // #每次粘贴的时候自动格式化"editor.codeActionsOnSave": { // #每次保存的时候将代码按eslint格式进行修复"source.fixAll.eslint": true},/** prettier 相关*/"prettier.jsxSingleQuote": true,"prettier.semi": false, //  #去掉代码结尾的分号"prettier.singleQuote": true, //  #使用带引号替代双引号"prettier.requireConfig": true,/** javascript 相关*/"javascript.preferences.quoteStyle": "single",// "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //  #让函数(名)和后面的括号之间加个空格"javascript.updateImportsOnFileMove.enabled": "always",/** html 相关*/"html.format.endWithNewline": true,/** vetur 相关*/"vetur.format.defaultFormatter.js": "vscode-typescript", // #让vue中的js按编辑器自带的ts格式进行格式化"vetur.format.defaultFormatter.html": "prettier", //格式化.vue中html"[vue]": {"editor.defaultFormatter": "octref.vetur"},
}

需要注意的点

单双引号的问题

prettier解决

"prettier.singleQuote": true, //  #使用带引号替代双引号

句末分号的问题

prettier解决

"prettier.semi": false, //  #去掉代码结尾的分号

vue中html属性的问题

vetur解决

"vetur.format.defaultFormatter.html": "prettier", //格式化.vue中html

这块根据根据个人爱好，上述是我的配置，也有如下配置

"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_line_length": 120,"wrap_attributes": "auto",  // 超出每行的限制折行"wrap_attributes": "force-expand-multiline",  // 不管有多少属性都折行"wrap_attributes": "force-aligned",  // 第一个属性不折行，后续所有属性和第一个对齐折行"end_with_newline": false}
}

vue中的样式问题

vetur解决，使用默认配置，不要用prettier

VScode 结局插件prettier和vetur格式化冲突相关推荐

VSCode - setting.json配置 - Prettier、Vetur格式化和ESLint检查
vscode 前端最佳插件配置格式化代码时用到的插件 ESLint(代码规范和错误检查工具,控制代码质量) Prettier(代码格式化工具) Vetur(识别 vue 文件) EditorConf ...
VSCode中使用 eslint+prettier完成代码格式化以及自动化整理
如果在一个大型项目中会有多个人一起去开发,为了使每个人写的代码格式都保持一致,就需要借助软件去帮我们保存文件的时候,自己格式化代码配置 ESLInt.js vscode软件下载一个ESLint,在到 ...
VSCode配置格式化工具(Prettier/Vetur/ESLint)和jsconfig.json
VSCode配置格式化工具(Prettier/Vetur/ESLint) 网上很多配置,有的过时了, 有的很杂, 自己看了下文档,简单配置了以下, 顺便记录下来. 准备用vue-cli建好项目之后, ...
js 格式化prettier配置_prettier 格式化插件
prettier 格式化插件 prettier代码风格统一的号插件, 可以在多个编辑器上面安装对应的插件,通过简单的配置,让编辑器自动帮我们修改代码格式.可以支持JS/JSX/TS/Flow/JSON ...
vscode配置ESLint+Prettier - Code formatter+Vetur
首先是安装ESLint+prettier+vetur: vscode 搜索安装即可,然后是注意package是否有这些: 没有的话npm安装. 之后就是配置这个文件: module.exports = ...
利用vscode stylelint插件实现ctrl+s自动格式化vue项目中的css、scss
vscode stylelint使用 1. vscode stylelint插件安装及配置 vscode stylelint插件版本 vscode中配置stylelint和开启自动修复 2. 安装st ...
html5 自动格式化,VSCode插件JS-CSS-HTML Formatter自动格式化代码
VSCode插件JS-CSS-HTML Formatter自动格式化代码当你Ctrl+S保存代码时,自动格式化代码.本来很好用,但是修改thinkphp模板文件时,就有问题了.因为js代码里面,调用 ...
vscode中怎样格式化js代码_VSCode插件JS-CSS-HTML Formatter自动格式化代码
VSCode插件JS-CSS-HTML Formatter自动格式化代码当你Ctrl+S保存代码时,自动格式化代码.本来很好用,但是修改thinkphp模板文件时,就有问题了.因为js代码里面,调用 ...
解决vue项目中prettier、eslint格式冲突问题
解决vue项目中prettier.eslint格式冲突问题我是用prettier作为vscode默认的格式化插件的,vue项目自动保存的时候,格式化,会自动在代码末尾添加分号,单引号会自动变成双引号 ...

VScode 结局插件prettier和vetur格式化冲突

需要注意的点

单双引号的问题

句末分号的问题

vue中html属性的问题

vue中的样式问题

VScode 结局插件prettier和vetur格式化冲突相关推荐

最新文章

热门文章