.vscode/extensions.json および settings.json は、プロジェクトで使用されるプラグインの推奨リストと設定です。

---

序文

フロントエンド プロジェクトでは、ファイル ディレクトリに .vscode フォルダーがあり、そのフォルダー内には通常、extensions.json と settings.json の 2 つのファイルがあります。この機能は、すべての開発者が同じプラグインと同じ構成をインストールし、開発環境の一貫性を維持することを目的としています。

---

一、extensions.json

推奨プラグインをインストールする

現在のプロジェクトで、どのプラグインをインストールする必要があるか。

{
    
    
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "Vue.volar"
  ]
}

現在のプロジェクト (ワークスペース) の推奨プラグインを表示します。手順: 上記は、


ワンクリックでインストールできる extensions.json 推奨プラグインを示しています。

エディターズ・ピック

どのプラグインが推奨されるかを編集することもできます。たとえば、
extensions.json に stylelint プラグインの推奨を追加します。

{
    
    
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "Vue.volar",
    "stylelint.vscode-stylelint",
  ]
}

値はstylelint.vscode-stylelingプラグインの識別子に対応します

以上がextensions.jsonの使い方です。

二、setting.json

vscodeエディターとプラグインの設定。

注: プロジェクト内の settings.json は、vscode のグローバル構成をオーバーライドします。

{
    
    
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    
    
    "source.fixAll": true,
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "stylelint.validate": ["css", "less", "scss", "vue"]
}

プロジェクト (ワークスペース) の settings.json により、チーム内のすべての開発者が同じ構成を使用できるようになります。

要約する

extensions.jsonそして、setting.jsonチームのコラボレーション開発において非常に重要な役割を果たします。
問題が発生した場合や提案がある場合は、メッセージを残してください。