🎉 Initial commit.

.eslintrc.json

@@ -0,0 +1,24 @@
+{
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "@typescript-eslint/naming-convention": "warn",
+        "@typescript-eslint/semi": "warn",
+        "curly": "warn",
+        "eqeqeq": "warn",
+        "no-throw-literal": "warn",
+        "semi": "off"
+    },
+    "ignorePatterns": [
+        "out",
+        "dist",
+        "**/*.d.ts"
+    ]
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+	// See http://go.microsoft.com/fwlink/?LinkId=827846
+	// for the documentation about the extensions.json format
+	"recommendations": [
+		"dbaeumer.vscode-eslint",
+		"eamodio.tsl-problem-matcher"
+	]
+}

.vscode/launch.json

@@ -0,0 +1,20 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Run Extension",
+			"type": "extensionHost",
+			"request": "launch",
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}"
+			],
+			"outFiles": [
+				"${workspaceFolder}/dist/**/*.js"
+			]
+		}
+	]
+}

.vscode/settings.json

@@ -0,0 +1,13 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+    "files.exclude": {
+        "out": false, // set this to true to hide the "out" folder with the compiled JS files
+        "dist": false // set this to true to hide the "dist" folder with the compiled JS files
+    },
+    "search.exclude": {
+        "out": true, // set this to false to include "out" folder in search results
+        "dist": true // set this to false to include "dist" folder in search results
+    },
+    // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+    "typescript.tsc.autoDetect": "off"
+}

.vscode/tasks.json

@@ -0,0 +1,23 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "watch",
+			"problemMatcher": [
+                "$ts-webpack-watch",
+                "$tslint-webpack-watch"
+			],
+			"isBackground": true,
+			"presentation": {
+				"reveal": "never"
+			},
+			"group": {
+				"kind": "build",
+				"isDefault": true
+			}
+		}
+	]
+}

.vscodeignore

@@ -0,0 +1,12 @@
+.vscode/**
+.vscode-test/**
+out/**
+node_modules/**
+src/**
+.gitignore
+.yarnrc
+vsc-extension-quickstart.md
+**/tsconfig.json
+**/.eslintrc.json
+**/*.map
+**/*.ts

.yarnrc

@@ -0,0 +1 @@
+--ignore-engines true

CHANGELOG.md

@@ -0,0 +1,9 @@
+# Change Log
+
+All notable changes to the "extension-template" extension will be documented in this file.
+
+Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
+
+## [Unreleased]
+
+- Initial release

README.md

@@ -0,0 +1,21 @@
+# IDE 插件模板
+
+## 简介
+该插件模板融合了 `Vue3 + Vuex + vue-i18n + typescript`，方便在 vscode 的 webview 中开发前端项目。
+
+## 如何开发
+
+### 安装依赖
+
+```shell
+yarn && cd frontend &&  yarn
+```
+
+### 监听代码
+- 在项目的根目录执行 `yarn watch`，以监听插件的代码。
+- 在 frontend 目录下执行 `yarn watch`，以监听前端 Vue 项目的代码。
+
+### 运行和调试
+1. 点击侧边栏「**运行和调试**」，点击 Run Extension 运行插件。
+
+2. 在弹出的 vscode 编辑器运行 `cmd + shift + p`，输入 `show panel` 打开 webview 面板。

frontend/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md

@@ -0,0 +1,24 @@
+# frontend
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

frontend/babel.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+    presets: [
+        '@vue/app',
+        ["@babel/preset-env", {
+            "modules": false
+        }]
+    ],
+    plugins: [
+        [
+            "component",
+            {
+                "libraryName": "element-ui",
+                "styleLibraryName": "theme-chalk"
+            }
+        ]
+    ]
+}

frontend/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "watch": "vue-cli-service build --watch"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "element-ui": "^2.15.1",
+    "vue": "^3.0.0",
+    "vue-class-component": "^8.0.0-0",
+    "vue-i18n": "^9.1.7",
+    "vuex": "^4.0.2"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.18.0",
+    "@typescript-eslint/parser": "^4.18.0",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-typescript": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0",
+    "@vue/eslint-config-typescript": "^7.0.0",
+    "babel-eslint": "^10.1.0",
+    "babel-plugin-component": "^1.1.1",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^7.0.0",
+    "less": "^4.1.1",
+    "less-loader": "^5.0.0",
+    "typescript": "~4.1.5"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended",
+      "@vue/typescript"
+    ],
+    "parserOptions": {
+      "parser": "@typescript-eslint/parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

frontend/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

frontend/src/App.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <div>{{ $t("hello") }}</div>
+    <img :src="`${resource}/images/logo.png`" alt="" />
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+import { mapGetters } from "vuex";
+
+@Options({
+  components: {},
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapGetters("setting", {
+      language: "getLanguage",
+      resource: "getResource",
+    }),
+  },
+  mounted() {
+    if (this.language !== this.$i18n.locale) {
+      this.$i18n.locale = this.language;
+    }
+  },
+})
+export default class App extends Vue {}
+</script>
+
+<style lang="less">
+#app {
+  text-align: center;
+  font-size: 50px;
+  margin-top: 60px;
+}
+
+</style>

frontend/src/assets/style/common.less

@@ -0,0 +1,9 @@
+.dark {
+	--hap-brand-color: #377df7;
+	--hap-main-bg-color: #3B3B3B;
+}
+
+:root {
+	--hap-brand-color: #377df7;
+	--hap-main-bg-color: #ffffff;
+}

frontend/src/assets/style/variables.less

@@ -0,0 +1,18 @@
+@brand: #377df7;
+@warning: #e78121;
+@white: #ffffff;
+@black: #000000;
+@text-black: #1a1a1a;
+@grey: #7a8ba9;
+@border-grey: #eaeaea;
+@white-grey: #f4f6fa;
+@text-grey: #919394;
+@input-grey: #f4f6fa;
+@bg-grey: #f4f6fa;
+@dark-font: #cccccc;
+
+@size-factor: 5px;
+@gap-1: 10px;
+@gap-2: 20px;
+@gap-3: 30px;
+@gap-4: 40px;

frontend/src/i18n/index.ts

@@ -0,0 +1,17 @@
+import { createI18n } from "vue-i18n";
+
+const en = require("./locale/en.json");
+const zhCN = require("./locale/zh-CN.json");
+
+// 语言包根据语言环境分类
+const messages = {
+  en,
+  "zh-CN": zhCN,
+};
+
+const i18n = createI18n({
+  locale: "zh-CN", // 设置当前语言环境，默认中文简体
+  messages, // 设置语言环境对应信息
+});
+
+export default i18n;

frontend/src/i18n/locale/en.json

@@ -0,0 +1,3 @@
+{
+	"hello": "hello world"
+}

frontend/src/i18n/locale/zh-CN.json

@@ -0,0 +1,3 @@
+{
+	"hello": "你好世界"
+}