求大佬分享一份 VSCODE 开发 VUE 的插件配置

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2161 天前的主题，其中的信息可能已经有所发展或是发生改变。

下面是我从 GITHUB 上找到并修改的，感觉换行这个问题搞死我!!!请大佬指教下

https://kigkrazy.github.io/linux/2018/10/10/vue-setting/

这份配置换行问题折腾人！

原来代码

<el-button v-if="isAuth(xe:task:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>

格式化之后

        <el-button
          v-if="isAuth('xe:task:delete')"
          type="danger"
          @click="deleteHandle()"
          :disabled="dataListSelections.length <= 0"
        >批量删除</el-button>

看得我老尴尬了!!!

请教如何解决自动换行问题，或者大佬有好的配置分享!!!!

第 1 条附言 · 2018-12-11 18:57:45 +08:00

格式化之后多了个分号，这个怎么解决
```
import AddOrUpdate from './hermes-task-type-add-or-update';
```

三元操作分行并且缩进格式不正确
```
var ids = id ? [id] : this.dataListSelections.map(item => {
return item.id
})
```
格式化之后
```
var ids = id
? [id]
: this.dataListSelections.map(item => {
return item.id //缩进不正确
})
```

15 条回复 • 2019-03-03 17:04:33 +08:00

fsdgfd

2018-12-11 00:09:22 +08:00 via Android

设置 vetur.format.defaultFormatter.html 为 none 或者 prettyhtml 试试

rabbbit

2018-12-11 01:16:34 +08:00

"vetur.format.defaultFormatter.html": "prettyhtml",
"vetur.format.defaultFormatterOptions": {
"prettyhtml": {
"printWidth": 200,
}
},

vHypnos

2018-12-11 05:50:08 +08:00

2 楼正解

hcy1996

2018-12-11 09:05:20 +08:00

就我感觉格式化后代码更清晰了吗哈哈哈（逃：

Shook

2018-12-11 09:21:09 +08:00

想问 vscode 有没有自动进退格的插件啊？
就是按回车自动跳到下一行并且前进两格，按 back 自动退回多个格子直到对齐…
用 webstorm 这些习惯了，想换个开源编辑器，但是插件质量无法比肩还是挺难受的。

KigKrazy

2018-12-11 09:44:21 +08:00

@vHypnos 啊？啊啊？啊啊啊？没道理的啊- -格式化后看得我好尴尬

KigKrazy

2018-12-11 09:46:37 +08:00

@rabbbit 感谢
看着舒服多了

yhxx

2018-12-11 10:21:31 +08:00

这是你格式化插件的问题

懒得自己改插件的格式化规则的话，pretty、beauty 之类的自己挨个试试哪个舒服好了

Stlin

2018-12-11 10:34:19 +08:00

我觉得格式化之后挺好的呀，不用再去横向滚动了，虽然往下滚动可能有点长

qcts33

2018-12-11 11:01:23 +08:00

表示我也喜欢格式化以后的风格，我觉得这样更清晰，这样的风格也更加适合版本控制

varzy

2018-12-11 12:01:04 +08:00 via Android

配置 prettier，提交代码前先格式化一次

DengMr

2018-12-11 13:16:29 +08:00

"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.options.tabSize": 4,
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto"
}
},

hellotime

2018-12-11 15:40:23 +08:00

我用的 vetur，感觉格式化风格还不错哈，可以试试

KigKrazy

2018-12-11 23:44:26 +08:00

结贴吧，各位有不爽的可以按照我下面的配置，说不上完美但是勉强可以用吧!!!!
期待有人能进行修改
```
{
// 0- 使用说明:下载(修改 setting.json1 为 json) || 直接复制文本到 setting.json
// 0- 总原则:Less is More
// 0- 插件配置原则:够用即可,不贪婪插件,绝对不装功能重复的,比如各种 snippet,蛋疼
// 0- snippet 配置原则:我一般很少用别人的 snippet,一下太多了,掌握不了,更不利于熟练运用.用到什么就把 snippet 加到自己的 snippet 中
// 0- 界面原则:能不显示的就不显示(比如 minimap,)需要显示的底部状态栏,顶部文件栏(仅此而已),半显示的(explorer(alt+.),menu(alt)),全屏不是很喜欢,影响其他功能
// 1- 主题 Theme------------------------------------------ 需要安装 atom one dark 和 material icon
"workbench.colorTheme": "Atom One Dark", // atom 主题,字体配色好,比 Material 配色舒服 sublime 直接是 material
"workbench.iconTheme": "material-icon-theme", // icon 主题 material
"material-icon-theme.folders.theme": "specific", // spaecific 风格
"material-icon-theme.activeIconPack": "angular_ngrx", //主题样式
"material-icon-theme.hidesExplorerArrows": true, //隐藏图标箭头
// 2- 字体 Font---------------------------------------------
// 关于注释为什么是斜体,也是非常纠结啊,中文斜体不好看,英文斜体很漂亮,真是鱼与熊掌
//"editor.fontFamily": "Consolas,'Microsoft yahei", // 英文:consolas 中文:雅黑
// "editor.fontSize": 20, // 字号
// "editor.lineHeight": 40, // 行高
// 3- 显示 view-----------------------------------------------
"window.zoomLevel": 0, //视窗缩放
"editor.renderWhitespace": "all", // 显示空格,写代码嘛,显示空格舒服,区分 tab 和空格 ,''和 ' '
"workbench.activityBar.visible": true, // 显示右侧快捷菜单 alt+shift+. 切换
"editor.minimap.enabled": false, // 不显示右侧 minimap
"workbench.statusBar.visible": true, // 显示状态条
//"window.menuBarVisibility": "toggle", //隐藏菜单栏
"explorer.openEditors.visible": 0, //最近打开的文件不显示
// 5- 起始页 startup -----------------------------------------
"workbench.startupEditor": "none", // 起始页啥也不显示
// 14- 烦人的括号匹配 matchBrackets ----------------------------------------------- 需要安装 Subtle Match Brackets
// "editor.matchBrackets": false, // 干掉原先的丑陋的恼人的匹配
// "subtleBrackets.style": {
// // 换上我们漂亮的小金条
// "global": {
// "borderColor": "GoldenRod",
// "borderWidth": "4px"
// }
// },

// 强制单引号
"prettier.singleQuote": true,
// 尽可能控制尾随逗号的打印
"prettier.trailingComma": "all",
// 开启 eslint 支持
"prettier.eslintIntegration": true,
"prettier.printWidth": 200, // 换行字符串阈值
// 保存时自动 fix
"eslint.autoFixOnSave": true,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// 使用插件格式化 html
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 格式化插件的配置
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// 属性强制折行对齐
"wrap_attributes": "force-aligned"
},
"prettyhtml": {
"printWidth": 200,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": true
}
},
"editor.matchBrackets": false
}

```

orangutan92

2019-03-03 17:04:33 +08:00

@DengMr auto 是对的，不换行，赞一个