vscode的插件prettier配置和Vetur配置

格式化.vue文件

1.prettier

首先安装vscode的插件prettier-vscode
安装成功后，编辑器默认的格式化处理就会被prettier代替， 默认快捷键是alt + shift + f

setting.json中配置

插件安装成功后，编辑器的配置setting.json会出现prettier插件的相关配置节点，同时也能看到一些默认的配置信息。
可以针对个人或团队喜好修改一些编辑器的全局配置，实际项目使用当中比较推荐用配置文件.prettierrc的方式进行针对性的配置，方便团队协作使用。
配置文件的选项可以参考官网： Configuration File · Prettier

{
  // 文件保存自动格式化
  "editor.formatOnSave": true,
  // 格式化插件设置为 prettier
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {}
}

prettier配置

项目级的配置，在项目根目录添加配置文件prettier.config.js 或者 .prettierrc.js

module.exports = {
  printWidth: 100,
  tabWidth: 2, // 超过最大值换行
  semi: false, // 结尾不用分号
  singleQuote: true, // 使用单引号
  disableLanguages: ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
  htmlWhitespaceSensitivity: "ignore",
}

 /* prettier的配置 */

 "prettier.printWidth": 100, // 超过最大值换行

 "prettier.tabWidth": 4, // 缩进字节数

 "prettier.useTabs": false, // 缩进不使用tab，使用空格

 "prettier.semi": true, // 句尾添加分号

 "prettier.singleQuote": true, // 使用单引号代替双引号

 "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行

 "prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号

 "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"

 "prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置

 "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto

 "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验

 "prettier.htmlWhitespaceSensitivity": "ignore",

 "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中

 "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 单独放一行

 "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号

 "prettier.parser": "babylon", // 格式化的解析器，默认是babylon

 "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier

 "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验

 "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）

 "prettier.tslintIntegration": false // 不让prettier使用tslint的代码格式进行校验

"trailingComma": "none" // 函数最后不需要逗号

代码自动保存后自动格式化

        https://baijiahao.baidu.com/s?id=1704599223959464441&wfr=spider&for=pc

 

2 .Vetur

• 语法高亮
• Snippet
• Emmet
• 错误检测
• 格式化
• 智能感知
• …

Vetur配置

• Ctrl+Shift+P
• 搜索settings.json
• 选择Prefrerences：Open Settings(JSON)
  有UI操作步骤，有兴趣的童鞋可以试试File-Prefrerences-Settings

然后把如下配置复制保存

{
    "editor.fontSize": 17,//编辑器字体大小
    "[scss]": {
        "editor.defaultFormatter": "michelemelluso.code-beautifier"
    },//scss格式化工具
    "workbench.iconTheme": "vscode-icons",//vscode文件图标主题
    "terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",//默认终端shell
    "go.formatTool": "goimports",//golang格式化工具
    "editor.defaultFormatter": "esbenp.prettier-vscode", //编辑器格式化工具
    "[javascript]": {
      "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
    },//javascript格式化工具
    "[vue]": {
      "editor.defaultFormatter": "octref.vetur"
    },//vue格式化工具
    "editor.insertSpaces": false,
    "workbench.editor.enablePreview": false, //打开文件不覆盖
    "search.followSymlinks": false, //关闭rg.exe进程
    "editor.minimap.enabled": false, //关闭快速预览
    "files.autoSave": "afterDelay", //编辑自动保存
    "editor.lineNumbers": "on", //开启行数提示
    "editor.quickSuggestions": {
      //开启自动显示建议
      "other": true,
      "comments": true,
      "strings": true
    },
    "editor.tabSize": 2, //制表符符号eslint
    "editor.formatOnSave": true, //每次保存自动格式化
    // "eslint.codeActionsOnSave": {
    //     "source.fixAll.eslint": true
    // },
    "prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
    "prettier.semi": true, //去掉代码结尾的分号
    "prettier.singleQuote": false, //使用单引号替代双引号
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
    "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
    "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
        "wrap_attributes": "force-aligned" //属性强制折行对齐
      },
      "prettier": {
        "semi": false,
        "singleQuote": true
      },
      "vscode-typescript": {
        "semi": false,
        "singleQuote": true
      }
    },
    "eslint.validate": [
      "vue",
      // "javascript",
      "typescript",
      "typescriptreact",
      "html"
    ],
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
}