• VS code 代码自动格式化4(vue3)


    保留vue2,并且vue3 代码格式化成功

    VS code 代码自动格式化3(vue2 代码自动格式化)不同点有三处

    1、[vue]:"editor.defaultFormatter":  "dbaeumer.vscode-eslint" 改为  “octref.vetur”

    2、[javascript]:"editor.defaultFormatter":  "HookyQR.beautify" 改为  “esbenp.prettier-vscode”

    3、新增 "editor.formatOnSave": true

    代码如下:

    "[vue]" : {
        // "editor.defaultFormatter": "dbaeumer.vscode-eslint"
        "editor.defaultFormatter" :  "octref.vetur"
      }, 
    "[javascript]" : {
        // "editor.defaultFormatter": "HookyQR.beautify"
        "editor.defaultFormatter" :  "esbenp.prettier-vscode"
      },
    "editor.formatOnSave" :  true

    vue2 + 修改代码如下:(完整代码)

    {
      // "git.enableSmartCommit": true,
      // "git.confirmSync": false,
      "diffEditor.ignoreTrimWhitespace": false,
      "files.autoSave": "afterDelay",
      "files.associations": {
        "*.vue": "vue",
        "*.wpy": "vue",
        "*.wxml": "wxml",
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript",
        "*.html": "html"
      },
      //通过界面能够修改的配置
      "eslint.run": "onSave",
      "eslint.format.enable": true,
      "eslint.migration.2_x": "off",
      "eslint.enable": true, //是否开启vscode的eslint
      "eslint.alwaysShowStatus": true,
      "eslint.options": {
        //指定vscode的eslint所处理的文件的后缀
        "extensions": [".js", ".vue", ".ts", ".tsx"]
      },
      // 配置 ESLint 检查的文件类型 autoFix默认开启,只需输入字符串数组即可
      "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue-html",
        "html",
        "vue"
        //{"language": "vue","autoFix": true}
      ],
      "editor.tabSize": 2,
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
      //安装live Server插件
      "liveServer.settings.donotShowInfoMsg": true,
      "liveServer.settings.donotVerifyTags": true,
      "liveServer.settings.NoBrowser": true,
      "prettier.semi": false, //  #去掉代码结尾的分号
      "prettier.singleQuote": true, //  #使用单引号替代双引号
      "prettier.eslintIntegration": true,
      "svn.enableProposedApi": "product",
      // "search.followSymlinks": false,
      "typescript.check.npmIsInstalled": false,
      "[vue]": {
        // "editor.defaultFormatter": "dbaeumer.vscode-eslint"
        "editor.defaultFormatter": "octref.vetur"
      },
      "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
      },
      "[css]": {
        "editor.defaultFormatter": "HookyQR.beautify"
      },
      "[scss]": {
        "editor.defaultFormatter": "HookyQR.beautify"
      },
      "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[javascript]": {
        // "editor.defaultFormatter": "HookyQR.beautify"
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[typescript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
      },
      "json.schemas": [
        {
          "fileMatch": ["/myfile"],
          "url": "schemaURL"
        }
      ],
      "[git-commit]": {
        "editor.rulers": [72],
        "workbench.editor.restoreViewState": false
      },
      "git.autofetch": true,
      // 格式化stylus, 需安装Manta's Stylus Supremacy插件
      "stylusSupremacy.insertColons": false, // 是否插入冒号
      "stylusSupremacy.insertSemicolons": false, // 是否插入分好
      "stylusSupremacy.insertBraces": false, // 是否插入大括号
      "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
      "stylusSupremacy.insertNewLineAroundBlocks": false,
    
      "beautify.language": {
        "js": {
          "type": ["javascript", "json", "jsonc"],
          "filename": [".jshintrc", ".jsbeautifyrc"]
        },
        "css": ["css", "less", "scss"],
        "html": ["htm", "html"]
      },
      "vsicons.dontShowNewVersionMessage": true,
      "guides.enabled": false,
      "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
      "react-native-tools.showUserTips": false, // 两个选择器中是否换行
      // vscode默认启用了根据文件类型自动设置tabsize的选项
      "editor.detectIndentation": false,
      // "editor.fontLigatures": false, // 是否启用字体连字
      "editor.fontLigatures": null, // 是否启用字体连字
      "editor.suggestSelection": "first",
      "editor.renderControlCharacters": true,
      "editor.multiCursorModifier": "ctrlCmd", // 两个选择器中是否换行
      // "editor.snippetSuggestions": "none",
      // 控制键入触发器字符时是否应自动显示建议
      "editor.suggestOnTriggerCharacters": false,
      // 控制是否根据文档中的文字计算自动完成列表。
      "editor.wordBasedSuggestions": false,
      "editor.suggest.showFunctions": false,
      "editor.suggest.showInterfaces": false,
      "editor.acceptSuggestionOnCommitCharacter": false,
      // "editor.quickSuggestions": null, //是否开启.vue项目,标准格式化规范.eslintrc.js
      "editor.quickSuggestions": {
        "strings": false
      },
      "emmet.includeLanguages": {
        "wxml": "html"
      },
      "minapp-vscode.disableAutoConfig": true,
      //  #让函数(名)和后面的括号之间加个空格
      "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
      // #让vue中的js按编辑器自带的ts格式进行格式化
      "vetur.format.defaultFormatter.js": "vscode-typescript",
      "vetur.format.defaultFormatter.html": "js-beautify-html",
      //一定要在vutur.defaultFormatterOptions参数中设置,单独修改prettier扩展的设置是无法解决这个问题的,因为perttier默认忽略了vue文件(事实上从忽略列表移除vue也不能解决这个问题)
      "vetur.format.defaultFormatterOptions": {
        "prettier": {
          "semi": false, // 格式化不加分号
          "singleQuote": true, // 格式化以单引号为主
          "trailingComma": "none" //是否最后一句话使用逗哈来结尾
        },
        "js-beautify-html": {
          // force-aligned | force-expand-multiline
          // "wrap_attributes": "force-aligned"
          "wrap_attributes": "auto"
        },
        "prettyhtml": {
          "printWidth": 100,
          "singleQuote": false,
          "wrapAttributes": false,
          "sortAttributes": true
        }
      },
      "workbench.editor.showTabs": true,
      // 别名路径跳转插件
      "alias-skip.mappings": {
        "@": "/src", // 默认只有`@`映射,映射到`/src`,你可以添加更多映射,映射路径必须以`/`开头
        // ...更多映射关系
        "~@/": "/src",
        "views": "/src/views",
        "assets": "/src/assets",
        "network": "/src/network",
        "common": "/src/common"
      },
      // "alias-skip.allowedsuffix": ["js","vue","jsx","ts"],  // 默认有这四项
      "alias-skip.rootpath": "package.json",
      "workbench.iconTheme": "vscode-icons",
      "svn.path": "D://Software//TortoiseSVN//bin",
      "editor.formatOnPaste": true,
      "bracketPairColorizer.depreciation-notice": false,
      "tabnine.experimentalAutoImports": true,
      "security.workspace.trust.untrustedFiles": "open",
      "bracket-pair-colorizer-2.depreciation-notice": false,
      "github.copilot.enable": {
        "*": true,
        "yaml": false,
        "plaintext": true,
        "markdown": false
      },
      "alignment.surroundSpace": {
        "colon": [0, 1],
        "assignment": [1, 1],
        "arrow": [1, 1],
        "comment": 2
      },
      "http.proxyAuthorization": null,
      "auto-close-tag.excludedTags": [
        "area",
        "base",
        "br",
        "col",
        "command",
        "embed",
        "hr",
        "img",
        "input",
        "keygen",
        "link",
        "meta",
        "param",
        "source",
        "track",
        "wbr"
      ],
      "editor.formatOnSave": true
    }
  • 相关阅读:
    云计算设计模式(十九)——运行重构模式
    云计算设计模式(十八)——重试模式
    云计算设计模式(十七)——基于队列的负载均衡模式
    云计算设计模式(十六)——优先级队列模式
    云计算设计模式(十五)——管道和过滤器模式
    云计算设计模式(十四)——实体化视图模式
    云计算设计模式(十三)——领导人选举模式
    云计算设计模式(十二)——索引表模式
    使用WebClient上传文件时的一些问题
    .NET研发人员面试题(一)
  • 原文地址:https://www.cnblogs.com/chenxihuenxiao/p/16314247.html
Copyright © 2020-2023  润新知