VS Code Setup: Difference between revisions

From bibbleWiki
Jump to navigation Jump to search
Line 103: Line 103:
</syntaxhighlight>
</syntaxhighlight>
==pwa setup angular==
==pwa setup angular==
<syntaxhighlight lang="bash">
ng add @angular/pwa
</syntaxhighlight>
Add this to your index.html
<syntaxhighlight lang="html">
<meta name="Description" content="Put your description here.">
<link rel="apple-touch-icon" href="/assets/icons/icon-192x192.png"/>
</syntaxhighlight>
Add this to tsconfig.app.json
<syntaxhighlight lang="json">
<syntaxhighlight lang="json">
ng add @angular/pwa
"angularCompilerOptions": {
  "enableIvy": true
}
</syntaxhighlight>
</syntaxhighlight>
==tslint setup==
==tslint setup==
Just a current version for reference
Just a current version for reference

Revision as of 23:06, 18 October 2020

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,

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
}

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