feat: add eslint and prettier

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+

.eslintrc.js

@@ -1,17 +1,18 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
   },
-  'extends': [
+  parserOptions: {
+    parser: '@babel/eslint-parser',
+  },
+  extends: [
+    'eslint:recommended',
     'plugin:vue/essential',
-    'eslint:recommended'
+    'plugin:prettier/recommended',
   ],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
   },
-  parserOptions: {
-    parser: 'babel-eslint'
-  }
-}
+};

.github/workflows/_meta-build.yaml

@@ -14,13 +14,13 @@ on:
       app-version:
         type: string
         required: false
-        default: "snapshot"
-        description: "Set the version that should be set/used as tag for the container image"
+        default: 'snapshot'
+        description: 'Set the version that should be set/used as tag for the container image'
       publish-container:
         type: boolean
         required: false
         default: false
-        description: "Set if the container image gets publish and scan once its build"
+        description: 'Set if the container image gets publish and scan once its build'
     secrets:
       registry-0-usr:
         required: true

.github/workflows/ci-release.yaml

@@ -6,7 +6,7 @@ on:
       version-to-bump:
         type: choice
         required: true
-        description: "Select which part of the version to bump and release"
+        description: 'Select which part of the version to bump and release'
         options:
           - patch
           - minor
@@ -41,7 +41,7 @@ jobs:
       - name: Create GitHub Release
         env:
           GITHUB_TOKEN: ${{ secrets.BOT_RELEASE_TOKEN }}
-          GH_OPTS: ""
+          GH_OPTS: ''
         run: |-
           VERSION=`jq -r '.version' package.json`
 

.github/workflows/codeql-analysis.yaml

@@ -1,4 +1,4 @@
-name: "CodeQL"
+name: 'CodeQL'
 
 on:
   push:
@@ -25,34 +25,34 @@ jobs:
         # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
 
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v4.1.1
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v3
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
-
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v3
-
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
-
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
-
-    #- run: |
-    #   make bootstrap
-    #   make release
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v3
+      - name: Checkout repository
+        uses: actions/checkout@v4.1.1
+
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v3
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
+          # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v3
+
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 https://git.io/JvXDl
+
+      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+      #    and modify them (or add more) to build your code if your project
+      #    uses a compiled language
+
+      #- run: |
+      #   make bootstrap
+      #   make release
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v3

.github/workflows/lint.yaml

@@ -0,0 +1,34 @@
+name: Lint
+on:
+  pull_request:
+
+permissions:
+  contents: read
+
+env:
+  NODE_VERSION: 18
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4.1.1
+
+      - name: Set up NodeJs
+        uses: actions/setup-node@v4.0.2
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Lint Prettier
+        run: npm run prettier
+        continue-on-error: false
+
+      - name: Lint ESLint
+        run: npm run eslint
+        continue-on-error: true

.postcssrc.js

@@ -1,5 +1,5 @@
 module.exports = {
   plugins: {
-    autoprefixer: {}
-  }
-}
+    autoprefixer: {},
+  },
+};

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "semi": true,
+  "trailingComma": "all"
+}

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "editorconfig.editorconfig",
+    "github.vscode-github-actions"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  }
+}

CODE_OF_CONDUCT.md

@@ -8,19 +8,19 @@ In the interest of fostering an open and welcoming environment, we as contributo
 
 Examples of behavior that contributes to creating a positive environment include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a professional setting
+- The use of sexualized language or imagery and unwelcome sexual attention or advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a professional setting
 
 ## Our Responsibilities
 

README.md

