diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..4169b48
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,18 @@
+
+## [0.0.2](https://github.com/abdullahceylan/vscode-react-component-generator/compare/0.0.1...0.0.2) (2018-12-09)
+
+### Updates
+* The extension's settings has been refactored. Now, you can customize the settings through Settings UI rather than manual edit the settings file.
+
+
+
+
+### New Features
+
+* Added **lifecycle** type option. Now you can choose whether to create a component with legacy lifecycle or React v16 lifecycles
+* Added **SASS** and **LESS** css extension option.
+
+
+## [0.0.1](#) (2018-12-02)
+
+- Initial Release
\ No newline at end of file
diff --git a/README.md b/README.md
index 100da79..edc3e97 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,20 @@ The extension automatically creates folder for react component containing :
- `ComponentName.jsx`
- `ComponentName.styles.js` (for `styled`-component or `emotion` option)
- `ComponentName.css` (for `standard` style option)
+- `ComponentName.sass` (for `sass` style option)
+- `ComponentName.less` (for `less` style option)
+
+## Installation
+
+Install through VS Code extensions. Search for `VSCode React Component Generator`
+
+[Visual Studio Code Market Place: VSCode React Component Generator](https://marketplace.visualstudio.com/items?itemName=abdullahceylan.vscode-react-component-generator)
+
+Can also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
+
+```
+ext install abdullahceylan.vscode-react-component-generator
+```
## Usage
@@ -29,44 +43,57 @@ The extension automatically creates folder for react component containing :
+
+
## Configuration
You can access to the extension's settings through VSCode settings. You can customize:
-- **global** (`object`):
- - **quotes** (string) - Options: `single` or `double` Result: `'` or `"`
- - **generateFolder** (`bool`) - generate or not separate folder for newly created component
-- **create** (`bool`) - weather to generate this file or not
-- **type** (`string`) - only for `style` file. Options: `standard`, `styled` or `emotion`
-- **suffix** (`string`) - only for `style` file and it's optional. When you specified a suffix, style file name will be ComponentName`suffix`.`extension` Default: `.styles`
-- **extension** (`string`) - extension of generated file (e.g. you might want to change stylesheet file extension of styles, replace "js" with just plain "css")
-
-```json
-{
- "global": {
- "quotes": "single",
- "generateFolder": true,
- },
- "files": {
- "component": {
- "create": true,
- "extension": "jsx",
- },
- "style": {
- "create": true,
- "type": "styled",
- "suffix": ".styles",
- "extension": "js"
- },
- "index": {
- "create": true,
- "extension": "js"
- }
- }
-}
-```
+
+#### `ACReactComponentGenerator.global.generateFolder` (default: `true`)
+Generate or not separate folder for newly created component
+
+#### `ACReactComponentGenerator.global.quotes` (default: `single`)
+Controls the quotes for the imports in the files. Valid options:
+ - "single" - e.g.: import React from `'`react`'`
+ - "double" - e.g.: import React from `"`react`"`
+
+#### `ACReactComponentGenerator.global.lifecycleType` (default: `legacy`)
+The lifecycle type of generated component. Valid options:
+ - "legacy" - Contains `componentWillReceiveProps`, `componentWillMount`
+ - "reactv16" - Contains `getSnapshotBeforeUpdate`, `getDerivedStateFromProps`, `getDerivedStateFromError`, `componentDidCatch` and removes `componentWillReceiveProps` and `componentWillMount`
+
+#### `ACReactComponentGenerator.indexFile.create` (default: `true`)
+Weather to generate component's index file or not.
+
+#### `ACReactComponentGenerator.indexFile.extension` (default: `js`)
+The extension of generated component index file. e.g.: index.(`extension`)
+
+#### `ACReactComponentGenerator.mainFile.create` (default: `true`)
+Weather to generate component's main file or not.
+
+#### `ACReactComponentGenerator.mainFile.extension` (default: `jsx`)
+The extension of generated component file. e.g.: ComponentName.(`extension`)
+
+#### `ACReactComponentGenerator.styleFile.create` (default: `true`)
+Weather to generate component's stylesheet file or not.
+
+#### `ACReactComponentGenerator.styleFile.extension` (default: `jsx`)
+The extension of generated stylesheet file. e.g.: ComponentName.styles.(`extension`)
+
+#### `ACReactComponentGenerator.styleFile.suffix` (default: `.styles`)
+The suffix to add to the end of the stylesheet filename. Default: ComponentName`.styles`.(extension)
+
+#### `ACReactComponentGenerator.styleFile.type` (default: `styled-components`)
+The type of stylesheet file to create. Valid options:
+- "styled-components (.js)" - ComponentName.styles.`js`
+- "emotion (.js)" - ComponentName.styles.`js`
+- "standard (.css)" - ComponentName.styles.`css`
+- "sass (.sass)" - ComponentName.styles.`sass`
+- "less (.less)" - ComponentName.styles.`less`
+
### Changelog
-#### 0.0.1 (2018-12-02)
-- Initial release
+
+#### [Click here](CHANGELOG.md)
## Bugs
diff --git a/assets/images/vscode-settings.png b/assets/images/vscode-settings.png
new file mode 100644
index 0000000..f6328ee
Binary files /dev/null and b/assets/images/vscode-settings.png differ
diff --git a/package.json b/package.json
index 471f3bc..c18a365 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
"name": "vscode-react-component-generator",
"displayName": "VSCode React Component Generator",
"description": "Generates React component files automatically",
- "version": "0.0.1",
+ "version": "0.0.2",
"publisher": "abdullahceylan",
"author": {
"name": "Abdullah Ceylan",
diff --git a/src/helpers.ts b/src/helpers.ts
index e7fe4c9..86f3c00 100644
--- a/src/helpers.ts
+++ b/src/helpers.ts
@@ -126,7 +126,6 @@ export class FileHelper {
}
export function logger(type: 'success'|'warning'|'error', msg: string = '') {
- console.log(msg);
switch (type) {
case 'success':
return window.setStatusBarMessage(`Success: ${msg}`, 5000);
@@ -151,8 +150,6 @@ export function getStyleSheetExtTemplate() {
template: 'css.template',
};
- console.log('configuredView', configuredView);
-
switch (configuredView) {
case 'styled-components (.js)':
styleTemplate = { ext: 'js', template: 'css-styled.template' };
@@ -172,8 +169,6 @@ export function getStyleSheetExtTemplate() {
}
export function removeBetweenTags(remainTag, removedtag, content) {
- console.log("removeBetweenTags -> removedtag", removedtag)
- console.log("removeBetweenTags -> remainTag", remainTag)
const escapeRegExp = s => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
const regexPattern = RegExp(`${escapeRegExp(`<${removedtag}>`)}([\\S\\s]+?)${escapeRegExp(``)}`, "gi");
const removeOnlyTagsPattern = new RegExp(`<(${escapeRegExp(remainTag)}|/${escapeRegExp(remainTag)})[^>]{0,}>`, "gi");