V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
iscurry
V2EX  ›  Visual Studio Code

求问 vscode 格式化 vue 代码的最佳姿势?

  •  
  •   iscurry · 2021-04-04 08:47:39 +08:00 · 6334 次点击
    这是一个创建于 1327 天前的主题,其中的信息可能已经有所发展或是发生改变。

    当我格式化 vue 代码时,方法格式化效果为:a() {}
    但是这样在运行时提示格式不正确,本该格式化为 a () {} 请问该如何操作?

    14 条回复    2021-04-06 10:50:21 +08:00
    CheckTime
        1
    CheckTime  
       2021-04-04 08:55:07 +08:00
    提供参考:我在 Jetbrains 上,使用配置了 ESLint 的项目,使用 Fix ESLint Problems 可以格式化代码
    Track13
        2
    Track13  
       2021-04-04 09:04:45 +08:00 via Android
    cli 创建项目的时候你选的 Standard Style?
    https://standardjs.com/
    zhuweiyou
        3
    zhuweiyou  
       2021-04-04 09:12:16 +08:00
    prettier 插件
    renmu123
        4
    renmu123  
       2021-04-04 09:18:08 +08:00 via Android
    安装 vetur 插件。或 npm 安装 prettier 后配置文件,设置为保存时自动格式化
    AeroXu
        5
    AeroXu  
       2021-04-04 09:59:34 +08:00
    Vetur 可以读取你的 prettier 配置,然后格式化。另外 prettier 也可以格式化 vue 文件。
    noqwerty
        6
    noqwerty  
       2021-04-04 10:22:16 +08:00   ❤️ 1
    哈哈哈哈换了个问法真的没人喷你了
    devld
        7
    devld  
       2021-04-04 10:38:32 +08:00 via Android
    vetur 可以配置 js/ts 格式化器。prettier 貌似不能配置方法名后面的空格,默认没空格;如果用 vscode 自带的格式化器,可以配置方法名后面的有没有空格。

    报错是因为 eslint 的规则,我用 prettier 时,直接把这个规则禁用掉了。
    wozhihuipinyin
        8
    wozhihuipinyin  
       2021-04-04 11:18:32 +08:00 via Android
    拷一份大佬的配置文件,eslint 再也不会报错了😎
    jimliang
        9
    jimliang  
       2021-04-04 13:14:40 +08:00
    eslint auto fix
    bojackhorseman
        10
    bojackhorseman  
       2021-04-04 14:42:03 +08:00 via iPhone
    @noqwerty 哈哈哈,这样
    FightPig
        11
    FightPig  
       2021-04-04 18:15:12 +08:00
    prettier + eslint
    uxstone
        12
    uxstone  
       2021-04-05 14:49:29 +08:00
    @尤小右
    kid740246048
        13
    kid740246048  
       2021-04-05 23:36:34 +08:00
    建议用 prettier 格式化代码,然后 eslint 配下规则,仅检查语法而不检查格式,不然大概率跟 prettier 起冲突。
    顺便推荐一套一直在用的 eslint 规则: https://github.com/AlloyTeam/eslint-config-alloy
    laicanwen
        14
    laicanwen  
       2021-04-06 10:50:21 +08:00
    看你的格式化规则,格式化代码应该用的是 prettier 或其他的。然后报错是因为 eslint 的规则检查。
    prettier 无法格式化为 a () {},这一点是跟 eslint 冲突的。
    如果是你的个人项目,可以考虑修改 eslint 规则或使用 eslint 插件配合 eslint 进行格式化。如果是多人公司项目你没办法修改规则,那你就乖乖照 eslint 的规定去格式化。
    个人的配置是格式化使用 eslint 插件,以及保存文件时自动格式化代码,vue 和 js 都是同理。具体的配置在 vsc 的 setting 文件里,具体操作百度很多,我就不赘述了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1037 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 19:42 · PVG 03:42 · LAX 11:42 · JFK 14:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.