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

Gave up

I gave up in the end and removed

npm r @typescript-eslint/eslint-plugin @typescript-eslint/eslint-plugin-tslint @typescript-eslint/parser codelyzer eslint eslint-config-prettier eslint-plugin-import eslint-plugin-jest eslint-plugin-jsdoc eslint-plugin-prefer-arrow eslint-plugin-prettier eslint-plugin-react
<br>
npm r @angular-eslint/builder @angular-eslint/eslint-plugin @angular-eslint/eslint-plugin-template @angular-eslint/schematics @angular-eslint/template-parser
<br>
npm r tslint
<br>

Then install

npm i eslint eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser
npm i @angular-eslint/builder @angular-eslint/eslint-plugin @angular-eslint/eslint-plugin-template @angular-eslint/schematics @angular-eslint/template-parser

Create a tslincrc.json

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'prettier'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  rules: {
    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
  },
}

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
        }
      }
    ],

ES Lint 2023

packages.json

{
  "name": "testvite",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/jest": "^29.5.5",
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-import-resolver-typescript": "^3.6.0",
    "eslint-plugin-ban": "^1.6.0",
    "eslint-plugin-css-import-order": "^1.1.0",
    "eslint-plugin-etc": "^2.0.3",
    "eslint-plugin-import": "^2.28.0",
    "eslint-plugin-jest": "^27.2.3",
    "eslint-plugin-jest-dom": "^5.0.2",
    "eslint-plugin-jsdoc": "^46.8.1",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-react": "^7.33.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-redux": "^4.0.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "eslint-plugin-unicorn": "^48.0.1",
    "eslint-plugin-unused-imports": "^3.0.0",
    "jest": "^29.7.0",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}

.eslintrc.cjs

