vs code配置

settings.json

{
  "editor.wordWrap": "on",
  "explorer.confirmDelete": false,
  "security.workspace.trust.untrustedFiles": "open",
  "px-to-rem.number-of-decimals-digits": 3,
  "px-to-rem.px-per-rem": 240,
  "cssrem.fixedDigits": 3,
  "workbench.iconTheme": "file-icons",
  "editor.mouseWheelZoom": true,
  "liveServer.settings.CustomBrowser": "chrome",
  "editor.find.autoFindInSelection": "always",
  "liveServer.settings.donotShowInfoMsg": true,
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  "easysass.targetDir": "./src/css",
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "wxml": "html",
    "javascript": "javascriptreact"
  },
  "amVim.startInInsertMode": true,
  "workbench.startupEditor": "newUntitledFile",
  "git.autofetch": true,
  "files.associations": {
    "*.wxml": "html",
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "explorer.confirmDelete": false,
  "vsicons.dontShowNewVersionMessage": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "explorer.confirmDragAndDrop": false,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    },
    "vue"
  ],
  // "eslint.autoFixOnSave": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "wxml": "html",
    "javascript": "javascriptreact"
  },
  "dart.checkForSdkUpdates": false,
  "terminal.integrated.fontFamily": "monospace",
  "editor.fontLigatures": null,
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "editor.fontWeight": "normal",
  "[dart]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.detectIndentation": false,
    "editor.suggest.insertMode": "replace"
  },
  // 自动删除结尾的; ,  
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // - auto: 仅在超出行长度时才对属性进行换行。
  // - force: 对除第一个属性外的其他每个属性进行换行。
  // - force-aligned: 对除第一个属性外的其他每个属性进行换行,并保持对齐。
  // - force-expand-multiline: 对每个属性进行换行。
  // - aligned-multiple: 当超出折行长度时,将属性进行垂直对齐。
  "html.format.wrapAttributes": "auto",
  "files.autoSave": "afterDelay",
  "vetur.ignoreProjectWarning": true,
  "workbench.colorTheme": "Monokai",
  "security.workspace.trust.untrustedFiles": "open",
  "terminal.integrated.tabs.enabled": false,
  "vetur.format.defaultFormatter.ts": "vscode-typescript",
  "workbench.editor.untitled.hint": "hidden",
  "editor.tabSize": 2,
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "editor.formatOnSave": true,
  "window.zoomLevel": 0.3,
  "[json]": {
    "editor.quickSuggestions": {
      "strings": true
    },
    "editor.suggest.insertMode": "replace"
  }
}
image.png
image.png

html代码片段

{
    // Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    // Example:
    // "Print to console": {
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }
    "create vue2 template": {
        "prefix": "vue2",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"en\">",
            "",
            "<head>",
            "  <meta charset=\"UTF-8\">",
            "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "  <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
            "  <title>Document</title>",
            "</head>",
            "",
            "<body>",
            "  <div id=\"app\">",
            "    $2",
            "  </div>",
            "  <script src=\"./lib/vue.js\"></script>",
            "  <script>",
            "    new Vue({",
            "      el: \"#app\",",
            "      data: {",
            "        $1",
            "      },",
            "      created() {",
            "      },",
            "      methods: {",
            "      }",
            "    })",
            "  </script>",
            "</body>",
            "",
            "</html>"
        ],
        "description": "create vue2 template"
    }
}

vue代码片段

{
    // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    // Example:
    // "Print to console": {
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }
    "vue": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  $1",
            "</template>",
            "<script>",
            "export default {",
            "  data ()({})",
            "}",
            "</script>",
            "<style lang=\"scss\" scoped>",
            "</style>"
        ],
        "description": "vue output to vue-template"
    },
    "vt": {
        "prefix": "vt",
        "body": [
            "<template>",
            "  $1",
            "</template>",
            "<script type=\"ts\">",
            "import { Component, Vue } from 'vue-property-decorator'",
            "@Component({",
            "  data: () => ({}),",
            "  components: {",
            "  }",
            "})",
            "export default class App extends Vue {",
            "}",
            "</script>",
            "<style lang=\"scss\">",
            "</style>",
        ],
        "description": "vue output to vue-template"
    },
    "create vue2 template": {
        "prefix": "vue2",
        "body": [
            "<template>",
            "  $1",
            "</template>",
            "<script>",
            "export default {",
            "  data(){",
            "    return {",
            "",
            "    }",
            "  }",
            "}",
            "</script>",
            "<style lang=\"scss\" scoped>",
            "</style>"
        ],
        "description": "create vue2 template"
    },
    "create vue3 template": {
        "prefix": "vue3",
        "body": [
            "<template>",
            "  <div>",
            "",
            "  </div>",
            "</template>",
            "",
            "<script>",
            "export default {",
            "  setup () {",
            "    $1",
            "",
            "    return {$2}",
            "  }",
            "}",
            "</script>",
            "",
            "<style lang=\"scss\" scoped>",
            "",
            "</style>"
        ],
        "description": "create vue3 template"
    }
}
image.png

image.png

image.png
image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容