visual studio code - dotnetday.ch · electron build cross platform desktop apps with web...

29
Visual Studio Code Ein Open Source Code Editor in TypeScript und HTML 5 Dirk Bäumer (@dbktw)

Upload: others

Post on 30-May-2020

10 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and

Visual Studio CodeEin Open Source Code Editor in TypeScript und HTML 5

Dirk Bäumer (@dbktw)

Page 2: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and

Visual Studio Code

A desktop tool that combines the simplicity of a code editor with what developers need for the core code-build-debug-commit cycle

Page 3: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and
Page 4: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and

Microsoft Edge

Page 5: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and
Page 6: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and
Page 7: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and
Page 8: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and
Page 9: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and
Page 10: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and
Page 11: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and
Page 12: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and

https://www.destroyallsoftware.com/talks/wat

Page 13: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and

Programming JavaScript is like carving code in stone. Refactoring it is difficult. JavaScript code rots over time.

Comprehending JavaScript code is difficult as well (hard to browse and navigate)

Large code bases need to come up with compensating patterns for classes (es6), modules (amd or commonjs) and namespaces.

Describing APIs means keeping documentation synchronized with the implementation.

Page 14: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and
Page 15: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and
Page 16: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and

See also: https://github.com/lukehoban/es6features

Page 17: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and
Page 18: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and
Page 19: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and
Page 20: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and

Our dependency graph was such a mess that each area had a dependency on just about every other area

Page 21: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and
Page 22: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and
Page 23: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and
Page 24: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and
Page 25: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and
Page 26: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and
Page 27: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and

Controlled extensibility

JavaScript or TypeScript

Reuse node modules

API: vscode.d.ts

Extension description: package.json

MainProcess

IPC

ExtensionHost

ExtensionHost

RPCExtension

Host

node.jsRenderer process

Page 28: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and

RPC

ExtensionHost

NodeRenderer process

PowerShell Server

OmniSharp Server

Go CLI Tools

Jedi

C++ Server

Rust LS

Eclipse Java Server

TS Server

Page 29: Visual Studio Code - dotnetday.ch · ELECTRON Build cross platform desktop apps with web technologies Formerly known as Atom Shell. Made with by GitHub. Web Tech Use HTML, CSS, and

http://code.visualstudio.com

https://github.com/Microsoft/vscode/

http://www.typescriptlang.org/