settings.json

  1. {
  2. "editor.detectIndentation": false,
  3. "editor.wordWrap": "on",
  4. "editor.renderControlCharacters": true,
  5. "editor.renderWhitespace": "boundary",
  6. "editor.tabSize": 2,
  7. "editor.bracketPairColorization.enabled": true,
  8. "editor.bracketPairColorization.independentColorPoolPerBracketType": true,
  9. "git.autofetch": true,
  10. "terminal.integrated.profiles.windows": {
  11. "GitBash": {
  12. "path": "D:\\Program Files\\Git\\bin\\bash.exe"
  13. }
  14. },
  15. "terminal.integrated.defaultProfile.windows": "GitBash",
  16. "terminal.integrated.cursorBlinking": true,
  17. "terminal.integrated.cursorStyle": "line",
  18. "terminal.integrated.fontWeight": "300",
  19. "terminal.integrated.fontFamily": "Meslo LG L for Powerline",
  20. "terminal.integrated.tabs.enabled": true,
  21. "files.associations": {
  22. "*.cjson": "jsonc",
  23. "*.wxss": "css",
  24. "*.wxs": "javascript",
  25. "*.env.development": "env",
  26. "*.env.production": "env"
  27. },
  28. "minapp-vscode.disableAutoConfig": true,
  29. "emmet.includeLanguages": {
  30. "javascript": "javascriptreact",
  31. "wxml": "html"
  32. },
  33. "explorer.confirmDelete": false,
  34. "explorer.confirmDragAndDrop": false,
  35. "window.dialogStyle": "custom",
  36. "window.zoomLevel": -1,
  37. "workbench.activityBar.visible": true,
  38. "workbench.colorTheme": "One Dark Pro Darker",
  39. "workbench.editor.tabCloseButton": "right",
  40. "workbench.list.smoothScrolling": true,
  41. "workbench.iconTheme": "material-icon-theme",
  42. "workbench.productIconTheme": "fluent-icons",
  43. "workbench.sideBar.location": "left",
  44. "workbench.editorAssociations": {
  45. "*.ipynb": "jupyter.notebook.ipynb"
  46. },
  47. "workbench.colorCustomizations": {
  48. // "activityBarBadge.background": "#84FFFF",
  49. "list.activeSelectionForeground": "#84FFFF",
  50. "list.inactiveSelectionForeground": "#84FFFF",
  51. "list.highlightForeground": "#84FFFF",
  52. "scrollbarSlider.activeBackground": "#84FFFF50",
  53. "editorSuggestWidget.highlightForeground": "#84FFFF",
  54. "textLink.foreground": "#84FFFF",
  55. "progressBar.background": "#84FFFF",
  56. "pickerGroup.foreground": "#84FFFF",
  57. "tab.activeBorder": "#84FFFF",
  58. "notificationLink.foreground": "#84FFFF",
  59. "editorWidget.resizeBorder": "#84FFFF",
  60. "editorWidget.border": "#84FFFF",
  61. "settings.modifiedItemIndicator": "#84FFFF",
  62. "settings.headerForeground": "#84FFFF",
  63. "panelTitle.activeBorder": "#84FFFF",
  64. "breadcrumb.activeSelectionForeground": "#84FFFF",
  65. "menu.selectionForeground": "#84FFFF",
  66. "menubar.selectionForeground": "#84FFFF",
  67. "editor.findMatchBorder": "#84FFFF",
  68. "selection.background": "#84FFFF40"
  69. },
  70. // Live Server
  71. // To switch between localhost or 127.0.0.1 or anything else. Default is 127.0.0.1
  72. "liveServer.settings.host": "127.0.0.1",
  73. "liveServer.settings.donotShowInfoMsg": true,
  74. "materialTheme.accent": "Sky",
  75. "diffEditor.ignoreTrimWhitespace": false,
  76. "vetur.experimental.templateInterpolationService": true,
  77. "todo-tree.regex.regex": "(//|#|<!--|;|/\\*|^|^\\s*(-|\\d+.))\\s*($TAGS)",
  78. "prettier.useTabs": true,
  79. "prettier.jsxSingleQuote": true,
  80. "prettier.enable": false, // I only use Prettier for manually formatting
  81. "prettier.printWidth": 200,
  82. "prettier.semi": false,
  83. "prettier.singleQuote": true,
  84. // "js/ts.implicitProjectConfig.checkJs": true,
  85. "sync.gist": "e4fa0c3080d705db470f7fdea6186a69",
  86. "sync.quietSync": true,
  87. "sync.autoUpload": true,
  88. "sync.forceDownload": true,
  89. "sync.forceUpload": true,
  90. "tabnine.experimentalAutoImports": true,
  91. }

