Home > Development Tools > VSCode > Detailed explanation of how to format vue files in vscode

Detailed explanation of how to format vue files in vscode

青灯夜游
Release: 2021-05-20 18:08:53
forward
8913 people have browsed it

This article will introduce to you the method of formatting vue files in vscode, including the method of customizing shortcut keys. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Detailed explanation of how to format vue files in vscode

Use the beautify plug-in in vscode to format vue files

1. First install the plug-in beautify

[Recommended learning: "vscode tutorial"]

2. Open settings=> Search beautify.language

3. Just configure json

"beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautify"
            ]
        },
        "css": [
            "css",
            "scss"
        ],
        "html": [
            "htm",
            "html",
            "vue"//在这里加上vue
        ]
    }
Copy after login

Specific use (can be ignored, not configured)

1. Create the .jsbeautifyrc file in the working directory

 {
   "brace_style": "none,preserve-inline",
   "indent_size": 2,
   "indent_char": " ",
   "jslint_happy": true,
   "unformatted": [""],
   "css": {
     "indent_size": 2
   }
 }
Copy after login

The content of the file is as above, and some of the parameters should be highlighted.

  • brace_style, format style, please see the official description for details (to avoid conflicts with eslint’s default check, it is recommended that this attribute be set to none,preserve-inline)
  • indent_size, indent length (to avoid conflict with eslint default check, it is recommended that this property be set to 2)
  • indent_char, indent the filled content (full of ♂)
  • jslint_happy:true, if you want to use it with jslint, please turn on this option
  • unformatted: ["a","pre"], here are the tag types that do not need to be formatted. Note that template is also not formatted by default. If the template tag of .vue needs to be formatted, please redefine the declaration attribute without template in .jsbeautifyrc.

.jsbeautifyrc configuration official document address: Click here

2. Enable automatic

Add # in the VSCode configuration file when saving. ##editor.formatOnSave:trueYou can achieve automatic formatting when saving

ps: You can customize the shortcut keys for ease of operation

1. Shortcut key setting steps

2. Custom shortcut keys

 {
  "key": "ctrl+b",//自己定键位
  "command": "HookyQR.beautify",
  "when": "editorFocus"
}
Copy after login
ps: If you want to modify the editor For the defined shortcut keys, click here to enter the key directly

For more programming-related knowledge, please visit:

Programming Video! !

The above is the detailed content of Detailed explanation of how to format vue files in vscode. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template