账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    如何优雅地在mac上配置vscode的代码缩进格式化?
    58
    0

    新入vscode坑的前端菜鸟一枚,先谢过各路大神。
    最近在用vue写一个项目,习惯用了代码保存自动格式化,奈何每次提交代码都会给同事造成一定冲突,
    故求一settings.json能满足小弟心愿。

    心愿:

    1. command + s时保存自动格式化
    2. HTML,JS,VUE,CSS,LESS的tab缩进为4格,保存时也按自动格式化4格来实现
    3. VUE中HTML部分不强制换行
    4. VUE中script部分按4格缩进来实现

    已经按装插件,beautify,prettier,vetur
    被这些插件搞得晕来晕去
    为表诚意,贴上我的settings.json,求指点迷津

    {
        "workbench.iconTheme": "vscode-icons",
        "workbench.colorTheme": "Dracula",
        "editor.fontSize": 14,
        "workbench.editor.enablePreview": false,
        "workbench.startupEditor": "newUntitledFile",
        "explorer.confirmDelete": false,
        "editor.multiCursorModifier": "ctrlCmd",
        "editor.formatOnPaste": true,
        "git.enabled": false,
    
        // 代码缩进
        // vscode默认启用了根据文件类型自动设置tabsize的选项
        "editor.detectIndentation": false,
        // 重新设定tabsize
        "editor.tabSize": 4,
        // #每次保存的时候自动格式化
        "editor.formatOnSave": true,
        // #每次保存的时候将代码按eslint格式进行修复
        // "eslint.autoFixOnSave": true,
        // // 添加 vue 支持
        // "eslint.validate": [
        //     "javascript",
        //     "javascriptreact",
        //     {
        //         "language": "vue",
        //         "autoFix": true
        //     }
        // ],
        //  #让prettier使用eslint的代码格式进行校验
        "prettier.eslintIntegration": true,
        //  #去掉代码结尾的分号
        //   "prettier.semi": false,
        //  #使用带引号替代双引号
        "prettier.singleQuote": true,
        //  #让函数(名)和后面的括号之间加个空格
        "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
        // #这个按用户自身习惯选择
        "vetur.format.defaultFormatter.html": "js-beautify-html",
        // #让vue中的js按编辑器自带的ts格式进行格式化
        "vetur.format.defaultFormatter.js": "vscode-typescript",
        "vetur.format.defaultFormatterOptions": {
            "js-beautify-html": {
                "wrap_attributes": "auto",
                "tab_size": 4
                // #vue组件中html代码格式化样式
            }
        },
        // "vueBeautify.format"
        "prettier.tabWidth": 4,
        "prettier.useTabs": true
    }
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 共 0 条
    • 你不懂 普通会员 1楼
      502 Bad Gateway

      502 Bad Gateway


      nginx
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部