[webui] format code by eslint and prettier

src/webui/.eslintignore

@@ -0,0 +1,3 @@
+/build/**
+/scripts/**
+/src/serviceWorker.ts

src/webui/.eslintrc

@@ -9,22 +9,29 @@
         "sourceType": "module"
     },
     "plugins": [
-        "@typescript-eslint"
+        "@typescript-eslint",
+        "eslint-plugin-prettier"
     ],
     "extends": [
         "eslint:recommended",
         "plugin:react/recommended",
         "plugin:@typescript-eslint/eslint-recommended",
-        "plugin:@typescript-eslint/recommended"
+        "plugin:@typescript-eslint/recommended",
+        "prettier/react",
+        "prettier"
     ],
     "rules": {
+        "prettier/prettier": 2,
         "@typescript-eslint/no-explicit-any": 0,
         "@typescript-eslint/no-namespace": 0,
         "@typescript-eslint/consistent-type-assertions": 0,
         "@typescript-eslint/no-inferrable-types": 0,
         "@typescript-eslint/no-use-before-define": [2, "nofunc"],
-        "no-inner-declarations": 0,
         "@typescript-eslint/no-var-requires": 0,
+        "arrow-parens": [2, "as-needed"],
+        "no-inner-declarations": 0,
+        "no-empty": 2,
+        "no-multiple-empty-lines": [2, { "max": 1 }],
         "react/display-name": 0
     },
     "settings": {
@@ -37,4 +44,4 @@
             "**/*.js"
         ]
     }
-}
+}

src/webui/.stylelintrc.json

@@ -0,0 +1,11 @@
+{
+  "extends": "stylelint-config-standard",
+  "ignoreFiles": [
+    "build/**"
+  ],
+  "rules": {
+    "at-rule-empty-line-before": null,
+    "indentation": 4,
+    "no-descending-specificity": null
+  }
+}

src/webui/package.json

@@ -2,6 +2,7 @@
   "name": "nni-webui",
   "version": "0.1.0",
   "private": true,
+  "license": "MIT",
   "dependencies": {
     "axios": "^0.19.0",
     "babel-eslint": "10.0.1",
@@ -50,6 +51,8 @@
     "sass-loader": "7.1.0",
     "semver": "6.0.0",
     "style-loader": "0.23.1",
+    "stylelint": "^13.7.0",
+    "stylelint-config-standard": "^20.0.0",
     "terser-webpack-plugin": "1.2.3",
     "url-loader": "1.1.2",
     "webpack": "4.29.6",
@@ -72,15 +75,18 @@
     "@uifabric/fluent-theme": "^0.16.7",
     "concurrently": "^5.2.0",
     "eslint": "^5.16.0",
+    "eslint-config-prettier": "^6.1.0",
     "eslint-config-react-app": "^4.0.0",
     "eslint-loader": "2.1.2",
     "eslint-plugin-flowtype": "2.50.1",
     "eslint-plugin-import": "2.16.0",
     "eslint-plugin-jsx-a11y": "6.2.1",
+    "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react": "7.12.4",
     "eslint-plugin-react-hooks": "^1.5.0",
     "express": "^4.17.1",
     "npx": "^10.2.0",
+    "prettier": "^1.18.2",
     "typescript": "^3.8.0"
   },
   "proxy": "http://localhost:12138",
@@ -89,6 +95,7 @@
     "build": "node --max-old-space-size=3072 scripts/build.js",
     "test": "node --max-old-space-size=3072 scripts/test.js",
     "eslint": "npx eslint ./ --ext .tsx,.ts",
+    "stylelint": "npx stylelint **/*{.css,.scss}",
     "mock": "node scripts/server.js",
     "dev": "concurrently \"yarn mock\" \"yarn start\""
   },
@@ -106,4 +113,4 @@
   "resolutions": {
     "npm": ">=6.14.4"
   }
-}
+}

src/webui/prettier.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+    printWidth: 120,
+    semi: true,
+    tabWidth: 4,
+    trailingComma: 'none',
+    arrowParens: 'avoid',
+    bracketSpacing: true,
+    eslintIntegration: true,
+    singleQuote: true,
+    jsxSingleQuote: true,
+    endOfline: 'lf'
+};

src/webui/src/App.scss

@@ -1,63 +1,63 @@
-.nni{
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  color: #212121;
-  font-size: 14px;
-  background: #f2f2f2;
+.nni {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    color: #212121;
+    font-size: 14px;
+    background: #f2f2f2;
 }
 
-.header{
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 56px;
-  background: #0071BC;
-  border-right: 1px solid #ccc;
-  z-index: 1000;
+.header {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 56px;
+    background: #0071bc;
+    border-right: 1px solid #ccc;
+    z-index: 1000;
 }
 
-.headerCon{
-  width: 90%;
-  margin: 0 auto;
+.headerCon {
+    width: 90%;
+    margin: 0 auto;
 }
 
-.contentBox{
-  width: 100%;
+.contentBox {
+    width: 100%;
 }
 
-.content{
-  width: 89%;
-  min-width: 1024px;
-  margin: 0 auto;
-  margin-top: 74px;
-  margin-bottom: 30px;
+.content {
+    width: 89%;
+    min-width: 1024px;
+    margin: 0 auto;
+    margin-top: 74px;
+    margin-bottom: 30px;
 }
 
-.bottomDiv{
-  margin-bottom: 10px;
+.bottomDiv {
+    margin-bottom: 10px;
 }
 
-.bgNNI{
-  background-color: #fff;
+.bgNNI {
+    background-color: #fff;
 }
 
-.borderRight{
-  margin-right: 10px;
+.borderRight {
+    margin-right: 10px;
 }
 
 /* office-fabric-ui */
-.ms-Pivot-linkContent{
-  height: 44px;
+.ms-Pivot-linkContent {
+    height: 44px;
 }
 
-.ms-Callout-main{
-  p{
-    font-weight: 500;
-    color: #333;
-  }
+.ms-Callout-main {
+    p {
+        font-weight: 500;
+        color: #333;
+    }
 }
 
-.warning{
-  padding-bottom: 15px;
-  background-color: #f2f2f2;
+.warning {
+    padding-bottom: 15px;
+    background-color: #f2f2f2;
 }