.vscode/extensions.json and setting.json are the recommended list and settings of plugins used in the project

---

foreword

In the front-end project, there is a .vscode folder in the file directory, and there are generally two files extensions.json and setting.json in the folder. The function is to keep all developers installed with the same plug-in and the same configuration, and to maintain the consistency of the development environment.

---

一、extensions.json

Install recommended plugins

In the current project, which plugins need to be installed.

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

View the recommended plugins for the current project (workspace), steps: The


above shows the extensions.json recommended plugins, which can be installed with one click.

Editor's Picks

We can also edit which plugins are recommended, for example:
add stylelint plugin recommendation in extensions.json:

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

The value stylelint.vscode-stylelingcorresponds to the identifier of the plugin

The above is how to use extensions.json.

Two, setting.json

Configuration of vscode editor and plugins.

Note: The setting.json in the project will override the global configuration in 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"]
}

The setting.json in the project (workspace) allows all developers in the team to have the same configuration.

Summarize

extensions.jsonAnd setting.jsonplay a very important role in team collaboration development.
If you encounter problems or have any suggestions, you can leave a message.