VS Code Setup

Set up Java

Install Java JDK

sudo apt install default-jdk

Install Gradle

sudo add-apt-repository ppa:cwchien/gradle
sudo apt update
sudo apt install gradle

In Visual Studio install the Maven for Java and Gradle Tasks

Typescript

Install usual code but add the following to the setting for typescript. Search typescript in settings and change to json in settings.json. Dont forget to restart

"typescript.tsserver.experimental.enableProjectDiagnostics": true,

List of extensions

angular.ng-template-0.1001.0
dbaeumer.vscode-eslint-2.1.13
ecmel.vscode-html-css-0.2.3
eg2.vscode-npm-script-0.3.13
esbenp.prettier-vscode-5.7.1
gitlab.gitlab-workflow-3.6.0
golang.go-0.18.0
ivory-lab.jenkinsfile-support-1.1.0
janjoerke.jenkins-pipeline-linter-connector-1.2.0
johnpapa.angular2-9.1.2
johnpapa.angular-essentials-9.0.1
johnpapa.vscode-peacock-3.8.0
johnpapa.winteriscoming-1.4.3
maelvalais.autoconf-0.1.0
mikael.angular-beastcode-10.0.3
msjsdiag.debugger-for-chrome-4.12.11
msjsdiag.debugger-for-edge-1.0.15
ms-python.python-2020.10.332292344
ms-python.python-2020.9.114305
ms-vscode.cpptools-1.0.1
ms-vscode.vscode-typescript-tslint-plugin-1.2.3
nicolasvuillamy.vscode-groovy-lint-1.2.9
nrwl.angular-console-14.0.1
pkief.material-icon-theme-4.3.0
pranaygp.vscode-css-peek-4.0.0
richardwillis.vscode-gradle-3.5.2
vscjava.vscode-maven-0.25.0
xaver.clang-format-1.9.0
zignd.html-css-class-completion-1.19.0

Set up GO

Install the GO extension and tools
For Gitlab create directory

mkdir -p ${GOROOT}/src/gitlab.com/<username>

Make a config, the default with program changed to ${workspaceRoot}

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "go",
            "request": "launch",
            "mode": "auto",
            "remotePath": "",
            "port":2345,
            "host": "127.0.0.1",
            "program": "${workspaceRoot}",
            "env": {},
            "args": [],
            "showLog": true
        }
    ]
}

Set up Prettier

Install

sudo npm -g i prettier

Change vscode settings

{
    "prettier.semi": false
}

Change .vsocde/settings.json

{
    "prettier.semi": false
}

Change package settings in package.json. I think this is because it is broken

  "prettier": {
    "singleQuote": true,
    "semi": false
  }

Change package.json to run prettier

  "scripts": {
...
    "format": "prettier --write '**/*.{ts,js,css,html}'"
  },

Set up .prettierignore to ignore directories

build
coverage
dist

Other things

Web Server Setup

Install lws web server which is a better option than the default

sudo npm  i -g local-web-server

To get the famous green tick

cd /usr/local/lib/node_modules/local-web-server/node_modules/lws/ssl
sudo mv private-key.pem private-key.pem.old
sudo mv lws-cert.pem lws-cert.pem.old
sudo ln -s <your cert>/server.key private-key.pem
sudo ln -s <your cert>/server.crt lws-cert.pem

pwa setup angular

ng add @angular/pwa

Add this to your index.html

<meta name="Description" content="Put your description here.">
<link rel="apple-touch-icon" href="/assets/icons/icon-192x192.png"/>

Add this to tsconfig.app.json

"angularCompilerOptions": {
  "enableIvy": true
}

eslint setup

Install Packages

I set mine up using tslint which is being phased out. I did this using the migration tool. First install the packages

npm install @angular-eslint/eslint-plugin @angular-eslint/eslint-plugin-template @typescript-eslint/eslint-plugin @typescript-eslint/eslint-plugin-tslint @typescript-eslint/parser eslint-plugin-import eslint-plugin-jsdoc eslint-plugin-prefer-arrow eslint-plugin-react eslint-plugin-jest --save-dev

Run Conversion Tool

Install and run the conversion tools

npm i tslint-to-eslint-config --save-dev
npx  tslint-to-eslint-config
npx  tslint-to-eslint-config --prettier

