使用 VSCode 的 vue 文件中的手写笔样式格式答案

【问题标题】：stylus style formatting in vue files with VSCode使用 VSCode 的 vue 文件中的手写笔样式格式
【发布时间】：2018-09-21 11:56:24
【问题描述】：

我有一个如下组成的 vue 文件（不是很重要）：

<template>
    //some pseudo-html
</template>

<script>
    //some javascript
</script>

<style lang='stylus'>
  @import '~variables'
  .card
    cursor pointer
    //some more stylus
</style>

我在 VSCode 中激活了formatOnSave，我还安装了 vetur 和 esLint。

当我在经典的 <style> 标记中使用 CSS 代码时，我没有问题，但是当我使用 lang='stylus' 时，ESLint 仍在寻找 CSS（我收到类似 [css] { expected (css-lcurlyexpected) 的语法错误）。

此外，当我使用手写笔时，保存时的自动格式只会把所有东西都搞砸，它会将所有内容放在同一行。保存后的结果：

<style lang='stylus'>
  @import '~variables'
  .card cursor pointer position relative padding //some more stylus
</style>

我尝试更改 vscode 中的 followinf 设置：

vetur.format.defaultFormatter.css vetur.format.defaultFormatter.stylus

但无济于事。

我当前的设置：

{
  "workbench.colorTheme": "FlatUI Immersed",
  "workbench.iconTheme": "material-icon-theme",
  "files.trimTrailingWhitespace": true,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "editor.detectIndentation": false,
  "editor.formatOnPaste": false,
  "editor.formatOnType": true,
  "editor.renderControlCharacters": true,
  "editor.renderWhitespace": "all",
  "editor.minimap.enabled": false,
  "editor.mouseWheelScrollSensitivity": 2,
  "editor.tabSize": 4,
  "editor.fontSize": 15,
  "window.zoomLevel": -1,
  "workbench.startupEditor": "newUntitledFile",
  "markdown.extension.preview.autoShowPreviewToSide": true,
  "markdown.preview.breaks": true,
}

以及工作区特定设置：

"settings": {
    "files.associations": {
      "*.vue": "html"
    },
    "editor.tabSize": 2,
    "editor.formatOnSave": true,
    // Defines space handling before function argument parentheses. Requires TypeScript >= 2.1.5.
    "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
    // Defines space handling before function argument parentheses. Requires TypeScript >= 2.1.5.
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // Eslint options
    "eslint.enable": true,
    "eslint.options": {
      "extensions": [
        ".html",
        ".js",
        ".vue",
        ".jsx"
      ]
    },
    // An array of language ids which should be validated by ESLint
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      {
        "language": "html",
        "autoFix": true
      }
    ],
    // Run the linter on save (onSave) or on type (onType)
    "eslint.run": "onSave",
    // Turns auto fix on save on or off.
    "eslint.autoFixOnSave": true,
  }

如果有人知道如何让格式化程序和 linter 正确地考虑到这一点，那就太棒了，但是经过 2 小时的挖掘，我真的会接受 一种禁用格式化程序和 linter 的方法，只是为了<style> 标签。

【问题讨论】：

标签： vue.js visual-studio-code vscode-settings stylus

【解决方案1】：

所以，在挖掘了更多之后，我找到了解决方案：

删除这部分设置：

"files.associations": {
    "*.vue": "html"
 },

并在这部分将html 替换为vue：

"eslint.validate": [
   "javascript",
   "javascriptreact",
   {
     "language": "vue",
     "autoFix": true
   }
 ],

还要加上：

"vetur.format.defaultFormatter.js": "none"

【讨论】：