VS Code Setup
Jump to navigation
Jump to search
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
distOther 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.2Rebuild
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"]
}
]
}