Both sides previous revision Previous revision Next revision | Previous revision |
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 |
---|
| |
| |
{{page>public:computer:macos_shortcuts#editing}} | {{page>public:computer:macos#editing}} |
| |
| |
- Install Node.js | - Install Node.js |
- Install VS Code Extentions | - 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 ==== | ==== 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=dbaeumer.vscode-eslint|ESLint (Dirk Baeumer)]] VS Code ESLint extension |
* [[https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log|Turbo Console Log (ChakrounAnas)]] | * [[https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log|Turbo Console Log (ChakrounAnas)]] |
| |
| |
=== 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=salbert.comment-ts|Comments in Typescript (s.albert)]] |
* [[https://marketplace.visualstudio.com/items?itemName=GregorBiswanger.json2ts|json2ts (Gregor Biswanger)]] | * [[https://marketplace.visualstudio.com/items?itemName=GregorBiswanger.json2ts|json2ts (Gregor Biswanger)]] |
| |
| |
| === 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 |
| |
| |
* [[https://marketplace.visualstudio.com/items?itemName=twxs.cmake|CMake (twxs)]] CMake For VisualStudio Code | * [[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 | * [[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)]] |
| |
| |
* [[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=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=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=GitHub.vscode-pull-request-github|GitHub Pull Requests and Issues (GitHub)]] |
* [[https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens|GitLens - Git supercharged (GitKraken)]] | * [[https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens|GitLens - Git supercharged (GitKraken)]] |