prettier also for css and scss files

fix #7451

generators/client/templates/angular/.prettierignore.ejs

@@ -1 +1,2 @@
 node_modules
+target

generators/client/templates/angular/.prettierrc.ejs

@@ -1,7 +1,12 @@
 # Prettier configuration
+
 printWidth: 140
 singleQuote: true
-jsxBracketSameLine: false
-parser: typescript
-arrowParens: avoid
 tabWidth: 4
+useTabs: false
+
+# js and ts rules:
+arrowParens: avoid
+
+# jsx and tsx rules:
+jsxBracketSameLine: false

generators/client/templates/angular/package.json.ejs

@@ -147,14 +147,14 @@
   },
   <%_ if(!skipCommitHook) { _%>
   "lint-staged": {
-    "*.ts": ["prettier --write", "git add"]
+    "src/**/*.{ts,css,scss}": ["prettier --write", "git add"]
   },
   <%_ } _%>
   "scripts": {
     <%_ if(!skipCommitHook) { _%>
     "precommit": "lint-staged",
     <%_ } _%>
-    "prettier:format":"<%= clientPackageManager %> prettier --write **/*.ts",
+    "prettier:format":"<%= clientPackageManager %> prettier --write 'src/**/*.{ts,css,scss}'",
     "lint": "tslint --project tsconfig.json -e 'node_modules/**'",
     "lint:fix": "<%= clientPackageManager %> run lint -- --fix",
     "ngc": "ngc -p tsconfig-aot.json",

generators/client/templates/react/.prettierignore.ejs

@@ -1 +1,2 @@
 node_modules
+target

generators/client/templates/react/.prettierrc.ejs

@@ -1,6 +1,12 @@
 # Prettier configuration
+
 printWidth: 140
 singleQuote: true
-jsxBracketSameLine: false
-parser: typescript
+tabWidth: 2
+useTabs: false
+
+# js and ts rules:
 arrowParens: avoid
+
+# jsx and tsx rules:
+jsxBracketSameLine: false

generators/client/templates/react/package.json.ejs

@@ -171,14 +171,14 @@ limitations under the License.
   },
   <%_ if(!skipCommitHook) { _%>
   "lint-staged": {
-    "*.{ts,tsx}": ["prettier --write", "git add"]
+    "src/**/*.{ts,tsx,css,scss}": ["prettier --write", "git add"]
   },
   <%_ } _%>
   "scripts": {
     <%_ if(!skipCommitHook) { _%>
     "precommit": "lint-staged",
     <%_ } _%>
-    "prettier:format": "<%= clientPackageManager %> prettier --write **/*.{ts,tsx}",
+    "prettier:format": "<%= clientPackageManager %> prettier --write 'src/**/*.{ts,tsx,css,scss}'",
     "lint": "tslint --project tsconfig.json -e 'node_modules/**'",
     "lint:fix": "<%= clientPackageManager %> run lint -- --fix",
     "cleanup": "rimraf <%= BUILD_DIR %>www",

generators/generator-base-private.js

@@ -33,7 +33,10 @@ const filter = require('gulp-filter');
 const packagejs = require('../package.json');
 const jhipsterUtils = require('./utils');
 const constants = require('./generator-constants');
-const { prettierTransform, defaultTsPrettierOptions } = require('./generator-transforms');
+const {
+    prettierTransform,
+    prettierOptions
+} = require('./generator-transforms');
 
 const CLIENT_MAIN_SRC_DIR = constants.CLIENT_MAIN_SRC_DIR;
 
@@ -1071,12 +1074,13 @@ module.exports = class extends Generator {
      */
     registerClientTransforms(generator = this) {
         if (!generator.skipClient) {
-            const typescriptFilter = filter(['**/*.{ts,tsx}'], { restore: true });
+            // Prettier is clever, it uses correct rules and correct parser according to file extension.
+            const prettierFilter = filter(['src/**/*.{ts,tsx,scss,css}'], { restore: true });
             // this pipe will pass through (restore) anything that doesn't match typescriptFilter
             generator.registerTransformStream([
-                typescriptFilter,
-                prettierTransform(defaultTsPrettierOptions),
-                typescriptFilter.restore
+                prettierFilter,
+                prettierTransform(prettierOptions),
+                prettierFilter.restore
             ]);
         }
     }

generators/generator-transforms.js

@@ -1,12 +1,14 @@
 const through = require('through2');
 const prettier = require('prettier');
 
-const defaultTsPrettierOptions = {
+const prettierOptions = {
     printWidth: 140,
     singleQuote: true,
-    jsxBracketSameLine: false,
-    parser: 'typescript',
+    useTabs: false,
+    // js and ts rules:
     arrowParens: 'avoid',
+    // jsx and tsx rules:
+    jsxBracketSameLine: false,
 };
 
 const prettierTransform = function (defaultOptions) {
@@ -29,5 +31,5 @@ const prettierTransform = function (defaultOptions) {
 
 module.exports = {
     prettierTransform,
-    defaultTsPrettierOptions
+    prettierOptions
 };