VUE-Element组件（一）vscode使用

Dear 丶 2023-07-19 10:51 27阅读 0赞

Ctrl+Shift+X可打开安装插件界面；

一、代码自动格式化与自动补全：vscode有很多插件都可以格式化代码，如eslint、vetur、Prettier等，这里以Prettier为例

1、安装插件Prettier -Code formatter

![20201224110032323.png][]

2、打开设置：file->preferences->settings，搜索settings，找到settings.json这个文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70][]

加上：

"editor.formatOnSave": true

如我的：

{
      "[git-rebase]": {
        "eslint.options": {
          "plugins": ["html"]
        },
        "eslint.validate": [
          "javascript",
          "javascriptreact",
          "html",
          "vue",
          {
            "language": "html",
            "autoFix": true
          },
          {
            "language": "vue",
            "autoFix": true
          }
        ],
        "eslint.autoFixOnSave": true,
        "editor.tabSize": 2,
        "workbench.editor.restoreViewState": false
      },
      "editor.fontLigatures": null,
      "editor.formatOnSave": true,
      "vetur.format.defaultFormatter.html": "js-beautify-html",
      "vetur.format.defaultFormatter.js": "vscode-typ=script",
      "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
          "wrap_attributes": "auto"
        },
        "prettyhtml": {
          "printWidth": 100,
          "singleQuote": false,
          "wrapAttributes": false,
          "sortAttributes": false
        }
      }
    }

或者

{
        "vetur.format.defaultFormatter.html": "prettier",
       "vetur.format.defaultFormatter.js": "vscode-typ=script",
       "vetur.format.defaultFormatterOptions": {
          "js-beautify-html": {
              "wrap_attributes": "auto"
          },
          "prettyhtml": {
              "printWidth": 100,
              "singleQuote": false,
              "wrapAttributes": false,
              "sortAttributes": false
          }
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.fontLigatures": null,
    //"editor.formatOnSave": true
    
    }

[20201224110032323.png]: /images/20230528/091d2d9a27d04dacb8935bdb14f66baf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70]: /images/20230528/4027e475b51b4ac99f6c42e46590c25b.png