vscode에서 vue 파일 형식을 지정하는 방법에 대한 자세한 설명

이 글에서는 단축키를 사용자 정의하는 방법을 포함하여 vscode에서 vue 파일 형식을 지정하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

vue 파일 형식을 지정하려면 vscode의 beautify 플러그인을 사용하세요

1. 먼저 beautify 플러그인을 설치하세요

[추천 학습: "vscode 튜토리얼"]

2. 설정 열기 => beautify.언어 검색

3. json을 구성하세요

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

특정 용도(무시 가능, 구성 불가)

1. 디렉토리

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

파일 내용은 위와 같습니다. 일부 매개변수를 강조 표시해야 합니다.

• brace_style, 형식 스타일, 자세한 내용은 공식 설명을 참조하세요(eslint의 기본 검사와의 충돌을 피하기 위해 이 속성을 brace_style，格式风格，详见官方说明（为避免和eslint默认检查冲突，建议此属性设置为 none,preserve-inline）
• indent_size，缩进长度（为避免和eslint默认检查冲突，建议此属性设置为 2）
• indent_char，缩进填充的内容（充满♂）
• jslint_happy:true，若你要搭配jslint使用，请开启此选项
• unformatted:["a","pre"]，这里放不需要格式化的标签类型。注意template也是默认不格式化的，.vue的template标签如果需要格式化请在.jsbeautifyrc重新定义不带template的声明属性。

.jsbeautifyrc配置官方文档地址：Click here

2.启用保存时自动

在VSCode的配置文件里添加editor.formatOnSave:truenone, Preserve-inline

indent_size , 들여쓰기 길이 (eslint 기본 검사와 충돌을 피하기 위해 이 속성을

로 설정하는 것이 좋습니다)

2. 저장 시 자동

을 활성화하고 VSCode 구성 파일에 editor.formatOnSave:true를 추가하세요. 즉, 저장 시 자동 서식을 구현할 수 있습니다

2. 맞춤 단축키

 {
  "key": "ctrl+b",//自己定键位
  "command": "HookyQR.beautify",
  "when": "editorFocus"
}

위 내용은 vscode에서 vue 파일 형식을 지정하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!