Adding .scss to style extensions

README.md

@@ -1,4 +1,5 @@
 # React Component Generation Extension for VSCode
+
 (**vscode-react-component-generator**)
 
 [![Version](https://vsmarketplacebadge.apphb.com/version/abdullahceylan.vscode-react-component-generator.svg)](https://marketplace.visualstudio.com/items?itemName=abdullahceylan.vscode-react-component-generator)
@@ -7,7 +8,9 @@
 [![GitHub](https://flat.badgen.net/github/release/abdullahceylan/vscode-react-component-generator)](https://github.com/abdullahceylan/vscode-react-component-generator/releases)
 
 ## Description
+
 The extension automatically creates folder for react component containing :
+
 - `index.js`
 - `ComponentName.jsx`
 - `ComponentName.styles.js` (for `styled`-component or `emotion` option)
@@ -23,18 +26,18 @@ Install through VS Code extensions. Search for `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.
 
-```
+```bash
 ext install abdullahceylan.vscode-react-component-generator
 ```
 
 ## Usage
 
 - Right click on the file or folder in the file explorer
 - Select one of following options:
-    - "New React Container Component"
-    - "New React Stateless Component"
-    - "New React Container Component with Redux"
-    - "New React Stateless Component with Redux"
+  - "New React Container Component"
+  - "New React Stateless Component"
+  - "New React Container Component with Redux"
+  - "New React Stateless Component with Redux"
 - Enter a component name in the pop up in camelCase or PascalCase. If you enter the component name as in camelCase, then extension will convert it PascalCase automatically.
 
 ![Container component](assets/images/vscode-1.gif)
@@ -46,54 +49,68 @@ ext install abdullahceylan.vscode-react-component-generator
 ![Extension settings](assets/images/vscode-settings.png)
 
 ## Configuration
+
 You can access to the extension's settings through VSCode settings. You can customize:
 
+### `ACReactComponentGenerator.global.generateFolder` (default: `true`)
 
-#### `ACReactComponentGenerator.global.generateFolder` (default: `true`)
 Generate or not separate folder for newly created component
 
-#### `ACReactComponentGenerator.global.quotes` (default: `single`)
+### `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`)
+
+- "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.
+- "legacy" - Contains `componentWillReceiveProps`, `componentWillMount`
+- "reactv16"  - Contains `getSnapshotBeforeUpdate`, `getDerivedStateFromProps`, `getDerivedStateFromError`, `componentDidCatch` and removes `componentWillReceiveProps` and `componentWillMount`
+
+### `ACReactComponentGenerator.indexFile.create` (default: `true`)
+
+Whether to generate component's index file or not.
+
+### `ACReactComponentGenerator.indexFile.extension` (default: `js`)
 
-#### `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`)
+Whether 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: `js`)
+Whether to generate component's stylesheet file or not.
+
+### `ACReactComponentGenerator.styleFile.extension` (default: `js`)
+
 The extension of generated stylesheet file. e.g.: ComponentName.styles.(`extension`)
 
-#### `ACReactComponentGenerator.styleFile.suffix` (default: `.styles`)
+### `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`)
+### `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
+## Changelog
 
-#### [Click here](CHANGELOG.md)
+### [Click here](CHANGELOG.md)
 
 ## Bugs
 

package.json

@@ -78,7 +78,7 @@
         "ACReactComponentGenerator.mainFile.create": {
           "type": "boolean",
           "default": true,
-          "description": "Weather to generate component's main file or not. e.g.: ComponentName.(extension)"
+          "description": "Whether to generate component's main file or not. e.g.: ComponentName.(extension)"
         },
         "ACReactComponentGenerator.mainFile.extension": {
           "type": "string",
@@ -88,7 +88,7 @@
         "ACReactComponentGenerator.styleFile.create": {
           "type": "boolean",
           "default": true,
-          "description": "Weather to generate component's style file or not. e.g.: ComponentName.(extension)"
+          "description": "Whether to generate component's style file or not. e.g.: ComponentName.(extension)"
         },
         "ACReactComponentGenerator.styleFile.type": {
           "type": "string",
@@ -97,6 +97,7 @@
             "emotion (.js)",
             "standard (.css)",
             "sass (.sass)",
+            "sass (.scss)",
             "less (.less)"
           ],
           "default": "styled-components (.js)",
@@ -111,7 +112,7 @@
         "ACReactComponentGenerator.indexFile.create": {
           "type": "boolean",
           "default": true,
-          "description": "Weather to generate component's index file or not. e.g.: index.(extension)"
+          "description": "Whether to generate component's index file or not. e.g.: index.(extension)"
         },
         "ACReactComponentGenerator.indexFile.extension": {
           "type": "string",

src/helpers.ts

@@ -73,7 +73,7 @@ export class FileHelper {
     public static createIndexFile(componentDir: string, componentName: string): Observable<string> {
       const globalConfig: GlobalInterface = getConfig().get('global');
       const indexConfig: IndexInterface = getConfig().get('indexFile');
-  
+
       let templateFileName = this.assetRootDir + '/templates/index.template';
         if (indexConfig.template) {
             templateFileName = this.resolveWorkspaceRoot(indexConfig.template);
@@ -137,8 +137,6 @@ export function logger(type: 'success'|'warning'|'error', msg: string = '') {
     }
   }
 
-
-
 export default function getConfig(uri?: Uri) {
     return workspace.getConfiguration('ACReactComponentGenerator', uri) as any;
 }
@@ -150,8 +148,8 @@ export function getStyleSheetExtTemplate() {
     template: 'css.template',
   };
 
-	switch (configuredView) {
-		case 'styled-components (.js)':
+  switch (configuredView) {
+    case 'styled-components (.js)':
       styleTemplate = { ext: 'js', template: 'css-styled.template' };
       break;
     case 'emotion (.js)':
@@ -160,11 +158,14 @@ export function getStyleSheetExtTemplate() {
     case 'sass (.sass)':
       styleTemplate.ext = 'sass';
       break;
+    case 'sass (.scss)':
+      styleTemplate.ext = 'scss';
+      break;
     case 'less (.less)':
       styleTemplate.ext = 'less';
       break;
   }
-  
+
   return styleTemplate;
 }