Vscode快捷开发系列：快速生成组件模板、代码格式化、快速生成注释

snowbitx
456 阅读4分钟

1.vue3代码格式化

1.vscode打开文件-首选项-配置代码片段-vue.json文件

{
	"Print to v2": {
	  "prefix": "vue2",
	  "body": [
		"<template>",
		"  <div>\n",
		"  </div>",
		"</template>",
		"<script>",
		"export default {",
		"  name: '',",
		"  components: {},",
		"  props: {},",
		"  data () {",
		"    return {\n",
		"    }",
		"  },",
		"  computed: {},",
		"  watch: {},",
		"  created () {\n",
		"  },",
		"  mounted () {\n",
		"  },",
		"  methods: {\n",
		"  },",
		"}",
		"</script>",
		"<style lang='scss' scoped>\n",
		"</style>",
		"$2"
	  ],
	  "description": "Log output to console"
	},
	"Print to v3": {
	  "prefix": "vue3",
	  "body": [
		"<template>",
		"</template>",
		"<script setup lang='ts'>",
		"</script>",
		"<style scoped lang='less'>\n",
		"</style>"
	  ],
	  "description": "Log output to console"
	},
	"Print to setup": {
	  "prefix": "setup",
	  "body": [
		"<template>",
		"  <div></div>",
		"</template>",
		"<script setup>\n",
		"</script>",
		"<style scoped>\n",
		"</style>"
	  ],
	  "description": "Log output to console"
	},
	"Print to v2 setup": {
	  "prefix": "vue2Setup",
	  "body": [
		"<script setup>\n",
		"</script>",
		"<template>",
		"  <div></div>",
		"</template>",
		"<style scoped>\n",
		"</style>"
	  ],
	  "description": "Log output to console"
	}
  "Print to v2Dialog setup": {
    "prefix": "vue2Dialog",
    "body": [
      "<template>",
      "  <lb-dialog @submit=\"submit\" v-model=\"dialogVisible\">",
      "",
      "  </lb-dialog>",
      "</template>",
      "<script>",
      "export default {",
      "  name: '',",
      "  components: {},",
      "  props: {",
      "    value: {",
      "      type: Boolean,",
      "      default: false",
      "    }",
      "  },",
      "  data () {",
      "    return {",
      "",
      "    }",
      "  },",
      "  computed: {",
      "    dialogVisible: {",
      "      get () {",
      "        return this.value",
      "      },",
      "      set (val) {",
      "        this.$emit('input', val)",
      "      }",
      "    },",
      "",
      "  },",
      "  watch: {},",
      "  created () {",
      "",
      "  },",
      "  mounted () {",
      "",
      "  },",
      "  methods: {",
      "    submit () { }",
      "  },",
      "}",
      "</script>",
      "<style lang='scss' scoped>",
      "</style>",
      ""
    ],
    "description": ""
  }
  "Print to v2DialogForm setup": {
    "prefix": "v2DialogForm",
    "body": [
      "<template>",
      "  <lb-dialog title=\"表单\" width=\"30%\" @submit=\"submit\" v-model=\"dialogVisible\">",
      "    <el-form ref=\"formRef\" :model=\"formData\" label-width=\"120px\" :rules=\"rules\">",
      "      <el-form-item label=\"label\" prop=\"value\">",
      "        <el-input v-model=\"formData.value\"></el-input>",
      "      </el-form-item>",
      "    </el-form>",
      "  </lb-dialog>",
      "</template>",
      "<script>",
      "export default {",
      "  name: '',",
      "  components: {},",
      "  props: {",
      "    value: {",
      "      type: Boolean,",
      "      default: false",
      "    }",
      "  },",
      "  data () {",
      "    return {",
      "      rules: {",
      "        value: [{ required: true, message: '请输入value', trigger: 'blur' }],",
      "      },",
      "      formData: {",
      "        value: '',",
      "      }",
      "    }",
      "  },",
      "  computed: {",
      "    dialogVisible: {",
      "      get () {",
      "        return this.value",
      "      },",
      "      set (val) {",
      "        this.$emit('input', val)",
      "      }",
      "    },",
      "",
      "  },",
      "  watch: {},",
      "  created () {",
      "",
      "  },",
      "  mounted () {",
      "",
      "  },",
      "  methods: {",
      "    submit () {",
      "      this.$refs.formRef.validate((valid) => {",
      "        if (valid) {",
      "",
      "        }",
      "      })",
      "    }",
      "  },",
      "}",
      "</script>",
      "<style lang='scss' scoped>",
      "</style>",
      ""
    ],
    "description": ""
  }
  }

