diff --git a/.templates/.editorconfig b/.templates/.editorconfig
new file mode 100644
index 0000000..689fb50
--- /dev/null
+++ b/.templates/.editorconfig
@@ -0,0 +1,21 @@
+# @see https://editorconfig-specification.readthedocs.io/en/latest/
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+charset = utf-8
+
+# 4 space indentation
+[*.py]
+indent_style = space
+indent_size = 4
+
+# Tab indentation (no size specified)
+[Makefile]
+indent_style = tab
diff --git a/.templates/.gitignore b/.templates/.gitignore
new file mode 100644
index 0000000..e748d61
--- /dev/null
+++ b/.templates/.gitignore
@@ -0,0 +1,29 @@
+# @see https://git-scm.com/docs/gitignore
+
+# `.DS_Store` is a file that stores custom attributes of its containing folder
+.DS_Store
+
+# Logs
+logs
+*.log
+
+# Dependencies
+node_modules
+bower_components
+vendor
+
+# Caches
+.cache
+.npm
+.eslintcache
+
+# Temporaries
+.tmp
+.temp
+
+# Built
+dist
+target
+built
+output
+out
diff --git a/.templates/template-sample-react-component/index.jsx b/.templates/template-sample-react-component/index.jsx
new file mode 100644
index 0000000..d52bbc7
--- /dev/null
+++ b/.templates/template-sample-react-component/index.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+import classNames from "classnames/bind";
+
+import styles from "./index.scss";
+
+const cx = classNames.bind(styles);
+
+function __templateNameToPascalCase__() {
+  return <div className={cx("__templateNameToParamCase__")}>Hello :)</div>;
+}
+
+export default __templateNameToPascalCase__;
diff --git a/.templates/template-sample-react-component/index.scss b/.templates/template-sample-react-component/index.scss
new file mode 100644
index 0000000..c2488a6
--- /dev/null
+++ b/.templates/template-sample-react-component/index.scss
@@ -0,0 +1,3 @@
+.__templateNameToParamCase__ {
+  display: inline-block;
+}
diff --git a/.templates/template-sample/index.js b/.templates/template-sample/index.js
new file mode 100644
index 0000000..0c0ef38
--- /dev/null
+++ b/.templates/template-sample/index.js
@@ -0,0 +1,5 @@
+export default function __templateNameToPascalCase__() {
+  console.log("TemplateName -> __templateName__");
+  console.log("TemplateName to ParamCase -> __templateNameToParamCase__");
+  console.log("TemplateName to PascalCase -> __templateNameToPascalCase__");
+}
diff --git a/template.config.js b/template.config.js
new file mode 100644
index 0000000..54f2425
--- /dev/null
+++ b/template.config.js
@@ -0,0 +1,31 @@
+/**
+ * This file is a configuration file generated by the `Template` extension on `vscode`
+ * @see https://marketplace.visualstudio.com/items?itemName=yongwoo.template
+ */
+module.exports = {
+  // You can change the template path to another path
+  templateRootPath: "./.templates",
+  // After copying the template file the `replaceFileTextFn` function is executed
+  replaceFileTextFn: (fileText, templateName, utils) => {
+    // @see https://www.npmjs.com/package/change-case
+    const { changeCase } = utils;
+    // You can change the text in the file
+    return fileText
+      .replace(/__templateName__/gm, templateName)
+      .replace(
+        /__templateNameToPascalCase__/gm,
+        changeCase.pascalCase(templateName)
+      )
+      .replace(
+        /__templateNameToParamCase__/gm,
+        changeCase.paramCase(templateName)
+      );
+  },
+  replaceFileNameFn: (fileName, templateName, utils) => {
+    const { path } = utils;
+    // @see https://nodejs.org/api/path.html#path_path_parse_path
+    const { base } = path.parse(fileName);
+    // You can change the file name
+    return base;
+  }
+};