Add settings and info for developing UI in IntelliJ (inspectIT#1496)

* Activate formatter tags by default

* Add indentation settings for JS

* Add to CONTRIBUTING regarding JavaScript linting

* Fix eol linting of .js files on Windows

* Add yarn lint and format:write to README

* Add section in CONTRIBUTING.md

* Add to CONTRIBUTING based on comments

* Fix linting command in README

Co-authored-by: Heiko Holz <heiko.holz@novatec-gmbh.de>

CONTRIBUTING.md

@@ -13,6 +13,12 @@ When using the Save Actions Plugin, you have to copy the *saveactions_settings.x
 
 Furthermore, please import the `/codequality/idea/code_style.xml` file into the project's settings of IntelliJ in order to match the code style we're using.
 
+### Frontend Developing
+
+If developing JavaScript in IntelliJ Ultimate, check that Settings.Languages & Frameworks.JavaScript.Code Quality Tools.ESLint is activated for correct linting.
+
+In the same location, check the checkbox for running `eslint --fix on save`.
+
 ## Process
 
 The first step in order to contribute is to fork this repository into your account.

codequality/idea/code_style.xml

@@ -1,5 +1,6 @@
 <code_scheme name="Ocelot" version="173">
   <option name="LINE_SEPARATOR" value="&#xA;" />
+  <option name="FORMATTER_TAGS_ENABLED" value="true" />
   <JavaCodeStyleSettings>
     <option name="JD_ADD_BLANK_AFTER_PARM_COMMENTS" value="true" />
     <option name="JD_ADD_BLANK_AFTER_RETURN" value="true" />
@@ -25,4 +26,11 @@
     <option name="FOR_BRACE_FORCE" value="3" />
     <option name="WRAP_ON_TYPING" value="0" />
   </codeStyleSettings>
-</code_scheme>
+  <codeStyleSettings language="JavaScript">
+    <indentOptions>
+      <option name="INDENT_SIZE" value="2" />
+      <option name="CONTINUATION_INDENT_SIZE" value="2" />
+      <option name="TAB_SIZE" value="2" />
+    </indentOptions>
+  </codeStyleSettings>
+</code_scheme>

components/inspectit-ocelot-configurationserver-ui/.eslintrc

@@ -41,6 +41,7 @@
         "no-multi-spaces": "error",
         "import/first": "error",
         "import/no-useless-path-segments": "error",
-        "react/prop-types": "warn"
+        "react/prop-types": "warn",
+        "prettier/prettier": ["error", { "endOfLine": "auto" }]
     }
-}
+}

components/inspectit-ocelot-configurationserver-ui/README.md

@@ -20,6 +20,19 @@ yarn dev
 
 The development server can be reached at [http://localhost:3000](http://localhost:3000).
 
+### Linting
+
+Depending on your IDE, linting errors based on the settings in .eslintrc can be shown right in your editor.
+However, if that is not the case with your IDE you can use the following command to check for linting errors.
+```bash
+yarn lint
+```
+
+And the following to fix them automatically.
+```bash
+yarn lint:fix
+```
+
 #### Storybook
 
 The project also contains [Storybook](https://storybook.js.org/) which supports the development of components by providing an isolated sandbox UI for testing these components.
@@ -37,4 +50,4 @@ The frontend can be built and exported using the following command - the `build`
 yarn export
 ```
 
-The exported page will be located in the `out` directory.
+The exported page will be located in the `out` directory.