Vscode code style notes (vetur)

install Vetur

setting.json Old configuration （ use ESLint）

{
    
    "editor.tabSize": 4,
    "eslint.format.enable": true,
    //  Open or not vscode Of eslint
    "editor.codeActionsOnSave": {
    
        "source.fixAll.eslint": true
    },
    //  Press eslint Format for repair 
    "editor.formatOnSave": true,
    // Format automatically when pasting 
    "editor.formatOnPaste": true,
    //  add to vue Support , use eslint Rule detection file 
    "eslint.validate": [
        "javascript",
        "css",
        "vue",
    ],
    "eslint.options": {
    
        "extensions": [
            ".ts",
            ".tsx",
            ".js",
            ".vue",
            ".css",
        ]
    },
    //  Configuration language file association  ( Such as : "*.extension": "html"). These associations take precedence over the default associations for the installed language .
    "files.associations": {
    
        "*.vue": "vue",
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript"
    },
    //  To configure glob Mode to exclude files and folders from full-text search and quick open . from “＃files.exclude＃” Set to inherit all glob Pattern .
    "search.exclude": {
    
        "**/node_modules": true,
        "**/bower_components": true,
        "**/dist": true,
        ".idea/": true,
        ".svn/": true,
        ".vscode/": true,
        "**/.map": true,
    },
    //  Adjust the zoom level of the window . The original size is  0
    "window.zoomLevel": 0,
    //  Controls how the editor displays symbols on white space characters . boundary:  Render space characters ( Except for a single space between words ).
    "editor.renderWhitespace": "boundary",
    //  Control the animation style of the cursor .
    "editor.cursorBlinking": "smooth",
    //  Controls whether thumbnails are displayed .
    "editor.minimap.enabled": true,
    //  Render the actual characters of each line , Instead of color patches 
    "editor.minimap.renderCharacters": false,
    //  Control the window title according to the active editor .
    "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
    //  Controls whether code snippets are displayed with other suggestions and where they are arranged . top:  Show code snippet suggestions above other suggestions .
    "editor.snippetSuggestions": "top",
    "eslint.codeAction.showDocumentation": {
    
        "enable": true
    },
    // The syntax expansion prompt pops up explicitly 
    "emmet.showSuggestionsAsSnippets": true,
    //emmet Only display the expansion prompt of markup language and style sheet 
    "emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly",
    //  Enable... In languages that are not supported by default  Emmet  abbreviation . In this language and  Emmet  Add mapping between supported languages 
    "emmet.includeLanguages": {
    
        "wxml": "html",
        "vue": "html",
        "vue-html": "html",
        "javascript": "javascriptreact"
    },
    //  by Emmet Define a profile or use a profile with specific rules .
    "emmet.syntaxProfiles": {
    
        "javascript": "jsx",
        "vue": "html",
        "vue-html": "html"
    },
    "minapp-vscode.disableAutoConfig": true,
    "eslint.nodeEnv": "",
    "[vue]": {
    
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    //  choice  vue  In file  template  Format tool for 
    "vetur.format.defaultFormatter.html": "prettyhtml",
    //  Act on js file 
    "vetur.format.defaultFormatter.js": "prettier-eslint",
    //  A little basic setting 
    "vetur.format.defaultFormatterOptions": {
    
        "prettier": {
    
            "singleQuote": true, // single quote 
            "semi": false, // Without a semicolon 
        }
    },
}

setting.json New configuration

{
    
  "window.zoomLevel": 0,
  "vetur.format.options.tabSize": 4,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.sass": "sass-formatter",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier",
  // script Whether indent is required in 
  "vetur.format.scriptInitialIndent": true,
  // style Whether indent is required in 
  "vetur.format.styleInitialIndent": true,
  //  Currently in use prettier The function name or function Remove the space after the keyword , This and the default EsLink Configuration conflict for . There are two solutions ,
  //  But it can't be solved perfectly , It is suggested that EsLint Pass through "space-before-function-paren":0  Temporarily cancel this check .
  //  Reference plan 1： Cannot give without omitting function Keyword named function plus space 
  // "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  //  Reference plan 2： Out of commission prettier
  // "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    
    "js-beautify-html": {
    
      // html Code attributes do not wrap .force-aligned Indicates forced line break alignment 
      "wrap_attributes": "auto"
    },
    "prettyhtml": {
    
      "printWidth": 120,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    },
    "prettier": {
    
      "printWidth": 120,
      //  Without a semicolon 
      "semi": false,
      //  Static strings always use single quotation marks or back quotation marks , No double quotes .
      "singleQuote": true,
      //  A single line defined object , The last member does not end with a comma . Multiline defined objects , The last member ends with a comma .
      "trailingComma": "none",
      "wrapAttributes": true,
      "sortAttributes": false
    }
  },
  "files.associations": {
    
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  //  To configure glob Mode to exclude files and folders from full-text search and quick open . from “＃files.exclude＃” Set to inherit all glob Pattern .
  "search.exclude": {
    
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true,
    ".idea/": true,
    ".svn/": true,
    ".vscode/": true,
    "**/.map": true,
  },
  // The syntax expansion prompt pops up explicitly 
  "emmet.showSuggestionsAsSnippets": true,
  //emmet Only display the expansion prompt of markup language and style sheet 
  "emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly",
  //  Enable... In languages that are not supported by default  Emmet  abbreviation . In this language and  Emmet  Add mapping between supported languages 
  "emmet.includeLanguages": {
    
    "wxml": "html",
    "vue": "html",
    "vue-html": "html",
    "javascript": "javascriptreact"
  },
  //  by Emmet Define a profile or use a profile with specific rules .
  "emmet.syntaxProfiles": {
    
    "javascript": "jsx",
    "vue": "html",
    "vue-html": "html"
  },
  "minapp-vscode.disableAutoConfig": true,
  //  Controls whether the resource manager confirms when deleting files to the wastebasket 
  "explorer.confirmDelete": false,
  //  Controls whether code snippets are displayed with other suggestions and where they are arranged . top:  Show code snippet suggestions above other suggestions .
  "editor.snippetSuggestions": "top",
  //  Format automatically when saving 
  "editor.formatOnSave": true,
  // Format automatically when pasting 
  "editor.formatOnPaste": true,
}

“eslint:recommended”

package.json To configure

"eslintConfig": {
    
    "root": true,
    "env": {
    
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/standard"
    ],
    "parserOptions": {
    
      "parser": "babel-eslint"
    },
    "rules": {
    
      "space-before-function-paren": [
        0,
        "always"
      ],
      "indent": "off"
    }
  },