VSCode扩展工具 3. Vue格式化工具Vetur

H515
11,087 阅读5分钟

Vetur - 作用于*.vue文件

  • 代码高亮
  • 代码片段
  • Emmet 语法支持
  • 语法错误校验检查
  • 格式化代码
  • 代码提醒
  • 对三方 UI 框架的支持 image.png

image.png

安装

  • vscode侧边栏扩展 -> 搜索Vetur -> 安装

    截止20211012 Vetur最新版本：Vue tooling for VS Code 0.34.1 image.png image.png

快捷键使用：Shift + alt + f

  • 如果之前已安装并已快捷键使用过其他格式化工具，如Prettier，则在settings.json去掉其相应配置： 
    {
    // ……
    // 定义一个默认格式化程序, 该格式化程序优先于所有其他格式化程序设置。必须是提供格式化程序的扩展的标识符
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
     },
    // ……
}
  • 关闭settings.json中的"[vue]"配置后，Shift + alt + f快捷键格式化时，编辑器将弹出窗口，让你重新选择所需格式化工具，这里选择vetur image.png

使用Vetur时出现问题的解决方案：

  • Vetur issues
    • 大部分Vetur扩展问题，都可以在该issues查找到
  • 如果安装后无法使用，提示扩展Vetur无法格式化，尝试重启VSCode， 或运行Vetur重启命令Restart VLS, 如果最终还是无法使用，安装Vetur另外版本，如0.30.3

vetur与Prettier的配合使用：

  • vetur的formatter大多采用Prettier的格式化风格。
  • 所以在使用vetur的时候，我们选择继续安装Prettier扩展程序，与vetur配合使用。
    • 当然，你也可以选择js-beautify-html、prettyhtml等其他扩展程序与vetur搭配。
  • Prettier使用方式：VSCode扩展工具 2. 格式化工具Prettier

定制Vetur+Prettier配置项settings.json:

{
   /* Vetur ->Start */
  "vetur.ignoreProjectWarning": true, // 忽略警告提示: Vetur find tsconfig.json/jsconfig.json, but they aren’t in the project root.
  "vetur.useWorkspaceDependencies": true, // 使用本项目的依赖版本
  "vetur.validation.template": true, // vetur模板校验template/style/script,错误提示将来自 ESLint 插件eslint-plugin-vue，而不是 Vetur,确保项目或全局有安装ESLint相关插件
  "vetur.validation.templateProps": true, // Prop属性校验,export default {  props: { str: String }}
  "vetur.experimental.templateInterpolationService": true, // Vetur 现在提供完成、诊断、悬停、跳转到定义、查找这些 JavaScript 片段v-if等的API资料, 也可禁用模板诊断vetur.validation.interpolation: false
  "vetur.validation.interpolation": false, // 不对新 TS 语法进行校验
  "vetur.format.defaultFormatter.html": "prettier", //  Valid values: "none", "prettier", "js-beautify-html". 配置值范围取决于你当前编辑器所安装的格式化扩展程序，如js-beautify-html => Beautify 扩展程序
  "vetur.format.defaultFormatter.pug": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.format.defaultFormatter.sass": "sass-formatter",
  "vetur.format.options.tabSize": 2,
  "vetur.format.options.useTabs": false, // 是否利用tab替代空格
  "vetur.format.styleInitialIndent": true, // 对vue文件中的style是否统一缩进格式
  "vetur.format.scriptInitialIndent": false, // 对vue文件中的script是否统一缩进格式
  // 支持自定义块显示格式
  "vetur.grammar.customBlocks": {
    "docs": "md",
    "i18n": "json"
  },
  // vetur格式 HTML 模板
  "vetur.format.defaultFormatterOptions": {
    "prettier": { // 如果这里prettier不配置，则默认采用prettier的公共配置
      "printWidth": 100,
      "tabWidth": 2, // prettier的tabWidth未明确设置时，取"vetur.format.options.tabSize" （useTabs 工作方式相同）
      "singleQuote": true, // 用单引号
      "semi": false, // 不加分号
      "trailingComma": "none", // 禁止末尾添加逗号
      "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 函数括号前是否加空格
      "typescript.format.insertSpaceBeforeFunctionParenthesis": true, // 函数括号前是否加空格
      "arrowParens": "avoid" //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
    },
    // Beautify 扩展程序
    "js-beautify-html": {},
    // 已弃用
    "prettyhtml": {}
  },
  "[vue]": {
    // 定义一个默认格式化程序, 该格式化程序优先于所有其他格式化程序设置。必须是提供格式化程序的扩展的标识符
    "editor.defaultFormatter": "octref.vetur",
    // "editor.formatOnSave": true, // 保存时是否自动格式化
  },
  /* Vetur ->End */
}

