Differences

This shows you the differences between two versions of the page.

--- public:computer:vscode [2022/12/29 15:18] – alex
+++ public:computer:vscode [2024/04/30 00:33] (current) – ↷ Links adapted because of a move operation 3.12.71.237
@@ Line 9: / Line 9: @@
-{{page>public:computer:macos_shortcuts#editing}}
+{{page>public:computer:macos#editing}}
@@ Line 58: / Line 58: @@
   - Install Node.js
   - Install VS Code Extentions
+    * [[https://marketplace.visualstudio.com/items?itemName=waderyan.nodejs-extension-pack|Node.js Extension Pack (Wade Anderson)]]
-    *
+    * [[https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script|npm (Microsoft)]]
-  * [[https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native|React Native Tools (Microsoft)]] React Native Tools
+    * [[https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense|npm Intellisense (Christian Kohler)]]
-  * [[https://marketplace.visualstudio.com/items?itemName=waderyan.nodejs-extension-pack|Node.js Extension Pack (Wade Anderson)]]
+    * [[https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense|Path Intellisense (Christian Kohler)]]
-  * [[https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script|npm (Microsoft)]]
+    * [[https://marketplace.visualstudio.com/items?itemName=jasonnutter.search-node-modules|Search node_modules (Jason Nutter)]]
-  * [[https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense|npm Intellisense (Christian Kohler)]]
-  * [[https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense|Path Intellisense (Christian Kohler)]]
-  * [[https://marketplace.visualstudio.com/items?itemName=jasonnutter.search-node-modules|Search node_modules (Jason Nutter)]]
 ==== JavaScript ====
+  * CodeRunner, Live Server
+  * Run; F5, Ctrl + F5, Ctrl + Alt + N (CodeRunner)
+  * Live Server;
+    * Open with Live Server; Alt + L, Alt + O
+    * Stop Live Server; Alt + L, Alt + C
   * [[https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint|ESLint (Dirk Baeumer)]] VS Code ESLint extension
   * [[https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log|Turbo Console Log (ChakrounAnas)]]
@@ Line 76: / Line 78: @@
-=== Vue.js ===
-  * [[https://marketplace.visualstudio.com/items?itemName=octref.vetur|Vetur (Pine Wu)]]
-  * [[https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-extensionpack|Vue VS Code Extention Pack (sarah.drasner)]]
-  * [[https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets|Vue VSCode Snippets (sarah.drasner)]]  * [[https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets|Vue VSCode Snippets (sarah.drasner)]] Vue VSCode Snippets
+==== TypeScript ====
+  * Run with Live Server; CTRL + ALT + N
+  * Run with F5; .vscode
+    * launch.json <sxh json>
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Launch Program",
+            "program": "${workspaceFolder}/typescript/out/hello.js",
+            "outFiles": ["${workspaceFolder}/**/*.js"]
+        }
+    ]
+}
+</sxh>
+    * tasks.json; Start ts-watch, CTRL + SHIFT + B <sxh json>
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "type": "typescript",
+            "tsconfig": "tsconfig.json",
+            "option": "watch",
+            "problemMatcher": [
+                "$tsc-watch"
+            ],
+            "group": "build"
+        }
+    ]
+}
+</sxh>
+  * Run with nodemon (live compile environment); <sxh bash>
+$ npm install ts-node --save-dev
+$ npm install nodemon --save-dev
+</sxh>
+    * package.json <sxh json>
+{
+  "name": "typescript",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "npm run build:live",
+    "build": "tsc -p .",
+    "build:live": "nodemon --watch '*.ts' --exec 'ts-node' hello.ts",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "nodemon": "^2.0.20",
+    "ts-node": "^9.1.1",
+    "typescript": "^4.2.4"
+  }
+}
+  </sxh>
-==== TypeScript ====
   * [[https://marketplace.visualstudio.com/items?itemName=salbert.comment-ts|Comments in Typescript (s.albert)]]
   * [[https://marketplace.visualstudio.com/items?itemName=GregorBiswanger.json2ts|json2ts (Gregor Biswanger)]]
@@ Line 94: / Line 151: @@
+=== Vue.js ===
+  * [[https://marketplace.visualstudio.com/items?itemName=octref.vetur|Vetur (Pine Wu)]]
+  * [[https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-extensionpack|Vue VS Code Extention Pack (sarah.drasner)]]
+  * [[https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets|Vue VSCode Snippets (sarah.drasner)]] Vue VSCode Snippets
+=== React.js ===
+  * [[https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native|React Native Tools (Microsoft)]] React Native Tools
@@ Line 119: / Line 183: @@
   * [[https://marketplace.visualstudio.com/items?itemName=twxs.cmake|CMake (twxs)]] CMake For VisualStudio Code
   * [[https://marketplace.visualstudio.com/items?itemName=ms-vscode.cmake-tools|CMake Tools (Microsoft)]] CMake Tools
+==== PHP ====
+  * [[https://marketplace.visualstudio.com/items?itemName=xdebug.php-pack|PHP Extension Pack (Xdebug)]]
+    * [[https://marketplace.visualstudio.com/items?itemName=xdebug.php-debug|PHP Debug (Xdebug)]]
+    * [[https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client|PHP Intelephense (Ben Mewburn)]]
@@ Line 134: / Line 206: @@
   * [[https://marketplace.visualstudio.com/items?itemName=cschlosser.doxdocgen|Doxygen Documentation Generator (Christoph Schlosser)]] Generate Doxygen Comments in VS Code
   * [[https://marketplace.visualstudio.com/items?itemName=kirozen.dokuwiki|DokuWiki (Etienne Faisant)]] DokuWiki README
-  * [[https://marketplace.visualstudio.com/items?itemName=GrapeCity.gc-excelviewerExcel Viewer (GrapeCity)]] Excel Viewer
+  * [[https://marketplace.visualstudio.com/items?itemName=GrapeCity.gc-excelviewer|Excel Viewer (GrapeCity)]] Excel Viewer
   * [[https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github|GitHub Pull Requests and Issues (GitHub)]]
   * [[https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens|GitLens - Git supercharged (GitKraken)]]