配置完成可以在vue页面中输入vue+tab快速出代码
2.格式化前端代码
安装插件Prettier - Code formatter，将json文件拷贝至setting.json中，vscode-设置

{
  //编辑器字体大小
  "editor.fontSize": 14,
  // ctrl+滑轮改变大小
  "editor.mouseWheelZoom": true,
  // 改变终端
  "terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
  // 终端字体
  "terminal.integrated.fontSize": 14,
  // vue使用eslint
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
  },
  // vue使用eslint
  "editor.formatOnSave": true,
  // 自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 配置 ESLint 检查的文件类型
  "eslint.validate": [
    "vue",
    "html",
    "js",
    "javascript"
  ],
  //终端字体
  "terminal.integrated.fontFamily": "Consolas",
  //行内样式
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.minimap.enabled": true,
  "git.autofetch": true,
  //new
  // 显示 markdown 中英文切换时产生的特殊字符
  "editor.renderControlCharacters": true,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  // 这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // 让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.ts": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // vue组件中html代码格式化样式
    }
  },
  "auto-rename-tag.activationOnLanguage": [
    "html",
    "xml",
    "php",
    "javascript"
  ],
  "highlight-matching-tag.styles": {
    "opening": {
      "left": {
        "custom": {
          "borderWidth": "0 0 0 1.5px",
          "borderStyle": "solid",
          "borderColor": "yellow",
          "borderRadius": "5px",
          "overviewRulerColor": "white"
        }
      },
      "right": {
        "custom": {
          "borderWidth": "0 1.5px 0 0",
          "borderStyle": "solid",
          "borderColor": "yellow",
          "borderRadius": "5px",
          "overviewRulerColor": "white"
        }
      }
    }
  },
  "workbench.iconTheme": "material-icon-theme",
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  "update.mode": "none",
  "diffEditor.ignoreTrimWhitespace": false,
  // "workbench.colorTheme": "Snazzy Operator", // 默认皮肤
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  //设置签代码皮肤样式
  "powermode.enabled": true, //是否启用
  "powermode.presets": "flames",
  "git.confirmSync": false,
  "vsicons.dontShowNewVersionMessage": true,
  "[javascript]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "explorer.confirmDelete": false,
  "fileheader.customMade": {
    "Description": "",
    "Author": "柯南",
    "Date": "Do not edit",
    "LastEditTime": "Do not edit",
    "LastEditors": "柯南",
    "FilePath": "Do not edit"
  },
  "fileheader.cursorMode": {
    "description": "",
    "author": "柯南",
    "param": "",
    "return": ""
  },
  "fileheader.configObj": {
    "autoAdd": true, // 默认开启自动添加头部注释，当文件没有设置头部注释时保存会自动添加
    "autoAlready": true, // 默认开启
    "prohibitAutoAdd": [
      "json",
      "md"
    ], // 禁止.json .md文件，自动添加头部注释
    "wideSame": true, // 设置为true开启
    "wideNum": 13 // 字段长度 默认为13
  },
  "security.workspace.trust.untrustedFiles": "open",
  "material-icon-theme.folders.color": "#7cb342",
  "powermode.shake.enabled": false,
  "leek-fund.funds": [],
  "leek-fund.statusBarStock": [],
  "tabnine.experimentalAutoImports": true,
  "leek-fund.fundGroups": [],
  "leek-fund.stocks": [
    "sz002280",
    "hk03690",
    "hk00700",
    "usr_ixic",
    "usr_dji",
    "usr_inx",
    "ZC0"
  ]
}

使用后保存时可自动进行格式化
3.快速生成函数注释和头部注释 插件名称koroFileHeader 使用方法：函数前面输入ctrl+win+T，如需修改默认配置可复制上面json文件到setting.json

2.vue2 格式化

vue2比较简单。只需安装vetur 和eslint。

1.根目录新建 .eslinttrc.js，如果有 无需创建