@@ -1,19 +1,18 @@
 [![Build Status](https://github.com/DependencyTrack/frontend/actions/workflows/ci-build.yaml/badge.svg)](https://github.com/DependencyTrack/frontend/actions?workflow=Build+CI)
-[![Codacy Badge](https://app.codacy.com/project/badge/Grade/364443f9f30c4b70b56e5be76c9e079c)](https://www.codacy.com/gh/DependencyTrack/frontend/dashboard?utm_source=github.com&utm_medium=referral&utm_content=DependencyTrack/frontend&utm_campaign=Badge_Grade)
+[![Codacy Badge](https://app.codacy.com/project/badge/Grade/364443f9f30c4b70b56e5be76c9e079c)](https://www.codacy.com/gh/DependencyTrack/frontend/dashboard?utm_source=github.com&utm_medium=referral&utm_content=DependencyTrack/frontend&utm_campaign=Badge_Grade)
 [![License](https://img.shields.io/badge/license-Apache%202.0-brightgreen.svg)][License]
 [![Latest (including pre-releases)](https://img.shields.io/github/v/release/dependencytrack/frontend?include_prereleases)](https://github.com/DependencyTrack/frontend/releases)
 
-Dependency-Track Front-End
-=========
+# Dependency-Track Front-End
 
 The Front-End is a Single Page Application (SPA) used in Dependency-Track, an open source Component Analysis platform
 that allows organizations to identify and reduce risk in the software supply chain.
 
 The project is built with:
 
-* Vue.js
-* Bootstrap Vue
-* CoreUI
+- Vue.js
+- Bootstrap Vue
+- CoreUI
 
 <hr>
 
@@ -23,28 +22,29 @@ The project is built with:
 
 Always use the Front-End version that is compatible with the Dependency-Track API Server in use.
 
-| Dependency-Track API Server | Front-End |
-|:-----|:-----|
-| v4.2 | v4.2 |
-| v4.1 | v1.2 |
-| v4.0 | v1.1 |
-| v3.8 | v1.0 |
-| v1.0 - v3.7.1 | Not supported |
+| Dependency-Track API Server | Front-End     |
+| :-------------------------- | :------------ |
+| v4.2                        | v4.2          |
+| v4.1                        | v1.2          |
+| v4.0                        | v1.1          |
+| v3.8                        | v1.0          |
+| v1.0 - v3.7.1               | Not supported |
 
 Starting with Dependency-Track v4.2, the API Server and the Frontend now have the same major and minor (semantic) version. Patch versions however, may continue to be unique.
 
 ## Binary Distributions
 
 Pre-compiled distributions are available in two variants:
-* [Docker container running NGINX](https://hub.docker.com/r/dependencytrack/frontend)
-* [GitHub Release (zip archive)](https://github.com/DependencyTrack/frontend/releases)
+
+- [Docker container running NGINX](https://hub.docker.com/r/dependencytrack/frontend)
+- [GitHub Release (zip archive)](https://github.com/DependencyTrack/frontend/releases)
 
 The Docker container provides the fastest, most consistent deployment option and is recommended.
 The Docker container includes NGINX and a pre-deployed Front-End release.
 
 ## Build Setup
 
-``` bash
+```bash
 # Install dependencies
 npm install
 
@@ -85,8 +85,7 @@ This project supports internationalization. Currently, only English language is
 
 Note to developers: Textual labels are defined in `src/i18n/locales/{lang}.json`. Ensure that all labels are defined here and that components use i18n, not textual labels directly.
 
-Copyright & License
--------------------
+## Copyright & License
 
 Dependency-Track is Copyright (c) Steve Springett. All Rights Reserved.
 

RELEASING.md

@@ -7,28 +7,28 @@ This document describes the process of releasing a new version of the Dependency
 ### Release a new major of minor version
 
 1. Ensure the current state in `master` is ready to be released
-2. Head over to the *Actions* tab in GitHub
-3. Select the *Release CI* entry in the *Workflows* section
+2. Head over to the _Actions_ tab in GitHub
+3. Select the _Release CI_ entry in the _Workflows_ section
 4. The following UI element will have a button to trigger the workflow. Once clicked, the Use workflow from dialog will appear:
 
 ![Create a release from `master`](./.github/images/release-master.png)
 
 5. Ensure that `master` is selected in the branch dropdown
 6. For the part of the version to bump, select either `major` or `minor` (see [Semantic Versioning](https://semver.org/))
-7. Finally, once all inputs are checked press the *Run Workflow* button
+7. Finally, once all inputs are checked press the _Run Workflow_ button
 8. **Manually** create a release branch by selecting `master` in the branch dropdown and entering the branch name:
 
 ![Create a release branch](./.github/images/release-branch.png)
 
 ### Release a new bugfix version
 
 1. Ensure the current state in the release branch is ready to be released
-2. Head over to the *Actions* tab in GitHub
-3. Select the *Release CI* entry in the *Workflows* section
+2. Head over to the _Actions_ tab in GitHub
+3. Select the _Release CI_ entry in the _Workflows_ section
 4. The following UI element will have a button to trigger the workflow. Once clicked, the Use workflow from dialog will appear:
 
 ![Create a release from a release branch](./.github/images/release-releasebranch.png)
 
 5. Ensure that a release branch (e.g. `4.6.x`) is selected in the branch dropdown
 6. For the part of the version to bump, select `patch` (see [Semantic Versioning](https://semver.org/))
-7. Finally, once all inputs are checked press the *Run Workflow* button
+7. Finally, once all inputs are checked press the _Run Workflow_ button

babel.config.js

@@ -1,9 +1,12 @@
 module.exports = {
   presets: [
     ['@vue/babel-preset-jsx'],
-    ['@babel/preset-env', {
-      'useBuiltIns': 'entry',
-      'corejs': '3.33'
-    }]
-  ]
-}
+    [
+      '@babel/preset-env',
+      {
+        useBuiltIns: 'entry',
+        corejs: '3.33',
+      },
+    ],
+  ],
+};