extensions.json

导出插件列表可以在终端执行 code --list-extensions

  1. {
  2. "recommendations": [
  3. "abusaidm.html-snippets",
  4. "bierner.color-info",
  5. "ChandZhang.wechat-snippet",
  6. "christian-kohler.npm-intellisense",
  7. "christian-kohler.path-intellisense",
  8. "cnyballk.wxml-vscode",
  9. "DavidAnson.vscode-markdownlint",
  10. "dbaeumer.vscode-eslint",
  11. "donjayamanne.githistory",
  12. "dsznajder.es7-react-js-snippets",
  13. "eamodio.gitlens",
  14. "ecmel.vscode-html-css",
  15. "EditorConfig.EditorConfig",
  16. "emmanuelbeziat.vscode-great-icons",
  17. "Equinusocio.vsc-material-theme",
  18. "equinusocio.vsc-material-theme-icons",
  19. "esbenp.prettier-vscode",
  20. "formulahendry.auto-close-tag",
  21. "formulahendry.auto-rename-tag",
  22. "formulahendry.code-runner",
  23. "Gruntfuggly.todo-tree",
  24. "IronGeek.vscode-env",
  25. "johnsoncodehk.volar",
  26. "kisstkondoros.vscode-gutter-preview",
  27. "LeetCode.vscode-leetcode",
  28. "MariusAlchimavicius.json-to-ts",
  29. "miguelsolorio.fluent-icons",
  30. "mkxml.vscode-filesize",
  31. "ms-azuretools.vscode-docker",
  32. "MS-CEINTL.vscode-language-pack-zh-hans",
  33. "ms-vscode-remote.remote-containers",
  34. "ms-vscode-remote.remote-ssh",
  35. "ms-vscode-remote.remote-ssh-edit",
  36. "ms-vscode-remote.remote-wsl",
  37. "ms-vscode-remote.vscode-remote-extensionpack",
  38. "msjsdiag.debugger-for-chrome",
  39. "octref.vetur",
  40. "oysun.vuehelper",
  41. "PKief.material-icon-theme",
  42. "qiu8310.minapp-vscode",
  43. "ritwickdey.LiveServer",
  44. "Shan.code-settings-sync",
  45. "steoates.autoimport",
  46. "stylelint.vscode-stylelint",
  47. "TabNine.tabnine-vscode",
  48. "techer.open-in-browser",
  49. "unbug.codelf",
  50. "vscode-icons-team.vscode-icons",
  51. "WakaTime.vscode-wakatime",
  52. "WallabyJs.quokka-vscode",
  53. "wayou.vscode-todo-highlight",
  54. "wix.vscode-import-cost",
  55. "xabikos.ReactSnippets",
  56. "zhuangtongfa.material-theme",
  57. ]
  58. }

Preview

index.png

快捷键

Win

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

0001.jpg

macOS

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

0001.jpg

Mac设置iTerm2终端样式

Meslo LG L for Powerline

image.png
image.png

命令行打开 VSCode

  • 手动打开 vscode
  • command + shift + p 打开命令面板(或者点击菜单栏 查看>命令面板)
  • 输入shell(选择”install code command in PATH”)

image.png

  • 打开终端 进入需要用IDE打开的文件夹 输入”code ~/Di-got/GitHub/Front-End”

image.png

远程服务器

利用插件实现远程服务器开发
image.png
image.png
image.png
image.png