// ESlint 检查配置
module.exports = {
  root: true,
  parserOptions: {
    parser: "babel-eslint",
    sourceType: "module"
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: ["plugin:vue/recommended", "eslint:recommended"],

  // add your custom rules here
  // it is base on https://github.com/vuejs/eslint-config-vue
  rules: {
    "vue/max-attributes-per-line": [2, {
      "singleline": 10,
      "multiline": {
        "max": 1,
        "allowFirstLine": false
      }
    }],
    "vue/singleline-html-element-content-newline": "off",
    "vue/multiline-html-element-content-newline": "off",
    "vue/name-property-casing": ["error", "PascalCase"],
    "vue/no-v-html": "off",
    "accessor-pairs": 2,
    "arrow-spacing": [2, {
      "before": true,
      "after": true
    }],
    "block-spacing": [2, "always"],
    "brace-style": [2, "1tbs", {
      "allowSingleLine": true
    }],
    "camelcase": [0, {
      "properties": "always"
    }],
    "comma-dangle": ["off", "never"],
    "comma-spacing": [0, {
      "before": false,
      "after": true
    }],
    "comma-style": [2, "last"],
    "constructor-super": 2,
    "curly": [2, "multi-line"],
    "dot-location": [2, "property"],
    "eol-last": 2,
    "eqeqeq": 0,
    "generator-star-spacing": [2, {
      "before": true,
      "after": true
    }],
    "handle-callback-err": [2, "^(err|error)$"],
    "indent": [2, 2, { SwitchCase: 1 }],
    // "prettier/prettier": [2, { tabWidth: 4, endOfLine: "auto" }],
    "jsx-quotes": [2, "prefer-single"],
    "key-spacing": [2, {
      "beforeColon": false,
      "afterColon": true
    }],
    "keyword-spacing": [2, {
      "before": true,
      "after": true
    }],
    "new-cap": [2, {
      "newIsCap": true,
      "capIsNew": false
    }],
    "new-parens": 2,
    "no-array-constructor": 2,
    "no-caller": 2,
    "no-console": "off",
    "no-class-assign": 2,
    "no-cond-assign": 2,
    "no-const-assign": 2,
    "no-control-regex": 0,
    "no-delete-var": 2,
    "no-dupe-args": 2,
    "no-dupe-class-members": 2,
    "no-dupe-keys": 2,
    "no-duplicate-case": 2,
    "no-empty-character-class": 2,
    "no-empty-pattern": 2,
    "no-eval": 2,
    "no-ex-assign": 2,
    "no-extend-native": 2,
    "no-extra-bind": 2,
    "no-extra-boolean-cast": 2,
    "no-extra-parens": [2, "functions"],
    "no-fallthrough": 2,
    "no-floating-decimal": 2,
    "no-func-assign": 2,
    "no-implied-eval": 2,
    "no-inner-declarations": [2, "functions"],
    "no-invalid-regexp": 2,
    "no-irregular-whitespace": 2,
    "no-iterator": 2,
    "no-label-var": 2,
    "no-labels": [2, {
      "allowLoop": false,
      "allowSwitch": false
    }],
    "no-lone-blocks": 2,
    "no-mixed-spaces-and-tabs": 2,
    "no-multi-spaces": 2,
    "no-multi-str": 2,
    "no-multiple-empty-lines": [2, {
      "max": 1
    }],
    "no-native-reassign": 2,
    "no-negated-in-lhs": 2,
    "no-new-object": 2,
    "no-new-require": 2,
    "no-new-symbol": 2,
    "no-new-wrappers": 2,
    "no-obj-calls": 2,
    "no-octal": 2,
    "no-octal-escape": 2,
    "no-path-concat": 2,
    "no-proto": 2,
    "no-redeclare": 2,
    "no-regex-spaces": 2,
    "no-return-assign": [2, "except-parens"],
    "no-self-assign": 2,
    "no-self-compare": 2,
    "no-sequences": 2,
    "no-shadow-restricted-names": 2,
    "no-spaced-func": 2,
    "no-sparse-arrays": 2,
    "no-this-before-super": 2,
    "no-throw-literal": 2,
    "no-trailing-spaces": 2,
    "no-undef": 2,
    "no-undef-init": 2,
    "no-unexpected-multiline": 2,
    "no-unmodified-loop-condition": 2,
    "no-unneeded-ternary": [2, {
      "defaultAssignment": false
    }],
    "no-unreachable": 2,
    "no-unsafe-finally": 2,
    "no-unused-vars": [2, {
      "vars": "all",
      "args": "none"
    }],
    "no-useless-call": 2,
    "no-useless-computed-key": 2,
    "no-useless-constructor": 2,
    "no-useless-escape": 0,
    "no-whitespace-before-property": 2,
    "no-with": 2,
    "one-var": [2, {
      "initialized": "never"
    }],
    "operator-linebreak": [2, "after", {
      "overrides": {
        "?": "before",
        ":": "before"
      }
    }],
    "padded-blocks": [2, "never"],
    "quotes": [2, "double", {
      "avoidEscape": true,
      "allowTemplateLiterals": true
    }],
    "semi": [0, "always"],
    "semi-spacing": [2, {
      "before": false,
      "after": true
    }],
    "space-before-blocks": [2, "always"],
    "space-before-function-paren": [2, "never"],
    // "space-before-function-paren": 0,
    "space-in-parens": [2, "never"],
    "space-infix-ops": 2,
    "space-unary-ops": [2, {
      "words": true,
      "nonwords": false
    }],
    "spaced-comment": [2, "always", {
      "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!", ","]
    }],
    "template-curly-spacing": [2, "never"],
    "use-isnan": 2,
    "valid-typeof": 2,
    "wrap-iife": [2, "any"],
    "yield-star-spacing": [2, "both"],
    "yoda": [2, "never"],
    "prefer-const": 2,
    "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
    "object-curly-spacing": [2, "always", {
      objectsInObjects: false
    }],
    "array-bracket-spacing": [2, "never"],
    "vue/no-unused-components": 0,
    // 对component中的组件命名样式实施特定的大小写
    "vue/component-name-in-template-casing": 0,
    // 允许HTML未闭合标签
    "vue/html-self-closing": 0,
    // 允许props修改
    "vue/no-mutating-props": 0,
    // 允许computed修改名称
    "vue/no-side-effects-in-computed-properties": 0,
    // $emit不校验kebab-case
    "vue/custom-event-name-casing": 0,
    // 允许v-for和v-if一起用
    "vue/no-use-v-if-with-v-for": 0,
    "vue/require-default-prop": 0,
    "vue/require-valid-default-prop": 0,
    "vue/require-prop-types": 0,
    "vue/no-lone-template": 0,
    "vue/no-template-shadow": 0,
    "vue/this-in-template": 0,
    "vue/prop-name-casing": 0,
    // 允许在 case 子句中使用词法声明
    "no-case-declarations": 0
  }
}

2.同时修改vscode setting.json文件配置

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  // "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.format.defaultFormatter.sass": "sass-formatter",
  "open-in-browser.default": "Chrome",

  // 将vetur的js格式化工具指定为vscode自带的
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // 移除js语句的分号
  "javascript.format.semicolons": "remove",
  // 在函数名后面加上括号，类似这种形式 foo () {}
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

  // eslint配置项，保存时自动修复错误。
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },

  // 指定 *.vue 文件的格式化工具为vetur
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  // 指定 *.js 文件的格式化工具为vscode自带
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },

  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto"
      // #vue组件中html代码格式化样式
    },
    "prettyhtml": {
      "printWidth": 800,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    },
    "prettier": {
      // 去掉代码结尾的分号
      "semi": false, //不加分号
      "singleQuote": true, //用单引号
      // #让prettier使用eslint的代码格式进行校验
      "eslintIntegration": true,
      "arrowParens": "always"
    }
  },

  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,

  // 保存时自动格式化代码
  "editor.formatOnSave": true,

  //可选项。stylus的格式化配置以及sass格式化配置。
  // 格式化stylus, 需安装Manta's Stylus Supremacy插件
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false,
  // 启用调试模式。
  "sass.format.debug": false,
  // 删除空格
  "sass.format.deleteEmptyRows": true,
  // 删除最后一个空格。
  "sass.format.deleteWhitespace": true,
  // 将 scss / css 转换为 sass。
  "sass.format.convert": true,
  // 如果 属性:值 为true,则始终设置为1.
"sass.format.setPropertySpace": true,
"editor.tabSize": 2,
"git.confirmSync": false,
"fileheader.customMade": {
  "Description": "",
  "Author": "wxy",
  "Date": "Do not edit",
  "LastEditTime": "Do not edit",
  "LastEditors": "wxy",
  "FilePath": "Do not edit"
},
"fileheader.cursorMode": {
  "description": "",
  "author": "wxy",
  "param": "",
  "return": ""
},
"fileheader.configObj": {
  "autoAdd": false, // 默认开启自动添加头部注释，当文件没有设置头部注释时保存会自动添加
  "autoAlready": true, // 默认开启
  "prohibitAutoAdd": ["json", "md"], // 禁止.json .md文件，自动添加头部注释
  "wideSame": true, // 设置为true开启
  "wideNum": 13 // 字段长度 默认为13
},
}

3. 快速生成代码片段网址

snippet-generator.app/

avatar
文章
阅读
粉丝