在 VSCode 中写 .mina 文件有没有办法配合 prettier 自动格式化

[Val-Zhang]

在 VSCode 中下载了 Vetur 来使得 .mina 文件高亮，<template> <script> 以及 <style> 部分都解决了高亮问题，<config> 部分一直没有高亮。

此外，自动格式化效果一直不如人意，有些影响开发效率，请问有没有合适的mina格式化方案推荐。

[imyelo]

<config> 的语法高亮可以用以下方法实现：

你还可以通过配置 Vetur 的 `vetur.grammar.customBlocks` 为 `<config>` 部块也设置语法高亮：

1. 在 VSCode 中按下 `Ctrl+,` 打开用户设置 (User Settings)
2. 在用户设置中追加如下配置并保存

```json
"vetur.grammar.customBlocks": {
   "config": "json"
}
```

3. 通过 `Ctrl+Shift+P` 唤起命令面板，执行 `Vetur: Generate grammar from vetur.grammar.customBlocks`

4. 通过 `Ctrl+Shift+P` 唤起命令面板，执行 `Reload Window`，或直接重启 VSCode

参考：

• 单文件组件 - 语法高亮

[imyelo]

自动格式化的话，VSCode 里用 Vetur + Prettier + EditorConfig 可以解决你的问题吗？

[imyelo]

另外如果项目里有使用 TypeScript 的话，@Jimexist 的 https://github.com/DefinitelyTyped/DefinitelyTyped/pull/27191 也许可以帮助实现自动补全。😉

[Val-Zhang]

@imyelo 谢谢 最后的配置结果是这样的：

1. 在 Vetur 的配置 vetur.grammar.customBlocks 中加入对 <config> 的支持，按照你上面的办法实现了语法高亮；
2. 使用 Prettier 格式化了 style 和 script 部分；

   // prettier.config.js
   module.exports = {
   semi: false,
   singleQuote: true,
   trailingComma: 'es5',
   bracketSpacing: false,
   parser: "vue"
   }

3. 使用 eslint 结合 eslint-plugin-vue 格式化了 template 部分

   // .eslintrc.js
   module.exports = {
   extends: ['plugin:vue/recommended','prettier',"prettier/standard"],
   plugins: ["vue", "prettier"],
   rules: {
   'vue/attribute-hyphenation': 0,
   'vue/valid-template-root': 0,
   'vue/comment-directive': 0,
   "prettier/prettier": "error"
   },
   parserOptions: {
   sourceType: "module",
   parser: "babel-eslint"
   },
   env: {
   browser: true
   },
   }

大致上实现了想要的效果。不过还存在一些缺陷：

1. eslint 也会同时处理 script 部分，遇到 ts 有时候会报错，如：98:0 error Parsing error: The keyword 'interface' is reserved；
2. config 部分没有找到合适的格式化的办法

[jimexist]

参考 https://github.com/eslint/typescript-eslint-parser 来配置 eslint

[proc07]

vcode 直接将 mina 文件名以 vue形式进行检查

   "files.associations": {
        "*.mina": "vue"
    },
`

[hallee9000]

更新 写成 <script lang="babel"> 就好了。

——————

不知道为什么，安装了 Vetur，也配置了文件关联，还是有红色波浪线，重启了也没有用。请问下这种情况有办法解决吗？

[imyelo]

更新 写成 <script lang="babel"> 就好了。

——————

不知道为什么，安装了 Vetur，也配置了文件关联，还是有红色波浪线，重启了也没有用。请问下这种情况有办法解决吗？

vetur 的问题持续有一段时间了：#59 , 手动加 lang 属性可以暂时避开这个问题 👍