chore(project): add prettier for code format (#3645)

* chore(project): install prettier and lint-staged

* chore(project): apply prettier to html too

* chore(project): git ignore eslintcache

* chore(project): add a comment about format script

* chore(prettier): update printWidth

* chore(prettier): remove useTabs option

* chore(prettier): add HTML validation

* refactor(prettier): fix closing tags

* feat(prettier): define angular parser for html templates

* style(prettier): run prettier on codebase

Co-authored-by: Anthony Lapenna <lapenna.anthony@gmail.com>

webpack/webpack.common.js

@@ -12,11 +12,11 @@ const projectRoot = path.resolve(__dirname, '..');
 
 module.exports = {
   entry: {
-    main: './app/__module.js'
+    main: './app/__module.js',
   },
   output: {
     filename: '[name].[hash].js',
-    path: path.resolve(projectRoot, 'dist/public')
+    path: path.resolve(projectRoot, 'dist/public'),
   },
   module: {
     rules: [
@@ -28,9 +28,9 @@ module.exports = {
           'auto-ngtemplate-loader',
           {
             // enforce: 'pre',
-            loader: 'eslint-loader'
-          }
-        ]
+            loader: 'eslint-loader',
+          },
+        ],
       },
       {
         test: /\.html$/,
@@ -39,40 +39,36 @@ module.exports = {
           {
             loader: 'ngtemplate-loader',
             options: {
-              relativeTo: projectRoot + '/'
-            }
+              relativeTo: projectRoot + '/',
+            },
           },
-          { loader: 'html-loader' }
-        ]
+          { loader: 'html-loader' },
+        ],
       },
 
       {
         test: /.xml$/,
-        use: 'file-loader'
+        use: 'file-loader',
       },
       {
         test: /\.css$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          { loader: 'css-loader', options: { importLoaders: 1 } },
-          'postcss-loader'
-        ]
-      }
-    ]
+        use: [MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader'],
+      },
+    ],
   },
   plugins: [
     new HtmlWebpackPlugin({
       template: './app/index.html',
       templateParameters: {
         name: npmPackage.name,
-        author: npmPackage.author
+        author: npmPackage.author,
       },
-      manifest: './assets/ico/manifest.json'
+      manifest: './assets/ico/manifest.json',
     }),
     new WebpackBuildNotifierPlugin({
       title: 'Portainer build',
       logo: path.resolve('./assets/favicon-32x32.png'),
-      suppressSuccess: true
+      suppressSuccess: true,
     }),
     new CleanTerminalPlugin(),
     new ProvidePlugin({
@@ -82,12 +78,12 @@ module.exports = {
       'window.moment': 'moment',
       moment: 'moment',
       'window.jsyaml': 'js-yaml',
-      jsyaml: 'js-yaml'
+      jsyaml: 'js-yaml',
     }),
     new MiniCssExtractPlugin({
       filename: '[name].[hash].css',
       chunkFilename: '[name].[id].css',
-      sourceMap: true
+      sourceMap: true,
     }),
     new CleanWebpackPlugin(['dist/public']),
     new IgnorePlugin(/^\.\/locale$/, /moment$/),
@@ -95,11 +91,11 @@ module.exports = {
     new LodashModuleReplacementPlugin({
       shorthands: true,
       collections: true,
-      paths: true
+      paths: true,
     }),
     new DefinePlugin({
       __CONFIG_GA_ID: JSON.stringify(pkg.config.GA_ID),
-    })
+    }),
   ],
   optimization: {
     splitChunks: {
@@ -109,10 +105,10 @@ module.exports = {
           chunks: 'initial',
           name: 'vendor',
           priority: 10,
-          enforce: true
-        }
-      }
-    }
+          enforce: true,
+        },
+      },
+    },
   },
   resolve: {
     alias: {
@@ -121,6 +117,6 @@ module.exports = {
       Docker: path.resolve(projectRoot, 'app/docker'),
       Extensions: path.resolve(projectRoot, 'app/extensions'),
       Portainer: path.resolve(projectRoot, 'app/portainer'),
-    }
+    },
   },
 };