管理或分享 vs code 的 workspace extensions

Posted on Edited on In Symbols count in article: Reading time ≈ NaN:aN

多人開發使用 vs code 當成預設的 editor 時，透過分享 Workspace Recommended Extensions 的方式讓大家都使用同樣的 extension 達成開發或檢查的一致性。

列出已經安裝的 extensions

Command line 執行

1
$ code --list-extensions

結果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
2gua.rainbow-brackets
alefragnani.project-manager
alexdima.copy-relative-path
apility.beautify-blade
batisteo.vscode-django
bmewburn.vscode-intelephense-client
christian-kohler.npm-intellisense
christian-kohler.path-intellisense
cmstead.jsrefactor
codezombiech.gitignore
DavidAnson.vscode-markdownlint
dbaeumer.vscode-eslint
donjayamanne.githistory
dracula-theme.theme-dracula
eamodio.gitlens
EditorConfig.EditorConfig
eg2.vscode-npm-script
felipecaputo.git-project-manager
felixfbecker.php-debug
formulahendry.auto-close-tag
formulahendry.auto-rename-tag
golang.Go
henriiik.docker-linter
HookyQR.beautify
humao.rest-client
janisdd.vscode-edit-csv
JerryHong.autofilename
joelday.docthis
junstyle.php-cs-fixer
magicstack.MagicPython
marclipovsky.string-manipulation
mikestead.dotenv
ms-azuretools.vscode-docker
ms-python.python
neilbrayfield.php-docblocker
nhoizey.gremlins
octref.vetur
oderwat.indent-rainbow
odubuc.mysql-inline-decorator
onecentlin.laravel-blade
onecentlin.laravel5-snippets
PKief.material-icon-theme
quicktype.quicktype
redhat.vscode-yaml
richie5um2.vscode-sort-json
robinbentley.sass-indented
shardulm94.trailing-spaces
shd101wyy.markdown-preview-enhanced
SirTori.indenticator
streetsidesoftware.code-spell-checker
Tyriar.sort-lines
VisualStudioExptTeam.vscodeintellicode
vscode-icons-team.vscode-icons
wholroyd.jinja
wix.vscode-import-cost
wmaurer.change-case
wwm.better-align
xabikos.JavaScriptSnippets
yomed.theme-dracula-soft
yzhang.markdown-all-in-one

將列出的 extensions 全部複製起來，後續會用到。

在 workspace 匯入及安裝 extensions

  1. 打開 vs code 按下快速鍵 command + shift + p
  2. 在跳出的對話框命令列後輸入或找到 >Extensions: Configure Recommended Extensions (Workspace Folder)
  3. 接著修改開啟的 .vscode/extensions.json 檔案，以 JOSN 格式編輯貼上剛才複製的 extensions
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    {
      // See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
      // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
      // List of extensions which should be recommended for users of this workspace.
      "recommendations": [
        "2gua.rainbow-brackets",
        "alefragnani.project-manager",
        "alexdima.copy-relative-path",
        "apility.beautify-blade",
        "batisteo.vscode-django",
        "bmewburn.vscode-intelephense-client",
        "christian-kohler.npm-intellisense",
        "christian-kohler.path-intellisense",
        "cmstead.jsrefactor",
        "codezombiech.gitignore",
        "DavidAnson.vscode-markdownlint",
        "dbaeumer.vscode-eslint",
        "donjayamanne.githistory",
        "dracula-theme.theme-dracula",
        "eamodio.gitlens",
        "EditorConfig.EditorConfig",
        "eg2.vscode-npm-script",
        "felipecaputo.git-project-manager",
        "felixfbecker.php-debug",
        "formulahendry.auto-close-tag",
        "formulahendry.auto-rename-tag",
        "golang.Go",
        "henriiik.docker-linter",
        "HookyQR.beautify",
        "humao.rest-client",
        "janisdd.vscode-edit-csv",
        "JerryHong.autofilename",
        "joelday.docthis",
        "junstyle.php-cs-fixer",
        "magicstack.MagicPython",
        "marclipovsky.string-manipulation",
        "mikestead.dotenv",
        "ms-azuretools.vscode-docker",
        "ms-python.python",
        "neilbrayfield.php-docblocker",
        "nhoizey.gremlins",
        "octref.vetur",
        "oderwat.indent-rainbow",
        "odubuc.mysql-inline-decorator",
        "onecentlin.laravel-blade",
        "onecentlin.laravel5-snippets",
        "PKief.material-icon-theme",
        "quicktype.quicktype",
        "redhat.vscode-yaml",
        "richie5um2.vscode-sort-json",
        "robinbentley.sass-indented",
        "shardulm94.trailing-spaces",
        "shd101wyy.markdown-preview-enhanced",
        "SirTori.indenticator",
        "streetsidesoftware.code-spell-checker",
        "Tyriar.sort-lines",
        "VisualStudioExptTeam.vscodeintellicode",
        "vscode-icons-team.vscode-icons",
        "wholroyd.jinja",
        "wix.vscode-import-cost",
        "wmaurer.change-case",
        "wwm.better-align",
        "xabikos.JavaScriptSnippets",
        "yomed.theme-dracula-soft",
        "yzhang.markdown-all-in-one"
      ],
      // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
      "unwantedRecommendations": [
      ]
    }

點擊左側 EXPLOER 選單 ICON 的 Extensions（或快速鍵 shift + command + x），在展開的清單視窗右上角點擊 ... 圖示，選取 Show Recommended Extensions，然後挑選想要的 extension 進行安裝。也可以全部安裝後，再把不想使用的 extension disable :)

設定 Workspace Settings

  1. 打開 vs code 按下快速鍵 command + shift + p
  2. 在跳出的對話框命令列後輸入或找到 >Preferences: Open User Settings
  3. 點擊搜尋列下方的 ... 圖示，並選取 「Open settings.json」，即可進行編輯

Extensions 的安裝路徑

  • Windows %USERPROFILE%\.vscode\extensions
  • Mac ~/.vscode/extensions
  • Linux ~/.vscode/extensions

設定 User Settings

  1. 打開 vs code 按下快速鍵 command + shift + p
  2. 在跳出的對話框命令列後輸入或找到 >Preferences: Open User Settings
  3. 點擊搜尋列下方的 ... 圖示，並選取 「Open settings.json」，貼上下列內容
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    {
        "auto-rename-tag.activationOnLanguage": [
            "html",
            "xml",
            "php",
            "javascript",
            "vue"
        ],
        "editor.formatOnSave": false,
        "editor.minimap.enabled": false,
        "editor.minimap.renderCharacters": false,
        "editor.rulers": [
            80,
            120
        ],
        "gitlens.advanced.messages": {
            "suppressShowKeyBindingsNotice": true
        },
        "prettier.singleQuote": true,
        "todo-tree.customHighlight": {
            "FIXME": {},
            "TODO": {}
        },
        "todo-tree.defaultHighlight": {
            "foreground": "green",
            "type": "none"
        },
        "todohighlight.include": [
            "**/*.js",
            "**/*.jsx",
            "**/*.ts",
            "**/*.tsx",
            "**/*.html",
            "**/*.php",
            "**/*.css",
            "**/*.scss",
            "**/*.cs"
        ],
        "workbench.colorTheme": "Dracula Soft",
        "workbench.iconTheme": "vscode-icons"
    }

參考資料 References