vetur.config.js 使用Vetur定义全局组件

  1. vetur.config.js作用：

    • Vetur 支持定义全局组件，可以通过配置选项projects.globalComponents，从而在项目的任何位置为该组件注册模板插值。
    • 严格校验vue语法规则，红色警告提示 vetur tip.png

  2. vetur.config.js存放位置：

    • 当您的项目不是在 monorepo 众项目代码仓库， 并且package.json/(ts|js)config.json位于项目根目录时，那么将配置文件vetur.config.js放于当前项目根目录下，与package.json/(ts|js)config.json同级。

  3. 安装或使用过程出现的问题

  4. vetur.config.js配置文件内容：

    • vetur.config.js 配置参考文档
    • 可将VSCode的Settings.json中的vetur配置内容，直接复制一份放置vetur.config.js的settings选项当中，再根据项目需要进行调整
    • Project中的vetur.config.js优先级大于VSCode的settings.json
    • 修改VSCodesettings.json的vetur配置内容，只需要稍微等待便可看到项目代码校验效果；
    • 而修改vetur.config.js的配置内容，则需用Ctrl + shift + p命令重启Vetur Language Server服务：Vetur: Restart VLS，才能看到配置效果

    注意：除projects.root是必填外，其他如projects.globalComponents等选项没有需要配置的值时，可以选择注释掉，避免报错；

// vetur.config.js
/** @type {import('vls').VeturConfig} */
// vetur配置，会覆盖vscode中的设置
module.exports = {
  // **optional** default: `{}`
  // override vscode settings part
  // Notice: It only affects the settings used by Vetur.
  settings: {
    "vetur.ignoreProjectWarning": true, // 忽略警告提示: Vetur find tsconfig.json/jsconfig.json, but they aren’t in the project root.
    "vetur.useWorkspaceDependencies": true, // 使用本项目的依赖版本
    "vetur.validation.template": true, // vetur模板校验template/style/script,错误提示将来自 ESLint 插件eslint-plugin-vue，而不是 Vetur,确保项目或全局有安装ESLint相关插件
    "vetur.validation.templateProps": true, // Prop属性校验,export default {  props: { str: String }}
    "vetur.experimental.templateInterpolationService": true, // Vetur 现在提供完成、诊断、悬停、跳转到定义、查找这些 JavaScript 片段v-if等的API资料, 也可禁用模板诊断vetur.validation.interpolation: false
    "vetur.validation.interpolation": false, // 不对新 TS 语法进行校验
  },
  // **optional** default: `[{ root: './' }]`
  // support monorepos
  projects: [
    './', // shorthand for only root.
    {
      // **required**
      // Where is your project?
      // It is relative to `vetur.config.js`.
      root: './',
      // **optional** default: `'package.json'`
      // Where is `package.json` in the project?
      // We use it to determine the version of vue.
      // It is relative to root property.
      package: './package.json',
      // **optional**
      // Where is TypeScript config file in the project?
      // It is relative to root property.
      // tsconfig: './tsconfig.json',
      // **optional** default: `'./.vscode/vetur/snippets'`
      // Where is vetur custom snippets folders?
      // snippetFolder: './.vscode/vetur/snippets',
      // **optional** default: `[]`
      // Register globally Vue component glob.
      // If you set it, you can get completion by that components.
      // It is relative to root property.
      // Notice: It won't actually do it. You need to use `require.context` or `Vue.component`
      globalComponents: [
        './src/components/**/*.vue',
        {
          // Component name
          name: 'FakeButton',
          // Component file path, please use '/'.
          path: './src/app/components/AppButton.vue'
        }
      ]
    }
  ]
}
avatar
文章
阅读
粉丝