vsCode JS code formatting plugin ESlint

vsCode JS code formatting plugin ESlint

The verification is valid, and the Ctrl+S save code is fully formatted. Writing this is mainly a personal note, not a duplication.

Source: https://blog.csdn.net/qq_34803821/article/details/84972781

1. Install the plug-in

Open the app store in VSCode and search for and install three plugins: ESlint, vetur, Prettier - Code formatter. specific

 2. Configure the Settings.json file of VSCode

2.1. Open the setting interface

Open the path: File (file)->Preferences (preferences)->Settings (settings).

Shortcut key to open: Ctrl+,

2.2. Open the Settings.json file

Open method 1:

 Open method 2:

 2.3, configuration code, // code formatting

{
// code file header comment
  "fileheader.customMade": {
    "Descripttion": "js",
    "Version": "1.0",
    "Author": "name",
    "Date": "Do not edit",
    "LastEditors": "name",
    "LastEditTime": "Do not edit"
  },
  "fileheader.cursorMode": {
    "name": "",
    "test": "test font",
    "msg": "",
    "param": "",
    "return": ""
  },
  
// code formatting
  // vscode enables the option to automatically set tabsize according to the file type by default
  "editor.detectIndentation": false,
  // reset tabsize
  "editor.tabSize": 2,
  // #Automatically format every time you save
  "editor.formatOnSave": true,
  // #Every time you save, fix the code in eslint format
  "eslint.autoFixOnSave": true,
  // add vue support
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // #Let prettier use eslint code format for verification
  "prettier.eslintIntegration": true,
  // #Remove the semicolon at the end of the code
  "prettier.semi": false,
  // # use quotes instead of double quotes
  "prettier.singleQuote": true,
  // #Add a space between the function (name) and the following parentheses
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #This is selected according to the user's own habits
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // # Let the js in vue be formatted according to the ts format that comes with the editor
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #html code formatting style in vue component
    }
  },
  // format stylus, Manta's Stylus Supremacy plug-in needs to be installed
  "stylusSupremacy.insertColons": false, // whether to insert colons
  "stylusSupremacy.insertSemicolons": false, // whether to insert semicolons
  "stylusSupremacy.insertBraces": false, // whether to insert braces
  "stylusSupremacy.insertNewLineAroundImports": false, // Whether to wrap after import
  "stylusSupremacy.insertNewLineAroundBlocks": false, // Whether to wrap lines in the two selectors
  "vetur.validation.template": false,
  "editor.codeActionsOnSave": null //Turn off the vetur tag closure check (used to solve iview tag error reporting)
}