Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Val-Zhang opened this issue Jul 13, 2018 · 8 comments

Comments

@Val-Zhang
Copy link

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

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

@imyelo
Copy link
Member

imyelo commented Jul 13, 2018

<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
Copy link
Member

imyelo commented Jul 13, 2018

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

@imyelo
Copy link
Member

imyelo commented Jul 13, 2018

另外如果项目里有使用 TypeScript 的话,@jimexist
DefinitelyTyped/DefinitelyTyped#27191 也许可以帮助实现自动补全。😉

@Val-Zhang
Copy link
Author

Val-Zhang commented Jul 15, 2018

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

  1. �在 Vetur 的配置 vetur.grammar.customBlocks 中加入对 <config> 的支持,按照你上面的办法实现了语法高亮;
  2. 使用 Prettier 格式化了 stylescript 部分;
// prettier.config.js
module.exports = {
  semi: false,
  singleQuote: true,
  trailingComma: 'es5',
  bracketSpacing: false,
  parser: "vue"
}
  1. 使用 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
Copy link
Contributor

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

@proc07
Copy link

proc07 commented Apr 26, 2019

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

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

@hallee9000
Copy link
Contributor

hallee9000 commented Jul 19, 2020

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

——————

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

@imyelo
Copy link
Member

imyelo commented Jul 21, 2020

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

——————

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants