我的VS Code 使用篇

皮肤 & 图标

吸血鬼皮肤 - Dracula Official

其他皮肤 - Slack Theme | Atom One Light Theme

图标主题 - Material Icon Theme

Vue 代码修复配置

需要使用两个插件 ESLint + Prettier

{
"prettier.jsxBracketSameLine": true,
    "prettier.jsxSingleQuote": true,
    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true,
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true,
    "files.autoSave": "afterDelay",
    "emmet.includeLanguages": {
        "vue-html": "html",
        "vue": "html",
        "javascript": "javascriptreact",
        "typescript": "html",
    },
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            // 格式化不加分号
            "semi": false,
            // 格式化为单引号
            "singleQuote": true,
            // "trailingComma": "es5" //在代码尾部添加逗号
        }
    },
    // "emmet.triggerExpansionOnTab": true,
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // // vscode默认启用了根据文件类型自动设置tabsize的选项
    "editor.detectIndentation": false,
    // 重新设定tabsize
    "editor.tabSize": 4,
    // // #每次保存的时候自动格式化 
    "editor.formatOnSave": true,
    // // #每次保存的时候将代码按eslint格式进行修复
    "eslint.autoFixOnSave": true,
    //  #去掉代码结尾的分号
    "prettier.semi": true,
    //  #使用带引号替代双引号
    "prettier.singleQuote": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "diffEditor.ignoreTrimWhitespace": false,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "javascript.updateImportsOnFileMove.enabled": "always",
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
}

Vue 模板代码

<template>
  <div class="" />
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {}
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 生命周期 - 创建之前
  beforeCreate() {},
  // 生命周期 - 挂载之前
  beforeMount() {},
  // 生命周期 - 更新之前
  beforeUpdate() {},
  // 生命周期 - 更新之后
  updated() {},
  // 生命周期 - 销毁之前
  beforeDestroy() {},
  // 生命周期 - 销毁完成
  destroyed() {},
  activated() {},
  // 方法集合
  methods: {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>

打开设置

将以下代码复制配置文件中

{
  "Print to console": {
    "prefix": "vue",
    "body": [
      "<template>",
      "  <div class=\"clazz\">",
      "    <div />",
      "  </div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  // import引入的组件需要注入到对象中才能使用",
      "  components: {},",
      "  data() {",
      "    return {",
      "",
      "    }",
      "  },",
      "",
      "  // 监听属性 类似于data概念",
      "  computed: {},",
      "",
      "  // 生命周期 - 挂载完成（可以访问DOM元素）",
      "  mounted: {},",
      "",
      "  methods: {}",
      "}",
      "",
      "</script>",
      "<style lang='scss' scoped>",
      "</style>",
      ""
  ],
    "description": "Log output to console"
  }
}

使用模板