module.exports = {
  root: true,
  env: { browser: true, es2021: true, jest: true },
   
  globals: {
    globalThis: false
  },

  extends: [
    // "react-app",
    // "react-app/jest",

    "eslint:recommended",
    "plugin:jsdoc/recommended",
    "plugin:react/recommended",
    "plugin:react-redux/recommended",
    "plugin:@typescript-eslint/eslint-recommended",

    // "plugin:@cspell/recommended",

    "plugin:@typescript-eslint/recommended",
    // "plugin:@typescript-eslint/recommended-type-checked",
    "plugin:@typescript-eslint/stylistic",
    // "plugin:@typescript-eslint/stylistic-type-checked",

    "plugin:import/recommended",
    "plugin:import/typescript",
    "plugin:jest/recommended",

    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "plugin:css-import-order/recommended",
    
    "plugin:jest-dom/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:react/jsx-runtime",

    "prettier"
  ],

  ignorePatterns: ["dist", ".eslintrc.cjs"],

  // ----------------------------------------
  // Parser
  parser: "@typescript-eslint/parser",

  parserOptions: {
    ecmaVersion: "latest",
    ecmaFeatures: {
      jsx: true
    },
    sourceType: "module",
    project: [
      "./tsconfig.eslint.json"
    ]
  },

  // ----------------------------------------
  // Plugins
  plugins: [
    "react-refresh",
    "ban",
    "jsdoc",
    "react",
    "react-hooks",
    "react-redux",
    "etc",
    "jest",
    "jest-dom",
    "jsx-a11y",
    "unused-imports",
    "css-import-order",
    "import"
  ],
  
  // ----------------------------------------
  // Settings
  settings: {

    "import/parsers": {
      "@typescript-eslint/parser": [".ts", "*.tsx"]
    },
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true,
        "project": [
          "./tsconfig.json"
        ]
      }
    },    
    "react": {
      "version": "detect"
    },
    "jsdoc": {
      "mode": "typescript"
    }
  },

  reportUnusedDisableDirectives: true,

  // ----------------------------------------
  // Rules
  rules: {
    "react-refresh/only-export-components": [
      "warn",
      { allowConstantExport: true },
    ],
    "jest/no-commented-out-tests": "off",
    "react/jsx-uses-react": "error",
    "ban/ban": [
      "error",
      {
        "name": ["*", "forEach"],
        "message": "Use a for-of loop instead"
      },
      {
        "name": ["describe", "only"],
        "message": "Don't forget to remove .only before committing"
      },
      {
        "name": ["it", "only"],
        "message": "Don't forget to remove .only before committing"
      },
      {
        "name": ["test", "only"],
        "message": "Don't forget to remove .only before committing"
      }
    ],
    "no-restricted-imports": [
      "error",
      {
        "paths": [
          {
            "name": "lodash",
            "importNames": ["isArray"],
            "message": "Use Array.isArray instead."
          }
        ]
      }
    ],
    "callback-return": "error",
    "complexity": "off",
    "constructor-super": "error",
    "dot-notation": "error",
    "eqeqeq": "error",
    "eol-last": "error",
    "guard-for-in": "error",
    "linebreak-style": "off",
    "max-classes-per-file": "off",
    "new-parens": "error",
    "newline-per-chained-call": "off",
    "no-bitwise": "off",
    "no-caller": "error",
    "no-cond-assign": "error",
    "no-console": "off",
    "no-constant-condition": [
      "error",
      {
        "checkLoops": false
      }
    ],
    "no-debugger": "error",
    "no-duplicate-imports": "error",
    "no-empty": "error",
    "no-else-return": [
      "error",
      {
        "allowElseIf": false
      }
    ],
    "no-eval": "error",
    "no-extra-bind": "error",
    "no-extra-semi": "off",
    "no-fallthrough": "off",
    "no-floating-decimal": "error",
    "no-inner-declarations": "off",
    "no-invalid-this": "off",
    "no-irregular-whitespace": "error",
    "no-lonely-if": "error",
    "no-magic-numbers": "off",
    "no-multiple-empty-lines": [
      "error",
      {
        "max": 1
      }
    ],
    "no-new-wrappers": "error",
    "no-redeclare": "off",
    "no-sparse-arrays": "error",
    "no-sync": [
      "error",
      {
        "allowAtRootLevel": true
      }
    ],
    "no-template-curly-in-string": "error",
    "no-throw-literal": "error",
    "no-undef-init": "error",
    "no-unneeded-ternary": [
      "error",
      {
        "defaultAssignment": false
      }
    ],
    "no-unsafe-finally": "error",
    "no-unused-expressions": "error",
    "no-unused-labels": "error",
    "no-useless-call": "error",
    "no-useless-concat": "error",
    "no-useless-constructor": "off",
    "no-var": "error",
    "no-void": "error",
    "object-shorthand": "error",
    "one-var": ["error", "never"],
    "prefer-arrow-callback": [
      "error",
      {
        "allowNamedFunctions": true
      }
    ],
    "prefer-const": [
      "error",
      {
        "destructuring": "all"
      }
    ],
    "prefer-object-spread": "error",
    "prefer-promise-reject-errors": "error",
    "prefer-rest-params": "error",
    "prefer-spread": "error",
    "prefer-template": "off",
    "radix": "error",
    "spaced-comment": [
      "error",
      "always",
      {
        "line": {
          "markers": ["/"]
        }
      }
    ],
    "sort-imports": "off",
    "use-isnan": "error",
    "valid-typeof": "off",
    "yoda": "error",
    "import/extensions": ["error", "never"],
    "import/no-deprecated": "warn",
    "import/no-unused-modules": "error",
    "import/no-cycle": "off",
    "import/no-self-import": "error",
    "import/no-dynamic-require": "error",
    "import/no-useless-path-segments": "error",
    "import/no-duplicates": "error",
    "import/no-default-export": "error",
    "import/order": [
      "error",
      {
        "newlines-between": "always",
        "groups": ["internal", "unknown", "external", "builtin", ["parent", "sibling", "index"]],
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        },
        "pathGroups": [
          {
            "pattern": "react",
            "group": "external",
            "position": "before"
          },
          {
            "pattern": "@sourcegraph/**",
            "group": "external",
            "position": "after"
          },
          {
            "pattern": "*.scss",
            "group": "index",
            "patternOptions": {
              "matchBase": true
            },
            "position": "after"
          }
        ],
        "pathGroupsExcludedImportTypes": []
      }
    ],
    "jsdoc/require-returns": "off",
    "jsdoc/require-jsdoc": "off",
    "jsdoc/require-param": "off",
    "jsdoc/no-bad-blocks": "error",
    "jsdoc/check-indentation": "off",
    "jsdoc/check-tag-names": [
      "error",
      {
        "definedTags": ["hidden", "internal"]
      }
    ],
    "react-hooks/exhaustive-deps": "error",
    "react-hooks/rules-of-hooks": "error",
    "react/button-has-type": "error",
    "react/display-name": "warn",
    "react/forbid-dom-props": [
      "error",
      {
        "forbid": ["style"]
      }
    ],
    "react/jsx-boolean-value": ["error", "always"],
    "react/jsx-curly-brace-presence": "error",
    "react/jsx-fragments": ["error", "syntax"],
    "react/jsx-key": "error",
    "react/jsx-no-bind": "off",
    "react/jsx-no-comment-textnodes": "error",
    "react/jsx-no-target-blank": "error",
    "react/no-access-state-in-setstate": "error",
    "react/no-array-index-key": "warn",
    "react/no-deprecated": "warn",
    "react/no-did-mount-set-state": "error",
    "react/no-did-update-set-state": "error",
    "react/no-direct-mutation-state": "error",
    "react/no-find-dom-node": "error",
    "react/no-is-mounted": "error",
    "react/no-multi-comp": [
      "off",
      {
        "ignoreStateless": true
      }
    ],
    "react/no-redundant-should-component-update": "error",
    "react/no-string-refs": "error",
    "react/no-this-in-sfc": "error",
    "react/no-typos": "error",
    "react/no-unescaped-entities": [
      "error",
      {
        "forbid": [">", "}"]
      }
    ],
    "react/no-unsafe": [
      "error",
      {
        "checkAliases": true
      }
    ],
    "react/no-unused-state": "error",
    "react/prefer-stateless-function": [
      "error",
      {
        "ignorePureComponents": true
      }
    ],
    "react/require-render-return": "error",
    "react/self-closing-comp": "error",
    "react/void-dom-elements-no-children": "error",
    "react/prop-types": "off",
    "etc/throw-error": "error",
    "etc/no-deprecated": "warn",
    "@typescript-eslint/no-var-requires": "off",
    "@typescript-eslint/prefer-regexp-exec": "off",
    "@typescript-eslint/no-unsafe-call": "warn",
    "@typescript-eslint/no-unsafe-member-access": "warn",
    "@typescript-eslint/no-unsafe-return": "off",
    "@typescript-eslint/no-unsafe-assignment": "warn",
    "id-length": [
      "error",
      {
        "min": 3,
        "properties": "never",
        "exceptions": ["to", "as", "id", "it", "fs", "os", "H", "a", "b"]
      }
    ],
    "unused-imports/no-unused-vars": "off",
    "no-unsafe-optional-chaining": "off",
    "@typescript-eslint/no-unsafe-argument": "off",
    "@typescript-eslint/no-unnecessary-type-constraint": "off"
  },

  // ----------------------------------------
  // Overrides
  overrides: [
    {
      "files": ["*.ts", "*.tsx"],
      "parser": "@typescript-eslint/parser",
      "plugins": ["@typescript-eslint"],
      "rules": {
        "@typescript-eslint/adjacent-overload-signatures": "error",
        "@typescript-eslint/array-type": "error",
        "@typescript-eslint/await-thenable": "error",
        "@typescript-eslint/ban-types": [
          "error",
          {
            "extendDefaults": true,
            "types": {
              "object": false,
              "{}": false
            }
          }
        ],
        "@typescript-eslint/naming-convention": [
          "off",
          {
            "selector": "default",
            "format": null
          },
          {
            "selector": "typeLike",
            "format": ["PascalCase"],
            "leadingUnderscore": "allow",
            "trailingUnderscore": "allow"
          }
        ],
        "@typescript-eslint/explicit-function-return-type": [
          "error",
          {
            "allowExpressions": true,
            "allowTypedFunctionExpressions": true,
            "allowHigherOrderFunctions": true
          }
        ],
        "@typescript-eslint/indent": "off",
        "@typescript-eslint/interface-name-prefix": "off",
        "@typescript-eslint/member-delimiter-style": "off",
        "@typescript-eslint/member-ordering": "off",
        "@typescript-eslint/no-empty-interface": "off",
        "@typescript-eslint/no-empty-function": [
          "error",
          {
            "allow": ["arrowFunctions"]
          }
        ],
        "@typescript-eslint/no-explicit-any": "warn",
        "@typescript-eslint/no-for-in-array": "error",
        "@typescript-eslint/no-floating-promises": "error",
        "@typescript-eslint/no-inferrable-types": [
          "error",
          {
            "ignoreParameters": true
          }
        ],
        "@typescript-eslint/no-misused-new": "error",
        "@typescript-eslint/no-misused-promises": "warn",
        "@typescript-eslint/no-non-null-assertion": "warn",
        "@typescript-eslint/no-unnecessary-condition": "off",
        "@typescript-eslint/consistent-type-assertions": [
          "warn",
          {
            "assertionStyle": "as",
            "objectLiteralTypeAssertions": "never"
          }
        ],
        "@typescript-eslint/consistent-type-definitions": ["error", "interface"],
        "@typescript-eslint/no-base-to-string": "error",
        "@typescript-eslint/no-parameter-properties": "off",
        "@typescript-eslint/no-require-imports": "error",
        "@typescript-eslint/no-unnecessary-qualifier": "error",
        "@typescript-eslint/no-unnecessary-type-assertion": "warn",
        "@typescript-eslint/no-unsafe-call": "warn",
        "@typescript-eslint/no-unsafe-member-access": "warn",
        "@typescript-eslint/no-unsafe-return": "off",
        "@typescript-eslint/no-unsafe-assignment": "warn",
        "@typescript-eslint/no-unused-vars": [
          "warn",
          {
            "varsIgnorePattern": ".*",
            "args": "after-used",
            "ignoreRestSiblings": true
          }
        ],
        "@typescript-eslint/no-use-before-define": "off",
        "@typescript-eslint/no-useless-constructor": "error",
        "@typescript-eslint/no-var-requires": "error",
        "@typescript-eslint/prefer-as-const": "error",
        "@typescript-eslint/prefer-string-starts-ends-with": "error",
        "@typescript-eslint/prefer-function-type": "error",
        "@typescript-eslint/prefer-includes": "error",
        "@typescript-eslint/prefer-namespace-keyword": "error",
        "@typescript-eslint/prefer-optional-chain": "error",
        "@typescript-eslint/prefer-nullish-coalescing": "off",
        "@typescript-eslint/type-annotation-spacing": "off",
        "@typescript-eslint/triple-slash-reference": "error",
        "@typescript-eslint/restrict-template-expressions": "off",
        "@typescript-eslint/return-await": "error",
        "@typescript-eslint/unbound-method": "error",
        "@typescript-eslint/unified-signatures": "error",
        "jsdoc/no-types": "error",
        "jsdoc/no-undefined-types": "off",
        "jsdoc/require-param-type": "off",
        "jsdoc/require-returns-type": "off",
        "jsdoc/valid-types": "off",
        "import/no-unresolved": "off",
        "import/default": "off",
        "import/named": "off",
        "import/namespace": "off",
        "import/no-deprecated": "off",
        "react/no-direct-mutation-state": "off",
        "react/jsx-no-undef": "off",
        "jsx-a11y/no-onchange": "off",
        "jsx-a11y/no-autofocus": "off",
        "jsx-a11y/accessible-emoji": "off",
        "no-undef": "off",
        "no-dupe-class-members": "off",
        "require-await": "off"
      }
    },
    {
      "files": "*.d.ts",
      "rules": {
        "no-var": "off",
        "@typescript-eslint/explicit-member-accessibility": "off",
        "id-length": "off",
        "import/no-default-export": "off"
      }
    },
    {
      "files": "*.@(test|story).ts?(x)",
      "rules": {
        "react/jsx-no-bind": "off",
        "@typescript-eslint/explicit-function-return-type": "off",
        "react/button-has-type": "off"
      }
    },
    {
      "files": "*.test.tsx",
      "rules": {
        "@typescript-eslint/no-floating-promises": "off",
        "unicorn/prefer-flat-map": "off"
      }
    }
  ]
};

