V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
KigKrazy
V2EX  ›  程序员

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

  •  
  •   KigKrazy · 2018-12-10 23:34:33 +08:00 · 7077 次点击
    这是一个创建于 2159 天前的主题,其中的信息可能已经有所发展或是发生改变。

    下面是我从 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
        1
    fsdgfd  
       2018-12-11 00:09:22 +08:00 via Android
    设置 vetur.format.defaultFormatter.html 为 none 或者 prettyhtml 试试
    rabbbit
        2
    rabbbit  
       2018-12-11 01:16:34 +08:00   ❤️ 1
    "vetur.format.defaultFormatter.html": "prettyhtml",
    "vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
    "printWidth": 200,
    }
    },
    vHypnos
        3
    vHypnos  
       2018-12-11 05:50:08 +08:00
    2 楼正解
    hcy1996
        4
    hcy1996  
       2018-12-11 09:05:20 +08:00
    就我感觉格式化后代码更清晰了吗 哈哈哈 (逃:
    Shook
        5
    Shook  
       2018-12-11 09:21:09 +08:00
    想问 vscode 有没有自动进退格的插件啊?
    就是按回车自动跳到下一行并且前进两格,按 back 自动退回多个格子直到对齐…
    用 webstorm 这些习惯了,想换个开源编辑器,但是插件质量无法比肩还是挺难受的。
    KigKrazy
        6
    KigKrazy  
    OP
       2018-12-11 09:44:21 +08:00
    @vHypnos 啊?啊啊?啊啊啊?没道理的啊- -格式化后看得我好尴尬
    KigKrazy
        7
    KigKrazy  
    OP
       2018-12-11 09:46:37 +08:00
    @rabbbit 感谢
    看着舒服多了
    yhxx
        8
    yhxx  
       2018-12-11 10:21:31 +08:00
    这是你格式化插件的问题

    懒得自己改插件的格式化规则的话,pretty、beauty 之类的自己挨个试试哪个舒服好了
    Stlin
        9
    Stlin  
       2018-12-11 10:34:19 +08:00
    我觉得格式化之后挺好的呀,不用再去横向滚动了, 虽然往下滚动可能有点长
    qcts33
        10
    qcts33  
       2018-12-11 11:01:23 +08:00
    表示我也喜欢格式化以后的风格,我觉得这样更清晰,这样的风格也更加适合版本控制
    varzy
        11
    varzy  
       2018-12-11 12:01:04 +08:00 via Android
    配置 prettier,提交代码前先格式化一次
    DengMr
        12
    DengMr  
       2018-12-11 13:16:29 +08:00   ❤️ 1
    "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
        13
    hellotime  
       2018-12-11 15:40:23 +08:00
    我用的 vetur,感觉格式化风格还不错哈,可以试试
    KigKrazy
        14
    KigKrazy  
    OP
       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
        15
    orangutan92  
       2019-03-03 17:04:33 +08:00
    @DengMr auto 是对的,不换行,赞一个
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5348 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 08:46 · PVG 16:46 · LAX 00:46 · JFK 03:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.