visual studio code

Finally something useful from Microsoft ;)

extension

With the various extensions i found it start getting workable now. But for every extension there are 10 choices, so here is a way to export the correct ones.

This will list all extensions, not just the enabled ones.

code --list-extensions | xargs -L 1 echo code --install-extension

The first part is the normal vscode output, the second part creates install code for then. This exports it in commandline format, i included my current list, these are actually all the installed extensions, much of them are installed on vscode 'suggestions'. If you want to exclude the disabled ones, uninstall them !

code --install-extension Angular.ng-template
code --install-extension cyrilletuzi.angular-schematics
code --install-extension Dart-Code.dart-code
code --install-extension Dart-Code.flutter
code --install-extension davidbabel.vscode-simpler-icons
code --install-extension doggy8088.angular-extension-pack
code --install-extension donjayamanne.githistory
code --install-extension EditorConfig.EditorConfig
code --install-extension eg2.vscode-npm-script
code --install-extension esbenp.prettier-vscode
code --install-extension formulahendry.auto-rename-tag
code --install-extension howardzuo.vscode-favorites
code --install-extension infinity1207.angular2-switcher
code --install-extension joelday.docthis
code --install-extension johnpapa.angular-essentials
code --install-extension johnpapa.Angular2
code --install-extension johnpapa.vscode-peacock
code --install-extension johnpapa.winteriscoming
code --install-extension jtanx.ctagsx
code --install-extension kdcro101.favorites
code --install-extension krizzdewizz.refactorix
code --install-extension MariusAlchimavicius.json-to-ts
code --install-extension Mikael.Angular-BeastCode
code --install-extension ms-vscode.typescript-javascript-grammar
code --install-extension ms-vscode.vscode-typescript-tslint-plugin
code --install-extension msjsdiag.debugger-for-chrome
code --install-extension natewallace.angular2-inline
code --install-extension nrwl.angular-console
code --install-extension PKief.material-icon-theme
code --install-extension quicktype.quicktype
code --install-extension stringham.move-ts
code --install-extension vscodevim.vim
code --install-extension wayou.vscode-todo-highlight
code --install-extension xabikos.JavaScriptSnippets

tslint

When using tslint you will get a standard error on the very first character of each typescript file, saying :

Not using the local TSLint version found for '/home/kees/projects/klopt/planner/src/app/detailset/detailset.component.spec.ts'
To enable code execution from the current workspace you must 

Warning

All this just does not work, we get a fatal error when running eslint so i reverted back to tslint, which works.

You can try the rest of this chapter to see if it works, or try to fix it.

This is because tslint is considered unsafe since it can be installed globally. See : https://code.visualstudio.com/api/advanced-topics/tslint-eslint-migration

In short this means :

cd <yourproject>
npm install -g --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
npm install eslint-plugin-import@latest --save-dev
npm install tslint@5.18
npx tslint-to-eslint-config
// Post install a new .eslintrc.js will be created. There will be changes to .vscode/settings.json as well.)
// in VScode : extensions -> uninstall tslint

This is what the visual code page says, but that is by far not enough. First run this command :

eslint -c .eslintrc.js --ext .ts ./src

This will put out all the files missing, but also gives you the command to run so repeat until that command works.

Now open up package.json and replace the "ng lint" command with :

"lint": "eslint -c .eslintrc.js --ext .ts ./src"

Now I also got a new error that eslint was not enabled, but a quickfix is available so just do it for all files. After that i was back at the tslint error again, but a restart of vscode fixed that.