Set up Dev Container

So just git cloned https://github.com/microsoft/vscode-remote-try-python

Flask

For flask

• Made a directory
• Copied contents of vscode-remote-try-python
• Add the requirements.txt project directory
• Start vs code and it prompts to open the docker workspace

Flask==2.0.1
werkzeug==2.0.1
gunicorn==20.1.0

psycopg2==2.8.6
SQLAlchemy==1.4.15
SQLAlchemy-Utils==0.37.3
Flask-SQLAlchemy==2.5.1
alembic==1.6.3

redis==3.5.3
celery==5.0.5

pytest==6.2.4
pytest-cov==2.11.1
flake8==3.9.2
black==21.5b1

flask-debugtoolbar==0.11.0
Flask-Static-Digest==0.2.1
Flask-Secrets==0.1.0

pipreqs==0.4.10
Flask-Migrate==3.0.0
Flask-WTF==0.14.3
Flask-Script==2.0.6
Flask-Login==0.5.0
email-validator==1.1.2

Rebuild

Open the command pallete, search for and select Remote-Containers: Rebuild Container

Access to Localhost

To ensure you can access ports on the localhost you need to add.

{
	"name": "Python 3",

	"runArgs": [
        "--net", "host", 
	],
	"build": {
		"dockerfile": "Dockerfile",
		"context": ".",
		"args": {

Top Tips

Bindings

• Ctrl + K - shows key bindings
• Ctrl + P - command pallet
• Ctrl + ` - command terminal
• Ctrl + Space - intellisence
• Ctrl + Shift [ Expand
• Ctrl + Shift ] Collapse
• F8 - Errors in file
• File - Start typing filename
• Shift + Alt + F - formatting

Extensions

• Paste Json as code
• Rename for renaming start and end tag
• Template String convertor

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"
    ]
  }
}

C++ Setup

This is an example of setting up C++. I use CMake because the c_cpp_properties.json is just for the code editor.

Exmaple C++ code

#include <iostream>
#include <Magick++.h>

int main()
{
    std::cout << MagickCore::GetMagickVersion(NULL) << std::endl;
    return 0;
}

Here is the c_cpp_properties.json noting that compilerPath is commented out. Not doing this will result in gcc swiggles suggesting includes missing for Magick++.h

{
    "configurations": [
        {
            "name": "Linux",
            "includePath": [
                "${workspaceFolder}/**"
            ],
            "defines": [],
            // "compilerPath": "/usr/bin/gcc",
            "cStandard": "c17",
            "cppStandard": "gnu++17",
            "intelliSenseMode": "linux-gcc-x64",
            "configurationProvider": "ms-vscode.cmake-tools"
        }
    ],
    "version": 4
}

And here is the cmake showing how to include a third-party file

cmake_minimum_required(VERSION 3.0.0)
project(testcpp VERSION 0.1.0)

include(CTest)
enable_testing()

add_definitions(-DMAGICKCORE_HDRI_ENABLE=0)
add_definitions(-DMAGICKCORE_QUANTUM_DEPTH=16)

add_executable(testcpp main.cpp)
include_directories(/usr/include/x86_64-linux-gnu/ImageMagick-6 /usr/include/ImageMagick-6)

target_include_directories(${PROJECT_NAME} PUBLIC "/usr/lib/x86_64-linux-gnu/")
target_link_libraries(${PROJECT_NAME} "MagickCore-6.Q16")

Probably a better way for a know library is use find_package but it is far more likely you are looking to know what is the equivalent of -L and -l in cmake

cmake_minimum_required(VERSION 3.0.0)
project(testcpp VERSION 0.1.0)

include(CTest)
enable_testing()

add_definitions(-DMAGICKCORE_HDRI_ENABLE=0)
add_definitions(-DMAGICKCORE_QUANTUM_DEPTH=16)

add_executable(testcpp main.cpp)
include_directories(/usr/include/x86_64-linux-gnu/ImageMagick-6 /usr/include/ImageMagick-6)

find_package(ImageMagick COMPONENTS Magick++)
target_link_libraries(${PROJECT_NAME} PRIVATE "MagickCore-6.Q16")

Debugging NODE_API_MODULE

Below is how to debug a C++ binary inside of VS Code.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "lldb",
            "request": "launch",
            "name": "Debug",
            "preLaunchTask": "npm: build:dev",
            "program": "/usr/bin/node",
            "args": ["/home/iwiseman/dev/projects/nodeapi/basic-node-addon/index.js"]
        }
    ]
}