Fix So it Runs

This needs to be addressed

        // "@angular-eslint/template/banana-in-box": "error",
        // "@angular-eslint/template/no-negated-async": "error",

Fix the Outfall

For Jest I had lots of problems until I removed .eslintrc.js and repeated the steps with the jest plugin in the list of npms to install
Now the rest of the issues
In .eslintrc.js Fix the rule to have unused underscore variables

"@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],

Fix Promise's by adding void if we do not care about the result

// Changed from
this.router.navigateByUrl('home')
// To
void this.router.navigateByUrl('home')

Fix the Enums

Change the .eslintrc

    "no-shadow": "off",
    "@typescript-eslint/no-shadow": ["error"],
    // 'no-shadow': [
    //   'error',
    //   {
    //     hoist: 'all',
    //   },
    // ],

Fix the Http Header

You can have a | delimited list in the regex

    '@typescript-eslint/naming-convention': [
      "error",
      {
        "selector": "property",
        "format": ["strictCamelCase"],
        "filter": {
          // you can expand this regex as you find more cases that require quoting that you want to allow
          "regex": "[^(Content-type)$]",
          "match": false
        }
      }
    ],

tslint setup

Just a current version for reference

{
  "extends": "tslint:recommended",
  "rulesDirectory": [
    "codelyzer"
  ],
  "rules": {
    "align": {
      "options": [
        "parameters",
        "statements"
      ]
    },
    "array-type": false,
    "arrow-return-shorthand": true,
    "curly": true,
    "deprecation": {
      "severity": "warning"
    },
    "eofline": true,
    "import-blacklist": [
      true,
      "rxjs/Rx"
    ],
    "import-spacing": true,
    "indent": {
      "options": [
        "spaces"
      ]
    },
    "max-classes-per-file": false,
    "max-line-length": [
      true,
      140
    ],
    "member-ordering": [
      true,
      {
        "order": [
          "static-field",
          "instance-field",
          "static-method",
          "instance-method"
        ]
      }
    ],
    "no-console": [
      true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-empty": false,
    "no-inferrable-types": [
      true,
      "ignore-params"
    ],
    "no-non-null-assertion": true,
    "no-redundant-jsdoc": true,
    "no-switch-case-fall-through": true,
    "no-var-requires": false,
    "object-literal-key-quotes": [
      true,
      "as-needed"
    ],
    "quotemark": [
      true,
      "single"
    ],
    "semicolon": {
      "options": [
        "never"
      ]
    },
    "space-before-function-paren": {
      "options": {
        "anonymous": "never",
        "asyncArrow": "always",
        "constructor": "never",
        "method": "never",
        "named": "never"
      }
    },
    "typedef": [
      true,
      "call-signature"
    ],
    "typedef-whitespace": {
      "options": [
        {
          "call-signature": "nospace",
          "index-signature": "nospace",
          "parameter": "nospace",
          "property-declaration": "nospace",
          "variable-declaration": "nospace"
        },
        {
          "call-signature": "onespace",
          "index-signature": "onespace",
          "parameter": "onespace",
          "property-declaration": "onespace",
          "variable-declaration": "onespace"
        }
      ]
    },
    "variable-name": {
      "options": [
        "ban-keywords",
        "check-format",
        "allow-pascal-case"
      ]
    },
    "whitespace": {
      "options": [
        "check-branch",
        "check-decl",
        "check-operator",
        "check-separator",
        "check-type",
        "check-typecast"
      ]
    },
    "component-class-suffix": true,
    "contextual-lifecycle": true,
    "directive-class-suffix": true,
    "no-conflicting-lifecycle": true,
    "no-host-metadata-property": true,
    "no-input-rename": true,
    "no-inputs-metadata-property": true,
    "no-output-native": true,
    "no-output-on-prefix": true,
    "no-output-rename": true,
    "no-outputs-metadata-property": true,
    "template-banana-in-box": true,
    "template-no-negated-async": true,
    "use-lifecycle-interface": true,
    "use-pipe-transform-interface": true,
    "directive-selector": [
      true,
      "attribute",
      "app",
      "camelCase"
    ],
    "component-selector": [
      true,
      "element",
      "app",
      "kebab-case"
    ]
  }
}