Implementation of vscode one key specification code format


In the process of using vscode, the format of the code may be disordered after you or push the code,
As a mature development, of course, we should abide by some code specifications. First of all, code cleanliness should be ranked first
Using vscode to format code may be able to manually modify the format in a small number of cases, but what should be done when a large number of formats are not aligned?

File > Preferences > Settings – > {}

In the user settings on the right, you can change the default of the current editor

Copy the following to the user settings,ctrl + sCode specification can be completed

  //Vscode enables the option to automatically set tabsize based on the file type by default
  "editor.detectIndentation": false,
  //Reset tabsize
  "editor.tabSize": 2,
  //Automatically format every time you save 
  "editor.formatOnSave": true,
  //ා fix the code in eslint format every time you save it
  "eslint.autoFixOnSave": true,
  //Add Vue support
  "eslint.validate": [
      "language": "vue",
      "autoFix": true
  //Let prettier use the code format of eslint for verification 
  "prettier.eslintIntegration": true,
  //ා remove the semicolon at the end of the code 
  "prettier.semi": false,
  //# use quotation marks instead of double quotes 
  "prettier.singleQuote": true,
  //# put a space between the function (name) and the brackets after it
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  //This is selected according to the user's own habits 
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  //Let JS in Vue be formatted according to TS format of editor 
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      //HTML code format style in Vue component
  //To format stylus, the Manta's stylus supreme plug-in needs to be installed
  " stylusSupremacy.insertColons ": false, // insert colon
  " stylusSupremacy.insertSemicolons ": false, // insert well
  " stylusSupremacy.insertBraces ": false, // insert braces
  " stylusSupremacy.insertNewLineAroundImports ": false, // whether to wrap after import
  " stylusSupremacy.insertNewLineAroundBlocks ": false // whether to wrap lines in two selectors

This article about the implementation of vscode one key specification code format is introduced here. For more relevant vscode specification code format content, please search the previous articles of developeppaer or continue to browse the related articles below. I hope you can support developeppaer more in the future!