Differences

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

--- development:tools:vscode:start [2022/03/30 14:02] – joe.mao
+++ development:tools:vscode:start [2025/02/02 14:47] (current) – don.lee
@@ Line 9: / Line 9: @@
 <code>
 {
-  "dart.previewFlutterUiGuides": true,
+  "editor.renderWhitespace" : "boundary",
-  "editor.wordWrap": "on",
+  "dart.previewFlutterUiGuides" : true,
-  "editor.renderWhitespace": "boundary",
+  "[javascript]" : {
-  "editor.tabSize": 2,
+    "editor.defaultFormatter" : "vscode.typescript-language-features"
-  "editor.insertSpaces": true,
+  },
-  "editor.detectIndentation": false,
+  "workbench.startupEditor" : "newUntitledFile",
-  "editor.suggestSelection": "first",
+  "editor.insertSpaces" : true,
-  "eslint.validate": [
+  "security.workspace.trust.untrustedFiles" : "open",
+  "editor.accessibilitySupport" : "off",
+  "editor.tabSize" : 2,
+  "files.autoSave" : "onFocusChange",
+  "editor.suggestSelection" : "first",
+  "files.eol" : "\n",
+  "eslint.validate" : [
     "javascript",
     "javascriptreact",
     "vue"
   ],
-  "files.autoSave": "onFocusChange",
+  "workbench.editor.untitled.hint" : "hidden",
-  "files.eol": "\n",
+  "editor.detectIndentation": false,
+  "editor.wordWrap" : "on",
   "files.insertFinalNewline": true,
-  "window.zoomLevel": 1,
+  "terminal.integrated.env.osx": {
-  "workbench.startupEditor": "newUntitledFile"
+    "FIG_NEW_SESSION": "1"
+  },
+  "files.exclude": {
+    "**/.classpath": true,
+    "**/.project": true,
+    "**/.settings": true,
+    "**/.factorypath": true
+  },
+  "mssql.connections": [
+    {
+      "server": "192.168.88.241\\SQLEXPRESS",
+      "database": "jccpa",
+      "authenticationType": "SqlLogin",
+      "user": "jccpa",
+      "password": "",
+      "emptyPasswordInput": false,
+      "savePassword": true
+    }
+  ],
+  "dart.debugExternalPackageLibraries": true,
+  "dart.debugSdkLibraries": true,
+  "window.zoomLevel": 1
 }
 </code>
+==== Newline character ====
+Please set the newline character as 'LF'
+Reference: https://wiki.questwork.com/dokuwiki/doku.php?id=zh:staff:mao_joe:about_git_newline:start&s[]=crlf
@@ Line 42: / Line 76: @@
 Reference: https://code.visualstudio.com/docs/editor/extension-gallery
-^ Name ^ Backend ^ Frontend ^ Flutter ^ Optional ^ Remarks ^
+^ Name ^ Backend ^ Frontend ^ Flutter ^ Design ^ Optional ^ Remarks ^
-| [[https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag|Auto Close Tag]] | ✅ | ✅ | ✅ | | |
+| [[https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag|Auto Close Tag]] | ✅ | ✅ | ✅ | ✅ | | |
-| [[https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag|Auto Rename Tag]] | ✅ | ✅ | ✅ | | |
+| [[https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag|Auto Rename Tag]] | ✅ | ✅ | ✅ | ✅ | | |
-| [[https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp|C#]] | ✅ | ✅ | | | |
+| [[https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp|C#]] | ✅ | ✅ | | | | |
-| [[https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code|Dart]] | ✅ | | ✅ | | |
+| [[https://marketplace.visualstudio.com/items?itemName=Codeium.codeium|Codeium]] | | | | | ✅ | free AI code acceleration plugin for your favorite languages |
-| __[Deprecated] Debugger for Chrome__ | | | | | |
+| [[https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code|Dart]] | ✅ | | ✅ | ✅ | | |
-| [[https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag|Auto Close Tag]] | ✅ | ✅ | ✅ | | |
+| __[Deprecated] Debugger for Chrome__ | | | | | | |
+| [[https://marketplace.visualstudio.com/items?itemName=hediet.debug-visualizer|Debug Visualizer]] | | | | | ✅ | A visual watch window that lets you visualize your data structures while debugging. |
-  * Auto Close Tag
+| [[https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker|Docker]] | ✅ | | | | | |
-  * Auto Rename Tag
+| [[https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv|DotENV]] | ✅ | ✅ | ✅ | ✅ | | |
-  * C#
+| [[https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio|Draw.io Integration]] | ✅ | ✅ | ✅ | ✅ | | |
-  * __[Deprecated] Debugger for Chrome__
+| [[https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens|Error Lens]] | | | | | ✅ | |
-  * [[https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker|Docker]]
+| [[https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint|ESLint]] | ✅ | ✅ | | ✅ | | |
-  * [[https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv|DotENV]]
+| Fig | ✅ | | | | ✅ | You need to install [[https://fig.io/|Fig]], and then will auto install the vscode extension. Currently only supports Mac, with cross-platform support coming soon. |
-  * [[https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio|Draw.io Integration]]
+| [[https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter|Flutter]] | ✅ | | ✅ | ✅ | | |
-  * [[https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens|Error Lens]]
+| [[https://marketplace.visualstudio.com/items?itemName=GitHub.copilot|GitHub Copilot]] | | | | | ✅ | AI pair programmer. Requires a subscription. |
-  * [[https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint|ESLint]]
+| [[https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion|IntelliSense for CSS class names in HTML]] | ✅ | ✅ | | ✅ | | |
-  * Fig
+| [[https://marketplace.visualstudio.com/items?itemName=mathiasfrohlich.Kotlin|Kotlin Language]] | | | ✅ | | | |
-    * You need to install [[https://fig.io/|Fig]], and then will auto install the vscode extension.
+| [[https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare|Live Share]] | ✅ | ✅ | ✅ | ✅ | | |
-    * Currently only supports Mac, with cross-platform support coming soon.
+| [[https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme|Material Icon Theme (File Icon Theme)]] | | | | | ✅ | |
-  * [[development:tools:vscode:gulp tasks:|Gulp Tasks]]
+| [[development:tools:vscode:mongodb for vscode:|MongoDB for VS Code]] | ✅ | ✅ | ✅ | | | Except for backend colleagues, please only use it for search purposes as much as possible. |
-  * IntelliSense for CSS class
+| [[https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense|npm Intellisense]] | ✅ | ✅ | | ✅ | | |
-  * [[development:tools:vscode:mongodb for vscode:|MongoDB for VS Code]]
+| [[https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense|Path Intellisense]] | ✅ | ✅ | ✅ | ✅ | | |
-    * Except for backend colleagues, please only use it for search purposes as much as possible.
+| [[https://marketplace.visualstudio.com/items?itemName=ms-mssql.sql-database-projects-vscode|SQL Database Projects]] | ✅ | ✅ | ✅ | | | Just for MSSQL Databases. Set it once and use it in different projects. The disadvantage is that switching tabs will execute sql again. |
-  * npm
+| [[https://marketplace.visualstudio.com/items?itemName=mtxr.sqltools|SQLTools]] | ✅ | ✅ | ✅ | | | Need to setup in each projects. Except for backend colleagues, please only use it for search purposes as much as possible. Requires installing corresponding database driver separately |
-  * npm IntelliSense
+| [[https://marketplace.visualstudio.com/items?itemName=mtxr.sqltools-driver-mssql|SQLTools Microsoft SQL Server/Azure]] | ✅ | ✅ | ✅ | | | As SQLTools' driver. |
-  * Path IntelliSense
+| [[https://marketplace.visualstudio.com/items?itemName=BitLaboratory.task-panel|Tasks Panel]] | ✅ | ✅ | ✅ | ✅ | | |
-  * [[https://marketplace.visualstudio.com/items?itemName=mtxr.sqltools|SQLTools]]
+| [[https://marketplace.visualstudio.com/items?itemName=tldraw-org.tldraw-vscode|tldraw]] | | | | | ✅ | |
-  * [[https://marketplace.visualstudio.com/items?itemName=mtxr.sqltools-driver-mssql|SQLTools Microsoft SQL Server/Azure]]
+| [[https://marketplace.visualstudio.com/items?itemName=octref.vetur|Vetur]] | ✅ | ✅ | | ✅ | | |
-    * As SQLTools' driver
+| [[https://marketplace.visualstudio.com/items?itemName=esskar.vscode-flutter-i18n-json|vscode-flutter-i18n-json]] | | | ✅ | | | |
-    * Except for backend colleagues, please only use it for search purposes as much as possible.
+| [[https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons|vscode-icons]] | | | | | ✅ | |
-  * [[https://marketplace.visualstudio.com/items?itemName=BitLaboratory.task-panel|Tasks Panel]]
+| [[https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets|Vue 3 Snippets]] | ✅ | ✅ | | ✅ | | A Vue.js 3 And Vue.js 2 Code Snippets Extension |
-  * [[https://marketplace.visualstudio.com/items?itemName=tldraw-org.tldraw-vscode|tldraw]]
+| [[https://marketplace.visualstudio.com/items?itemName=jeremyrajan.webpack|webpack]] | ✅ | ✅ | | | | |
-  * Vetur
-  * vscode-icons
-  * Vue 2 Snippets
-  * webpack
-If you are a Flutter developer, install the following extensions:
-  * Dart
-  * Flutter
-  * Kotlin Language
-  * vscode-flutter-i18n-json
-  * [[https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme | Material Icon Theme (File Icon Theme)]]
 === file icon setting: ===
@@ Line 103: / Line 122: @@
 <note tip>VS Code allows you to search test or search by Regular Expression</note>
+==== Example 1 ====
+  * using regular expression to find and replace all $('...') to $("....")
+  * escape characters like $ ( with \
+  * using (.*) to match any characters inside
+  * using $1 to replace the matched characters
+<code>
+\$\('(.*)'\)
+$("$1")
+</code>
+{{:development:tools:vscode:screenshot_2022-07-13_at_1.34.58_pm.png?600|}}
+==== Example 2 ====
 {{:development:tools:vscode:screenshot_2020-06-19_at_11.54.44_am.png?400|}}
@@ Line 369: / Line 404: @@
 ]
 </code>
+===== Troubleshooting =====
+Problem: Left side bar Explorer icon is missing
+Solution:
+Run this in VS Code command palette:
+<code>
+View: Reset View Locations
+</code>