VSCode代码风格笔记（Vetur）

安装Vetur

setting.json旧配置（采用ESLint）

{
    "editor.tabSize": 4,
    "eslint.format.enable": true,
    // 是否开启vscode的eslint
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    // 每次保存的时候将代码按eslint格式进行修复
    "editor.formatOnSave": true,
    //粘贴时自动格式化
    "editor.formatOnPaste": true,
    // 添加vue支持,用eslint的规则检测文件
    "eslint.validate": [
        "javascript",
        "css",
        "vue",
    ],
    "eslint.options": {
        "extensions": [
            ".ts",
            ".tsx",
            ".js",
            ".vue",
            ".css",
        ]
    },
    // 配置语言的文件关联 (如: "*.extension": "html")。这些关联的优先级高于已安装语言的默认关联。
    "files.associations": {
        "*.vue": "vue",
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript"
    },
    // 配置glob模式以在全文本搜索和快速打开中排除文件和文件夹。从“＃files.exclude＃”设置继承所有glob模式。
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/dist": true,
        ".idea/": true,
        ".svn/": true,
        ".vscode/": true,
        "**/.map": true,
    },
    // 调整窗口的缩放级别。原始大小是 0
    "window.zoomLevel": 0,
    // 控制编辑器在空白字符上显示符号的方式。 boundary: 呈现空格字符(字词之间的单个空格除外)。
    "editor.renderWhitespace": "boundary",
    // 控制光标的动画样式。
    "editor.cursorBlinking": "smooth",
    // 控制是否显示缩略图。
    "editor.minimap.enabled": true,
    // 渲染每行的实际字符，而不是色块
    "editor.minimap.renderCharacters": false,
    // 根据活动编辑器控制窗口标题。
    "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
    // 控制代码片段是否与其他建议一起显示及其排列的位置。 top: 在其他建议上方显示代码片段建议。
    "editor.snippetSuggestions": "top",
    "eslint.codeAction.showDocumentation": {
        "enable": true
    },
    //显式弹出语法展开提示
    "emmet.showSuggestionsAsSnippets": true,
    //emmet只显示标记语言和样式表的展开提示
    "emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly",
    // 在默认不受支持的语言中启用 Emmet 缩写。在此语言和 Emmet 支持的语言之间添加映射
    "emmet.includeLanguages": {
        "wxml": "html",
        "vue": "html",
        "vue-html": "html",
        "javascript": "javascriptreact"
    },
    // 为Emmet定义配置文件或使用带有特定规则的配置文件。
    "emmet.syntaxProfiles": {
        "javascript": "jsx",
        "vue": "html",
        "vue-html": "html"
    },
    "minapp-vscode.disableAutoConfig": true,
    "eslint.nodeEnv": "",
    "[vue]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    // 选择 vue 文件中 template 的格式化工具
    "vetur.format.defaultFormatter.html": "prettyhtml",
    // 作用于js文件
    "vetur.format.defaultFormatter.js": "prettier-eslint",
    // 一点基础设置
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "singleQuote": true, //用单引号
            "semi": false, //不加分号
        }
    },
}

setting.json新配置

{
  "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中是否需要缩进
  "vetur.format.scriptInitialIndent": true,
  // style中是否需要缩进
  "vetur.format.styleInitialIndent": true,
  // 目前使用prettier后会自动将函数名或者function关键字后空格去除掉，这个和默认的EsLink的配置冲突。解决方案有两个，
  // 但是都不能完美解决，建议在EsLint里通过"space-before-function-paren":0 暂时将这个检查取消。
  // 参考方案1：不能给没有省略function关键字的命名函数加空格
  // "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // 参考方案2：不能使用prettier
  // "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // html代码属性不换行.force-aligned表示强制折行对齐
      "wrap_attributes": "auto"
    },
    "prettyhtml": {
      "printWidth": 120,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    },
    "prettier": {
      "printWidth": 120,
      // 不加分号
      "semi": false,
      // 静态字符串一律使用单引号或反引号，不使用双引号。
      "singleQuote": true,
      // 单行定义的对象，最后一个成员不以逗号结尾。多行定义的对象，最后一个成员以逗号结尾。
      "trailingComma": "none",
      "wrapAttributes": true,
      "sortAttributes": false
    }
  },
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  // 配置glob模式以在全文本搜索和快速打开中排除文件和文件夹。从“＃files.exclude＃”设置继承所有glob模式。
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true,
    ".idea/": true,
    ".svn/": true,
    ".vscode/": true,
    "**/.map": true,
  },
  //显式弹出语法展开提示
  "emmet.showSuggestionsAsSnippets": true,
  //emmet只显示标记语言和样式表的展开提示
  "emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly",
  // 在默认不受支持的语言中启用 Emmet 缩写。在此语言和 Emmet 支持的语言之间添加映射
  "emmet.includeLanguages": {
    "wxml": "html",
    "vue": "html",
    "vue-html": "html",
    "javascript": "javascriptreact"
  },
  // 为Emmet定义配置文件或使用带有特定规则的配置文件。
  "emmet.syntaxProfiles": {
    "javascript": "jsx",
    "vue": "html",
    "vue-html": "html"
  },
  "minapp-vscode.disableAutoConfig": true,
  // 控制资源管理器是否在把文件删除到废纸篓时进行确认
  "explorer.confirmDelete": false,
  // 控制代码片段是否与其他建议一起显示及其排列的位置。 top: 在其他建议上方显示代码片段建议。
  "editor.snippetSuggestions": "top",
  // 保存时自动格式化
  "editor.formatOnSave": true,
  //粘贴时自动格式化
  "editor.formatOnPaste": true,
}

“eslint:recommended”

package.json配置

"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"
    }
  },

标签：vue,format,VSCode,笔记,html,Vetur,editor,true,vetur
来源： https://blog.csdn.net/longlongValue/article/details/119907662